仿淘宝物流时间线的实现

物流时间线是根据物流状态改变而改变的一种动态效果。

贴张图：

下面看一下自定义的View：

第一步：

//初始化参数
private void init(AttributeSet attrs) {
    TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.timeline_style);
    mMarker = typedArray.getDrawable(R.styleable.timeline_style_tls_marker);
    mStartLine = typedArray.getDrawable(R.styleable.timeline_style_tls_line);
    mEndLine = typedArray.getDrawable(R.styleable.timeline_style_tls_line);
    mMarkerSize = typedArray.getDimensionPixelSize(R.styleable.timeline_style_tls_marker_size, 25);
    mLineSize = typedArray.getDimensionPixelSize(R.styleable.timeline_style_tls_line_size, 2);
    typedArray.recycle();

    if (mMarker == null) {
        mMarker = ContextCompat.getDrawable(mContext, R.drawable.timelinedefaultmarker);
    }
}

第二步：

重写onMeasure，计算视图宽高：

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    //测量子控件的内部视图的宽度和高度
    int w = mMarkerSize + getPaddingLeft() + getPaddingRight();
    int h = mMarkerSize + getPaddingTop() + getPaddingBottom();

    //通过宽高来确定点的位置
    int widthSize = 0;
    int heightSize = 0;
    if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.HONEYCOMB) {
        widthSize = resolveSizeAndState(w, widthMeasureSpec, 0);
        heightSize = resolveSizeAndState(h, heightMeasureSpec, 0);
    }
    setMeasuredDimension(widthSize, heightSize);
    initDrawable();
}

initDrawable主要是初始化一下圆圈和线条，

private void initDrawable() {
    int pLeft = getPaddingLeft();
    int pRight = getPaddingRight();
    int pTop = getPaddingTop();
    int pBottom = getPaddingBottom();