Android自定义View之仿京东售后审核进度

本篇文章已授权微信公众号 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下，谢谢。