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

转载自：http://blog.csdn.net/qq_33553515/article/details/78356028

概述：同常在做商城类的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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

上面的属性是必须定义的属性。对于其他例如文字颜色 线条颜色 文字大小之类的属性都没有定义，有需要的可以自己下载源码进行修改。

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);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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();
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

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;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

四 源码

源码下载：github下载地址，