在我们的应用开发中，有些业务流程会涉及到多个步骤，或者是多个状态的转化，因此，会需要有相关的设计来展示该业务流程。比如《停车王》应用里的添加车牌的步骤。

通常，我们会把这类控件称为“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，并已投稿至个人微信号“浩码农”，未经许可，不得转载。