English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Metodo di creazione della TimeLine per le informazioni di logistica del Taobao:
Esempio di TimeLine效果图:
Implementazione del codice:
package com.zms.timelineview; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Rect; import android.util.AttributeSet; import android.view.View; public class TimeLineView extends View { private Paint mPaint; /** * Raggio esterno del primo nodo */ private float timelineHeadRadius; /** * Colore centrale del primo nodo */ private int timelineHeadColor; /** * Colore del margine del primo nodo */ private int timelineHeadColorEdge; /** * Valore del colore degli altri nodi */ private int timelineOtherColor; /** * Numero di nodi dell'asse temporale */ private int timelineCount; /** * Posizione dell'asse temporale */ private int viewWidth; /** * Distanza dall'asse temporale al margine superiore */ private int marginTop; /** * Raggio dei nodi dell'asse temporale */ private int timelineRadius; /** * Distanza tra i nodi dell'asse temporale */ private int timelineRadiusDistance; /** * Larghezza dell'asse temporale */ private int timelineWidth; /** * Altezza dell'asse temporale */ private float timeLineViewHeight; public TimeLineView(Context context) { this(context, null); } public TimeLineView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public TimeLineView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); init(context, attrs, defStyle); } /** * Inizializzazione * * @param context * @param attrs * @param defStyle */ private void init(Context context, AttributeSet attrs, int defStyle) { final TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.TimeLineView, defStyle, 0); timelineRadiusDistance = (int) a.getDimension; R.styleable.TimeLineView_timelineRadiusDistance; convertDIP2PX(context, 20); timelineHeadRadius = a.getDimension; R.styleable.TimeLineView_timelineHeadRadius; convertDIP2PX(context, 6); timelineRadius = (int) a.getDimension; R.styleable.TimeLineView_timelineRadius; convertDIP2PX(context, 5); timelineHeadColor = a.getColor; R.styleable.TimeLineView_timelineHeadColor; Color.parseColor("#25ae5f"); // colore scuro al centro timelineHeadColorEdge = a.getColor; R.styleable.TimeLineView_timelineHeadColorEdge; timelineOtherColor = a.getColor( R.styleable.TimeLineView_timelineOtherColor, Color.parseColor("#cccccc")); timelineWidth = (int) a.getDimension( R.styleable.TimeLineView_timelineWidth, marginTop = (int) a.getDimension( R.styleable.TimeLineView_timelineMarginTop, convertDIP2PX(context, 50)); a.recycle(); mPaint = new Paint(); mPaint.setAntiAlias(true); } @Override protected void onDraw(Canvas canvas) { // Imposta la posizione predefinita dell'asse temporale al centro della view viewWidth = getMeasuredWidth() / 2; // Imposta il colore del primo nodo mPaint.setColor(timelineHeadColor); /** * Secondo il numero di nodi dell'asse temporale, disegna i nodi e l'asse corrispondenti */ for (int j = 1; j <= timelineCount; j++) { /** * Quando j==1, disegnando il primo nodo, c'è una speciale esigenza, dobbiamo disegnare un altro anello esterno al nodo */ if (j == 1) { // Imposta il pennello come vuoto canvas.drawCircle(viewWidth, timelineHeadRadius + marginTop, raggioTimeline, mPaint); mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeWidth(5.0f); // Disegna un anello esterno del primo nodo mPaint.setColor(timelineHeadColorEdge); canvas.drawCircle(viewWidth, timelineHeadRadius + marginTop, raggioTestaTimeline, mPaint); // Imposta il colore del pennello, il colore degli altri nodi temporali mPaint.setColor(coloreAltriTimeline); // Imposta lo stile del pennello in pieno mPaint.setStyle(Paint.Style.FILL); /** * Disegna l'asse sotto il primo nodo */ canvas.drawRect(new Rect(viewWidth - larghezzaTimeline / 2, (int) (2 * raggioTestaTimeline + margineSuperiore) + 5, viewWidth + larghezzaTimeline / 2, (int) (2 * raggioTestaTimeline + distanzaRaggioTestaTimeline + margineSuperiore + 5)), mPaint); continue; } /** * Disegna i nodi dell'asse del tempo, ossia disegna cerchi il centro x è lo stesso, il centro della view * Il calcolo della y del centro del cerchio è basato sulla posizione del nodo, ad esempio: la y del primo nodo è calcolata aggiungendo la distanza dal nodo superiore al primo nodo più il raggio del primo nodo * :raggioTestaTimeline + margineSuperiore, * Gli altri nodi sono calcolati sulla base della y di un nodo, aggiungendo due volte il raggio e la lunghezza dell'asse tra i nodi * numero di nodi: (2 * raggioTimeline + * distanzaRaggioTestaTimeline) * (j - 1) + raggioTestaTimeline - * raggioTimeline + margineSuperiore, * */ canvas.drawCircle(viewWidth, (2 * raggioTimeline + distanzaRaggioTestaTimeline) * (j - 1) + 2 * raggioTestaTimeline - raggioTimeline + margineSuperiore, raggioTimeline, mPaint); /** * Disegna gli altri assi left: la distanza di ogni asse dal lato sinistro è la stessa Posizione centrale dell'asse del tempo - 1/2 della larghezza dell'asse del tempo viewWidth - * larghezzaTimeline / 2 top: (int) (j * (2 * raggioTimeline + * timelineRadiusDistance) - timelineRadiusDistance + 2 * * (timelineHeadRadius-timelineRadius)+ marginTop) * right: ogni asse dista la stessa distanza dal margine destro; la posizione centrale dell'asse temporale + 1/2 della larghezza dell'asse temporale viewWidth + * timelineWidth / 2 bottom: (int) (j * (2 * timelineRadius + * timelineRadiusDistance) + 2 * * (timelineHeadRadius-timelineRadius)+ marginTop) */ canvas.drawRect( new Rect( viewWidth - timelineWidth / 2, (int) (j * (2 * timelineRadius + timelineRadiusDistance) - timelineRadiusDistance + 2 * (timelineHeadRadius - timelineRadius) + marginTop), viewWidth + timelineWidth / 2, (int) (j * (2 * timelineRadius + timelineRadiusDistance) + 2 * (timelineHeadRadius - timelineRadius) + marginTop)), mPaint); } } public float getTimelineHeadRadius() { return timelineHeadRadius; } public void setTimelineHeadRadius(float timelineHeadRadius) { this.timelineHeadRadius = timelineHeadRadius; invalidate(); } public int getTimelineHeadColor() { return timelineHeadColor; } public void setTimelineHeadColor(int timelineHeadColor) { this.timelineHeadColor = timelineHeadColor; invalidate(); } public int getTimelineOtherColor() { return timelineOtherColor; } public void setTimelineOtherColor(int timelineOtherColor) { this.timelineOtherColor = timelineOtherColor; invalidate(); } public int getTimelineCount() { return timelineCount; } public void setTimelineCount(int timelineCount) { this.timelineCount = timelineCount; invalidate(); } public int getMarginTop() { return marginTop; } public void setMarginTop(int marginTop) { this.marginTop = marginTop; invalidate(); } public int getTimelineRadius() { return timelineRadius; } public void setTimelineRadius(int timelineRadius) { this.timelineRadius = timelineRadius; invalidate(); } public int getTimelineRadiusDistance() { return timelineRadiusDistance; } public void setTimelineRadiusDistance(int timelineRadiusDistance) { this.timelineRadiusDistance = timelineRadiusDistance; invalidate(); } public int getTimelineWidth() { return timelineWidth; } public void setTimelineWidth(int timelineWidth) { this.timelineWidth = timelineWidth; } public float getTimeLineViewHeight() { this.timeLineViewHeight = getMarginTop() + getTimelineCount(); * (2 * getTimelineRadius() + getTimelineRadiusDistance()); return timeLineViewHeight; } public void setTimeLineViewHeight(float timeLineViewHeight) { this.timeLineViewHeight = timeLineViewHeight; invalidate(); } public int getViewWidth() { return viewWidth; } public void setViewWidth(int viewWidth) { this.viewWidth = viewWidth; invalidate(); } /** * Conversione di dip in px */ public static int convertDIP2PX(Context context, int dip) { float scale = context.getResources().getDisplayMetrics().density; return (int) (dip * scale + 0.5f * (dip >= 0 ? 1 : -1)); } }
Questo è tutto il contenuto dell'articolo, speriamo che sia utile per il tuo studio e che tu supporti fortemente il tutorial di urla.
Dichiarazione: il contenuto di questo articolo è stato prelevato da Internet, di proprietà del rispettivo autore. Il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, il sito web non detiene i diritti di proprietà, non ha effettuato alcuna modifica editoriale e non assume alcuna responsabilità legale. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una email a notice#oldtoolbag.com (al momento dell'invio dell'email, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata la veridicità, il sito eliminerà immediatamente i contenuti sospetti di violazione del copyright.