Android仿淘宝物流信息TimeLineView

概述淘宝物流信息TimeLine的制作方法：仿照的TimeLine效果图：代码实现：packagecom.zms.timelineview;

淘宝物流信息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,defStyle); init(context,defStyle); } /** * 初始化 *  * @param context * @param attrs * @param defStyle */ private voID init(Context context,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,6)); timelineRadius = (int) a.getDimension(  R.styleable.TimelineVIEw_timelineRadius,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,1)); margintop = (int) a.getDimension(  R.styleable.TimelineVIEw_timelinemargintop,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,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,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),(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)); }}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android仿淘宝物流信息TimeLineView全部内容，希望文章能够帮你解决Android仿淘宝物流信息TimeLineView所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。