您好,登錄后才能下訂單哦!
淘寶物流信息TimeLine的制作方法:
仿照的TimeLine效果圖:
代碼實現:
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; /** * 首個節點的外半徑 */ private float timelineHeadRadius; /** * 首個節點的中心顏色 */ private int timelineHeadColor; /** * 首個節點的邊緣顏色 */ private int timelineHeadColorEdge; /** * 其他節點的顏色值 */ private int timelineOtherColor; /** * 時間線的節點數 */ private int timelineCount; /** * 時間軸的位置 */ private int viewWidth; /** * 時間軸到距離頂部的距離 */ private int marginTop; /** * 時間軸的節點的半徑 */ private int timelineRadius; /** * 時間軸節點之間的距離 */ private int timelineRadiusDistance; /** * 時間軸的寬度 */ private int timelineWidth; /** * 時間軸的高度 */ 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); } /** * 初始化 * * @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")); // 中心深色 timelineHeadColorEdge = a.getColor( R.styleable.TimeLineView_timelineHeadColorEdge, Color.parseColor("#b9e5cc")); // 邊緣淺色 timelineOtherColor = a.getColor( R.styleable.TimeLineView_timelineOtherColor, Color.parseColor("#cccccc")); timelineCount = a.getInteger(R.styleable.TimeLineView_timelineCount, 0); timelineWidth = (int) a.getDimension( R.styleable.TimeLineView_timelineWidth, convertDIP2PX(context, 1)); 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) { // 默認設置時間軸的位置位于view的中間 viewWidth = getMeasuredWidth() / 2; // 設置第一個節點的顏色 mPaint.setColor(timelineHeadColor); /** * 根據時間軸的節點數目,畫對應的節點和軸 */ for (int j = 1; j <= timelineCount; j++) { /** * 當j==1,畫第一個節點的時候,有點特殊,我們需要在節點的外面再換一個圓環 */ if (j == 1) { // 畫筆設置為空心 canvas.drawCircle(viewWidth, timelineHeadRadius + marginTop, timelineRadius, mPaint); mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeWidth(5.0f); // 畫第一個節點外圍的圓環 mPaint.setColor(timelineHeadColorEdge); canvas.drawCircle(viewWidth, timelineHeadRadius + marginTop, timelineHeadRadius, mPaint); // 設置畫筆顏色,畫其他時間節點的顏色 mPaint.setColor(timelineOtherColor); // 畫筆設置為實心 mPaint.setStyle(Paint.Style.FILL); /** * 畫第一個節點下面的軸 */ canvas.drawRect(new Rect(viewWidth - timelineWidth / 2, (int) (2 * timelineHeadRadius + marginTop) + 5, viewWidth + timelineWidth / 2, (int) (2 * timelineHeadRadius + timelineRadiusDistance + marginTop + 5)), mPaint); continue; } /** * 畫時間軸的節點,即畫圓形 圓心的x都是一樣的,view的中間 * 圓心的y的計算是根據節點的位置來計算的,例如:第一個節點的y是根據第一個節點距離上面的距離加上第一個節點的半徑 * :timelineHeadRadius + marginTop * 其余的節點就是在一個節點的y的基礎上,加上兩倍半徑和節點之間的軸的長度*節點數:(2 * timelineRadius + * timelineRadiusDistance) * (j - 1) + timelineHeadRadius - * timelineRadius + marginTop * */ canvas.drawCircle(viewWidth, (2 * timelineRadius + timelineRadiusDistance) * (j - 1) + 2 * timelineHeadRadius - timelineRadius + marginTop, timelineRadius, mPaint); /** * 畫其余的軸 left:每個軸距離左邊距離都是一樣的 時間軸的中心位置-1/2的時間軸的寬度 viewWidth - * timelineWidth / 2 top: (int) (j * (2 * timelineRadius + * timelineRadiusDistance) - timelineRadiusDistance + 2 * * (timelineHeadRadius-timelineRadius)+ marginTop) * right:每個軸距離右邊距離都是一樣的 時間軸的中心位置+1/2的時間軸的寬度 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(); } /** * 轉換dip為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)); } }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。