Android时光轴实现淘宝物流信息浏览效果

public class TimerLineMarker extends View {
 // 3个部分的drawable
 private Drawable mBeginLine, mEndLine, mMarker;
 // 显示大小
 private int mMarkerSize = 26, mLineSize = 4;
 // 距离头部的微调
 private int mMarkerMarginTop = 0;

 public TimerLineMarker(Context context) {
  this(context, null);
 }

 public TimerLineMarker(Context context, AttributeSet attrs) {
  this(context, attrs, 0);
 }

 public TimerLineMarker(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  initAttribute(attrs);
 }

 /**
  * 初始化自定义属性
  */
 private void initAttribute(AttributeSet attrs) {
  final TypedArray typedArray = getContext().obtainStyledAttributes(
    attrs, R.styleable.TimerLineMarker);
  // 获取size
  mMarkerSize = typedArray.getDimensionPixelSize(
    R.styleable.TimerLineMarker_markerSize, mMarkerSize);
  mLineSize = typedArray.getDimensionPixelSize(
    R.styleable.TimerLineMarker_lineSize, mLineSize);
  // 获取drawable
  mBeginLine = typedArray
    .getDrawable(R.styleable.TimerLineMarker_beginLine);
  mEndLine = typedArray.getDrawable(R.styleable.TimerLineMarker_endLine);
  mMarker = typedArray.getDrawable(R.styleable.TimerLineMarker_marker);
  mMarkerMarginTop = typedArray.getDimensionPixelSize(
    R.styleable.TimerLineMarker_markerMarginTop, mMarkerMarginTop);
  typedArray.recycle();
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  // 测量本View的宽高里面子控件的宽度
  int with = mMarkerSize + getPaddingLeft() + getPaddingRight();
  int height = mMarkerSize + getPaddingTop() + getPaddingBottom();
  // 通过系统的一个方法做决策最终决定宽高
  int withSize = resolveSizeAndState(with, widthMeasureSpec, 0);
  int heightSize = resolveSizeAndState(height, heightMeasureSpec, 0);
  // 设置宽高
  setMeasuredDimension(withSize, heightSize);
 }
}

 // 标记距离头部的位置
 private int mMarkerTopDistance;
 @Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  super.onSizeChanged(w, h, oldw, oldh);
  initAlignViewHeight();
  // 当View显示的时候回调
  // 定位到当前几个draw able的坐标,然后绘制
  initDrawable();
 }

 /**
  * 初始化获取需要对齐的View高度
  */
 private void initAlignViewHeight() {
  // 获取需要对齐的View
  ViewGroup parent = (ViewGroup) this.getParent();
  mNeedAlignView = findNeedAlignView(parent);

  // 获取需要对齐的View距离顶部的高度
  if (mNeedAlignView != null) {
   mMarkerTopDistance = 0;
   // 与需要对齐View的中心点对齐
   mMarkerTopDistance += calcViewTop(mNeedAlignView)
     + mNeedAlignView.getMeasuredHeight() / 2;
  }
 }

 /**
  * 循环获取距顶部的距离
  */
 private int calcViewTop(View view) {
  final ViewGroup parentView = (ViewGroup) view.getParent();
  final int childCount = parentView.getChildCount();
  // 先加上paddingTop
  int topDistance = parentView.getPaddingTop();
  for (int i = 0; i 

 /**
  * 初始化Draw able
  */
 private void initDrawable() {
  initMarkerBounds();
  initLineBounds();
  postInvalidate();
 }

 /**
  * 初始化时光线Bounds
  */
 private void initLineBounds() {
  int height = getHeight();
  Rect bounds = mMarker.getBounds();

  int lineLeft = bounds.centerX() - (mLineSize >> 1);

  if (mBeginLine != null)
   mBeginLine.setBounds(lineLeft, 0, lineLeft + mLineSize, bounds.top);

  if (mEndLine != null)
   mEndLine.setBounds(lineLeft, bounds.bottom, lineLeft + mLineSize,
     height);
 }

 /**
  * 初始化标记Bounds
  */
 private void initMarkerBounds() {
  int pLeft = getPaddingLeft();
  int pRight = getPaddingRight();
  int pBottom = getPaddingBottom();
  int pTop = getPaddingTop();

  int width = getWidth();
  int height = getHeight();

  int cWidth = width - pLeft - pRight;
  int cHeight = height - pTop - pBottom;

  mMarkerSize = Math.min(mMarkerSize, Math.min(cWidth, cHeight));

  mMarkerTopDistance = mMarkerTopDistance - mMarkerSize / 2;
  if (mMarkerMarginTop <0) {
   mMarkerMarginTop = 0;
  }

  mMarker.setBounds(pLeft, mMarkerTopDistance + mMarkerMarginTop, pLeft
    + mMarkerSize, mMarkerTopDistance + mMarkerMarginTop
    + mMarkerSize);
 }

 @Override
 protected void onDraw(Canvas canvas) {
  if (mMarker.getBounds().right <= 0) {
   // 如果bounds被弄丢了
   assignValue();
  }

  if (mMarkerStyle != MarkerStyle.START_STYLE) {
   if (mBeginLine != null)
    mBeginLine.draw(canvas);
  }

  mMarker.draw(canvas);
  if (mMarkerStyle != MarkerStyle.END_STYLE) {
   if (mEndLine != null)
    mEndLine.draw(canvas);
  }
 }

 /**
  * 从新赋值
  */
 private void assignValue() {
  initAlignViewHeight();
  initMarkerBounds();
  initLineBounds();
 }

 /**
  * 设置显示的分隔
  */
 public void setStyle(MarkerStyle markerStyle) {
  this.mMarkerStyle = markerStyle;
  invalidate();
 }

 /**
  * 设置标记的Draw able
  */
 public void setMarker(Drawable marker) {
  this.mMarker = marker;
  postInvalidate();
 }

 /**
  * 设置标记资源
  * 
  * @param resouceId
  *   资源id
  */
 public void setMarker(int resouceId) {
  this.mMarker = getResources().getDrawable(resouceId);
  postInvalidate();
 }

 /**
  * 时光轴显示风格
  */
 public enum MarkerStyle {
  // 开始第一个
  START_STYLE,
  // 中间位置
  CENTER_STYLE,
  // 最后一个
  END_STYLE
 }