Android仿淘宝物流信息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, 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));
 }

}

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