在我们的应用开发中，有些业务流程会涉及到多个步骤，或者是多个状态的转化，因此，会需要有相关的设计来展示该业务流程。比如《停车王》应用里的添加车牌的步骤。
通常，我们会把这类控件称为“StepView”。上图的这种设计相对来说还是比较简单的，下面我们以它为例，来一步步写我们的“StepView”。
那么，实现这样的一个“StepView”，我们会需要哪些知识呢？
所需知识
- 布局测量
- 图形文字绘制
- 文字位置计算
布局测量
首先像这样的StepView，它的宽度应该是填满或者是固定的，因为考虑到屏幕适配的关系，每一步之间的线的长度应该是自适应的。而它的高度，除了固定高度或填满父布局高度，我们还希望它可以根据自己的内容来自适应高度。这时候就需要用到测量了。
图形文字绘制
在这个控件中，我们会需要绘制实心圆、空心圆、矩形（每一步之间的连线），文字。
文字位置计算
我们需要计算文字的位置，使数字正好在圆内居中，以及下面的文字与圆的距离如我们所设。
属性及方法的设计
在StepView当中，需要设定一些属性，比如未选中时圆的颜色，文字的颜色，选中时的颜色，文字大小，圆大小，中间连线的宽度等等。所以我们至少需要自定义以下属性：
- 圆颜色
- 底部文字颜色
- 选中时的颜色
- 圆的填充半径
- 圆的边框宽度
- 线的宽度
- 底部文字大小
- 底部文字与圆的距离
另外，我们希望该控件至少提供以下方法：
- public void setSteps(List<String> steps) 设置步骤内容
- public void selectedStep(int step) 选择某一步
- public int getCurrentStep() 返回当前在哪一步
- public int getStepCount() 返回总步数
代码实现
下面我们来一步步实现。
首先创建一个类StepView，继承自View。
控件属性
然后在values/attrs.xml中创建一个declare-styleable，代码如下：
<declare-styleable name="StepView">
<attr name="svCircleColor" format="color"/>
<attr name="svTextColor" format="color"/>
<attr name="svSelectedColor" format="color"/>
<attr name="svFillRadius" format="dimension"/>
<attr name="svStrokeWidth" format="dimension"/>
<attr name="svLineWidth" format="dimension"/>
<attr name="svTextSize" format="dimension"/>
<attr name="svDrawablePadding" format="dimension"/>
</declare-styleable>这里需要说明一下，declare-styleable中的name应该与我们的类的名字一致，这样在AndroidStudio写布局时，就会有这些属性的代码提示。
默认的Style
我们在写一个自定义控件时，应该尽可能地给出一些预设值来使它有一个默认的效果，并且这些预设值可以被覆盖。所以在这里我们也写一个Style，对上面的属性给定一个默认值。在values/styles.xml中添加以下代码：
<style name="StepView">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:background">@android:color/white</item>
<item name="android:paddingTop">8dp</item>
<item name="android:paddingBottom">8dp</item>
<item name="svCircleColor">#EEE</item>
<item name="svTextColor">#999</item>
<item name="svSelectedColor">#418AF9</item>
<item name="svFillRadius">11dp</item>
<item name="svStrokeWidth">3dp</item>
<item name="svLineWidth">4dp</item>
<item name="svTextSize">12sp</item>
<item name="svDrawablePadding">10dp</item>
</style>Java代码实现
成员变量及构造方法
下面是成员变量的定义及构造方法的实现：
private static final int START_STEP = 1;
private final List<String> mSteps = new ArrayList<>();
private int mCurrentStep = START_STEP;
private int mCircleColor;
private int mTextColor;
private int mSelectedColor;
private int mFillRadius;
private int mStrokeWidth;
private int mLineWidth;
private int mDrawablePadding;
private Paint mPaint;
public StepView(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.StepView, 0, R.style.StepView);
mCircleColor = ta.getColor(R.styleable.StepView_svCircleColor, 0);
mTextColor = ta.getColor(R.styleable.StepView_svTextColor, 0);
mSelectedColor = ta.getColor(R.styleable.StepView_svSelectedColor, 0);
mFillRadius = ta.getDimensionPixelSize(R.styleable.StepView_svFillRadius, 0);
mStrokeWidth = ta.getDimensionPixelSize(R.styleable.StepView_svStrokeWidth, 0);
mLineWidth = ta.getDimensionPixelSize(R.styleable.StepView_svLineWidth, 0);
mDrawablePadding = ta.getDimensionPixelSize(R.styleable.StepView_svDrawablePadding, 0);
final int textSize = ta.getDimensionPixelSize(R.styleable.StepView_svTextSize, 0);
ta.recycle();
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
mPaint.setTextSize(textSize);
mPaint.setTextAlign(Paint.Align.CENTER);
if (isInEditMode()) {
String[] steps = {"Step 1", "Step 2", "Step 3"};
setSteps(Arrays.asList(steps));
}
}首先，我们将需要在onDraw(Canvas canvas)方法中用到的属性值都作为成员变量定义，并且实现构造方法public StepView(Context context, AttributeSet attrs)，以便我们能在布局中使用这个控件。
其次，需要注意的是，这里获取属性值的代码是context.obtainStyledAttributes(attrs, R.styleable.StepView, 0, R.style.StepView);，可参见我另一篇讲自定义View的博客《Android开发技巧——自定义控件之使用style》。这里简单解释一下，第三个参数是定义的Style属性，由于我们这里没有定义，所以传入的是0。第四个参数表示我们定义的Style资源，这里传入前面所写的style。在确定一个属性最终的值的时候，优先级顺序是这样的：
- 首先获取给定的AttributeSet中的属性值
- 如果找不到，则去AttributeSet中style（你在写布局文件时定义的style=”@style/xxxx”）指定的资源获取
- 如果找不到，则去defStyleAttr以及defStyleRes中的默认style中获取。
- 最后去找的是当前theme下的基础值。
获取到TypedArray对象之后就是各种取属性值，取完调用其recycle()方法回收。然后初始化我们的画笔，这里我调用了mPaint.setTextAlign(Paint.Align.CENTER);，让绘制时文字对齐方式为居中，主要是为了方便后面文字的计算与绘制。
在这个构造方法的最后，我还写了几行代码：
if (isInEditMode()) {
String[] steps = {"Step 1", "Step 2", "Step 3"};
setSteps(Arrays.asList(steps));
}这个isInEditMode是在预览布局时使用的，它在布局预览时返回true，而当实际运行的时候则不会进入这个条件语句。因此我们可以利用其来设置一些数据，以便在AndroidStudio写布局时预览我们的控件效果。
基本行为实现
下面是实现我们在前面所设计的方法：
public void setSteps(List<String> steps) {
mSteps.clear();
if (steps != null) {
mSteps.addAll(steps);
}
selectedStep(START_STEP);
}
public void selectedStep(int step) {
final int selected = step < START_STEP ?
START_STEP : (step > mSteps.size() ? mSteps.size() : step);
mCurrentStep = selected;
invalidate();
}
public int getCurrentStep() {
return mCurrentStep;
}
public int getStepCount() {
return mSteps.size();
}测量
接下来是测量。
这里的测量还是比较好理解的。我们仅需要对高度为wrap_content的情况进行计算。
在之前的博客《Android开发技巧——实现设计师给出的视觉居中的布局》中，我们知道wrap_content对应的是Java代码中的MeasureSpec.AT_MOST，所以这里在高度模式为MeasureSpec.AT_MOST时，计算我们的控件高度。它的高度为上下内边距加上外圆的直径，文字的大小以及文字与圆的距离。
代码如下：
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
if (heightMode == MeasureSpec.AT_MOST) {
final int fontHeight = (int) Math.ceil(mPaint.descent() - mPaint.ascent());
height = getPaddingTop() + getPaddingBottom() + (mFillRadius + mStrokeWidth) * 2
+ mDrawablePadding + fontHeight;
}
setMeasuredDimension(width, height);
}绘制
接下来就是重写protected void onDraw(Canvas canvas)方法进行绘制了。
首先，如果步骤为空，是不需要绘制的：
final int stepSize = mSteps.size();
if (stepSize == 0) {
return;
}接下来是绘制每一步的内容。
这里我们把绘制分为两部分，首先是绘制每一步的内容，其次是绘制每一步之间的连线。在这里我们需要知道如何计算文字的高度，以及绘制文字时的起始点。
下面是我在网上找的一张字体属性示意图。
在Android当中，文字的绘制是从Baseline开始的。下面是其中字体属性的说明：
- ascent 单个文字中所建议的在Baseline上面的距离，它是一个负值。
- descent 单个文字中所建议的在Baseline下面的距离，它是一个正值。
- leading 在每一行文字之间所建议的额外的空间
相关文档可参见：https://developer.android.google.cn/reference/android/graphics/Paint.FontMetrics.html
所以我们的文字高度为descent-ascent，文字中心与baseline的距离为-ascent - (-ascent + descent) / 2即-(ascent + descent) / 2。
绘制每一步我们需要计算字体的高度，字体中心与baseline的距离，大圆半径，圆心坐标，每一步的宽度。代码如下：
final int width = getWidth();
final float ascent = mPaint.ascent();
final float descent = mPaint.descent();
final int fontHeight = (int) Math.ceil(descent - ascent);
final int halfFontHeightOffset = -(int)(ascent + descent) / 2;
final int bigRadius = mFillRadius + mStrokeWidth;
final int startCircleY = getPaddingTop() + bigRadius;
final int childWidth = width / stepSize;
for (int i = 1; i <= stepSize; i++) {
drawableStep(canvas, i, halfFontHeightOffset, fontHeight, bigRadius,
childWidth * i - childWidth / 2, startCircleY);
}其中绘制每一步的方法的代码如下：
private void drawableStep(Canvas canvas, int step, int halfFontHeightOffset, int fontHeight,
int bigRadius, int circleCenterX, int circleCenterY) {
final String text = mSteps.get(step - 1);
final boolean isSelected = step == mCurrentStep;
if (isSelected) {
mPaint.setStrokeWidth(mStrokeWidth);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setColor(mCircleColor);
canvas.drawCircle(circleCenterX, circleCenterY, mFillRadius + mStrokeWidth / 2, mPaint);
mPaint.setColor(mSelectedColor);
mPaint.setStyle(Paint.Style.FILL);
canvas.drawCircle(circleCenterX, circleCenterY, mFillRadius, mPaint);
} else {
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(mCircleColor);
canvas.drawCircle(circleCenterX, circleCenterY, bigRadius, mPaint);
}
mPaint.setFakeBoldText(true);
mPaint.setColor(Color.WHITE);
String number = String.valueOf(step);
canvas.drawText(number, circleCenterX, circleCenterY + halfFontHeightOffset, mPaint);
mPaint.setFakeBoldText(false);
mPaint.setColor(isSelected ? mSelectedColor : mTextColor);
canvas.drawText(text, circleCenterX,
circleCenterY + bigRadius + mDrawablePadding + fontHeight / 2, mPaint);
}最后是绘制这些连线：
final int halfLineLength = childWidth / 2 - bigRadius;
for (int i = 1; i < stepSize; i++) {
final int lineCenterX = childWidth * i;
drawableLine(canvas, lineCenterX - halfLineLength,
lineCenterX + halfLineLength, startCircleY);
}其中绘制每条线的方法代码如下：
private void drawableLine(Canvas canvas, int startX, int endX, int centerY) {
mPaint.setColor(mCircleColor);
mPaint.setStrokeWidth(mLineWidth);
canvas.drawLine(startX, centerY, endX, centerY, mPaint);
}到这里，该控件已经完整实现。
下面是运行效果：
全部代码可参见对应的Github项目msdx/StepView：https://github.com/msdx/StepView
本文关联我的简书博客http://www.jianshu.com/p/bcfed38d1cb7，并已投稿至个人微信号“浩码农”，未经许可，不得转载。
