本篇文章已授權微信公眾號 guolin_blog （郭霖）獨家釋出

概述：同常在做商城類的App時，都會有售後的需求，而售後流程通常會因為不同的業務，而分為不確定的幾個步驟，如下圖所示：

那麼問題就來了，像這樣的效果如何實現呢？讓我們先放下這個問題，先看看UI模仿的京東原圖是怎樣的：

最後在看看我最終實現的效果:

靜圖：

動圖：

從上面的效果圖中我們可以觀察到，當步驟少於等於5個時，等分居中顯示，當步驟大於5個時，可以橫向拖動顯示。

一 分析

1 需要實現的效果：相信不要多言，上面已經完全展示。

2 需要注意的點：步驟不固定，文字和圖片居中對齊，文字可能多行，多行的文字也是對稱的。

二 思路

相同的效果，會有不同的實現思路。這裡提供兩個方法實現：

1 將一個步驟單獨作為自定義view實現。

2 將所有步驟做為自定義view實現。

本文將才用第一種實現方式，實現我們的效果。將一個步驟作為自定義view時，我們還可以再分成三個部分： 左邊線，中間圖片，右邊線。

三 實現

1 自定義屬性：

   <declare-styleable name="AuditProgressView">
        <!--當前步驟是否完成 -->
        <attr name="apv_isCurrentComplete"
 
 format="boolean" />
        <!--下一個步驟是否完成 -->
        <attr name="apv_isNextComplete" format="boolean" />
        <!--是不是第一個步驟 -->
        <attr name="apv_isFirstStep" format="boolean" />
        <!--是不是最後一個步驟 -->
        <attr name="apv_isLastStep" format="boolean"
 
 />
        <!--共有幾個步驟 -->
        <attr name="apv_stepCount" format="integer" />
        <!--步驟提示 -->
        <attr name="apv_text" format="string|reference" />
    </declare-styleable>

上面的屬性是必須定義的屬性。對於其他例如文字顏色 線條顏色 文字大小之類的屬性都沒有定義，有需要的可以自己下載原始碼進行修改。

2 onMeasue 方法的實現

   @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(widthMeasureSpec);

        // 在寬高不是精確模式時,定義最小寬高

        if (widthMode != MeasureSpec.EXACTLY) {
            width = getDisplayMetrics(getContext()).widthPixels / stepCount;
        }

        if (heightMode != MeasureSpec.EXACTLY) {
            height = dp2px(getContext(), 90);
        }
        setMeasuredDimension(width, height);
    }

onMeasue 方法中，在寬高不是精確模式時，設定最小寬高。而寬度的定義則涉及到 stepCount 屬性，是根據有幾個步驟，則將螢幕幾等分為最小寬度。需要注意的是，當自定view設計到 pading 和 margin 時 這裡的計算邏輯需要考慮 pading 和 marging 的位置。

3 onDraw 方法的實現

    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 根據 當前步驟是否完成 確定中間的圖片
        if (mIsCurrentComplete) {
            audit_drawBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.audit_complete);
        } else {
            audit_drawBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.audit_uncomplete);
        }


        // 獲取自定義View的寬高
        width = getWidth();
        height = getHeight();

        // 繪製圖片
        canvas.drawBitmap(audit_drawBitmap, width / 2 - audit_drawBitmap.getWidth() / 2, height / 2 - audit_drawBitmap.getHeight() / 2, paint);

        // 根據當前步驟是否完成 確定繪製文字顏色
        String mString = text;
        TextPaint tp = new TextPaint();
        if (mIsCurrentComplete) {
            tp.setColor(Color.parseColor("#03A9F5"));
        } else {
            tp.setColor(Color.parseColor("#757575"));
        }

        // 繪製多行文字
        tp.setStyle(Paint.Style.FILL);
        Point point = new Point(width / 2, dp2px(getContext(), 70));
        tp.setTextSize(sp2px(getContext(), 14));
        textCenter(mString, tp, canvas, point, dp2px(getContext(), 57), Layout.Alignment.ALIGN_CENTER, 1, 0, false);

        // 繪製線條
        paint.setStrokeWidth(dp2px(getContext(), 2));

        // 根據是不是第一個步驟 確定是否有左邊線條
        if (!mIsFirstStep) {
            // 左邊
            // 根據當前步驟是否完成 來確定左邊線條的顏色
            if (mIsCurrentComplete) {
                paint.setColor(Color.parseColor("#03A9F5"));
            } else {
                paint.setColor(Color.parseColor("#E4E4E4"));
            }
            canvas.drawLine(0, height / 2, width / 2 - audit_drawBitmap.getWidth() / 2 - dp2px(getContext(), 8), height / 2, paint);
        }

        // 根據是不是最後的步驟 確定是否有右邊線條
        if (!mIsLastStep) {
            // 右邊
            // 根據下一個步驟是否完成 來確定右邊線條的顏色
            if (mIsNextComplete) {
                paint.setColor(Color.parseColor("#03A9F5"));
            } else {
                paint.setColor(Color.parseColor("#E4E4E4"));
            }
            canvas.drawLine(width / 2 + audit_drawBitmap.getWidth() / 2 + dp2px(getContext(), 8), height / 2, width, height / 2, paint);
        }


    }

    //繪製多行文字
    private void textCenter(String string, TextPaint textPaint, Canvas canvas, Point point, int width, Layout.Alignment align, float spacingmult, float spacingadd, boolean includepad) {
        StaticLayout staticLayout = new StaticLayout(string, textPaint, width, align, spacingmult, spacingadd, includepad);
        canvas.save();
        canvas.translate(-staticLayout.getWidth() / 2 + point.x, -staticLayout.getHeight() / 2 + point.y);
        staticLayout.draw(canvas);
        canvas.restore();
    }

a 根據 當前步驟是否完成 確定中間的圖片

b 根據當前步驟是否完成 確定繪製文字顏色

c 根據是不是第一個步驟 確定是否有左邊線條，再根據當前步驟是否完成 來確定左邊線條的顏色

d 根據是不是最後的步驟 確定是否有右邊線條，再根據下一個步驟是否完成 來確定右邊線條的顏色

e 繪製多行文字的具體實現。可以參考我部落格的關與自定義view的系列文章自定義view之drawText 及 多行文字繪製

4 配合activity中動態使用新增的方法

   public void setIsCurrentComplete(boolean isCurrentComplete) {this.mIsCurrentComplete = isCurrentComplete;}

    public void setIsNextComplete(boolean isNextComplete) {
        this.mIsNextComplete = isNextComplete;
    }

    public void setIsFirstStep(boolean isFirstStep) {
        this.mIsFirstStep = isFirstStep;
    }

    public void setIsLastStep(boolean isLastStep) {
        this.mIsLastStep = isLastStep;
    }

    public void setText(String text) {
        this.text = text;
    }

    public void setStepCount(int stepCount) {
        this.stepCount = stepCount;
    }

四 原始碼

原始碼下載：github下載地址，覺得不錯的同學請start下，謝謝。