需求背景
最近一个项目中需要实现一个能够展示当前工单状态的状态栏，具体效果如图
status1.jpg
status2.jpg
根据设计稿所示，该状态栏有几个特点：1.每张工单的状态数量可能不一样，如图一有五种状态，图二则有六种。2.已经流转过的状态需要置灰，当前所处状态需要高亮显示。
设计思路
拿到设计稿时候初步考虑是使用一个Layout，内含一个View的列表，每一个状态使用一个View来展示，然后每次状态流转去设置每个View的显示。但是这么做显而易见会需要有一堆if else(或者是switch)，里面有一个重复的累赘代码（如setBackGround, setText等等）。此外我们再仔细观察设计稿会发现每个状态格都是一个类似箭头的形状，前后两个状态会有重叠的部分，这样在做屏幕适配的时候会非常麻烦。再者如果状态一多，view也将变得非常多可能导致绘制效率的降低。
于是想到了另一种方案，能不能把所有状态都绘制到一个View内，使用Canvas的来绘制每个状态的流转。使用Canvas另外一个好处就是我们可以使用drawPath来很简单得画出箭头形状。
细节实现
- 箭头绘制，注意如果状态个数变化则需要重新计算每个箭头的宽度
/**
* 计算箭头形状path需要经过的点位
* *
*/
private void calculatePoints() {
if (mViewWidth == 0) {
mViewWidth = getMeasuredWidth();
if (mViewWidth > 0 && mNumberOfStatus != 0) {
mWidthOfTagWithoutArrow = mViewWidth / mNumberOfStatus;
mHeightOfTag = getMeasuredHeight();
mWidthOfTagArrow = (int) (mWidthOfTagWithoutArrow / 2 * 0.2);
mHeightOfTagArrow = mHeightOfTag / 2;
mStatusBackgroundPoints.clear();
float[] points;
for (int i = 0; i < mNumberOfStatus; i++) {
if (i == 0) {
//注意第一个状态不需要箭头尾部的形状
points = new float[]{
i * mWidthOfTagWithoutArrow, 0,
(i + 1) * mWidthOfTagWithoutArrow, 0,
(i + 1) * mWidthOfTagWithoutArrow + mWidthOfTagArrow, mHeightOfTagArrow,
(i + 1) * mWidthOfTagWithoutArrow, mHeightOfTag,
i * mWidthOfTagWithoutArrow, mHeightOfTag,
(i + 1) * mWidthOfTagWithoutArrow + mWidthOfTagArrow, mHeightOfTag,
};
} else {
points = new float[]{
i * mWidthOfTagWithoutArrow, 0,
(i + 1) * mWidthOfTagWithoutArrow, 0,
(i + 1) * mWidthOfTagWithoutArrow + mWidthOfTagArrow, mHeightOfTagArrow,
(i + 1) * mWidthOfTagWithoutArrow, mHeightOfTag,
i * mWidthOfTagWithoutArrow, mHeightOfTag,
i * mWidthOfTagWithoutArrow + mWidthOfTagArrow, mHeightOfTagArrow,
(i + 1) * mWidthOfTagWithoutArrow + mWidthOfTagArrow, mHeightOfTag,
};
}
mStatusBackgroundPoints.add(points);
}
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int size = mStatusBackgroundPoints.size();
for (int i = 0; i < size; i++) {
float[] tag = mStatusBackgroundPoints.get(i);
Path path = mPaths[i];
if (i == 0) {
path.moveTo(tag[0], tag[1]);
path.lineTo(tag[2], tag[3]);
path.lineTo(tag[4], tag[5]);
path.lineTo(tag[6], tag[7]);
path.lineTo(tag[8], tag[9]);
path.close();
draw(i, canvas, path, tag[0], tag[1], tag[10] * 2, tag[11]);
} else {
path.moveTo(tag[0], tag[1]);
path.lineTo(tag[2], tag[3]);
path.lineTo(tag[4], tag[5]);
path.lineTo(tag[6], tag[7]);
path.lineTo(tag[8], tag[9]);
path.lineTo(tag[10], tag[11]);
path.close();
draw(i, canvas, path, tag[0], tag[1], tag[12] * 2, tag[13]);
}
mPaint.setXfermode(null);
mPaint.setShader(null);
}
}
- 文字以及渐变色背景的绘制
private void draw(int index, Canvas canvas, Path path, float left, float top, float right, float bottom) {
LinearGradient linearGradient;
int[] colors;
if (mCurrentStatus == -1) {
colors = mColorsStatusDone;
mPaintText.setColor(Color.WHITE);
} else {
if (mCurrentStatus == index) {
colors = mColorsStatusDoing;
mPaintText.setColor(Color.WHITE);
} else if (mCurrentStatus > index) {
colors = mColorsStatusDone;
mPaintText.setColor(Color.WHITE);
} else {
colors = mColorsStatusToDo;
mPaintText.setColor(Color.parseColor("#C5C5C6"));
}
}
linearGradient = new LinearGradient(mWidthOfTagWithoutArrow * index, 0, mWidthOfTagWithoutArrow * (index + 1) + mWidthOfTagArrow, 0,
colors,
null,
Shader.TileMode.CLAMP);
int sc = canvas.saveLayer(left, top, right, bottom, mPaint, Canvas.ALL_SAVE_FLAG);
canvas.drawPath(path, mPaint);
mPaint.setXfermode(mPorterDuffXfermode);
mPaint.setShader(linearGradient);
canvas.drawRect(left, top, right, bottom, mPaint);
canvas.restoreToCount(sc);
String text = mStatusTexts[index];
float stringWidth = mPaintText.measureText(text);
float startTextX = (mWidthOfTagWithoutArrow + mWidthOfTagArrow - stringWidth) / 2 + mWidthOfTagWithoutArrow * index;
float baseY = mHeightOfTag / 2 - 2;
Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();
float fontTotalHeight = fontMetrics.bottom - fontMetrics.top;
float offY = fontTotalHeight / 2 - fontMetrics.bottom;
float newY = baseY + fontTotalHeight / 2 + offY;
canvas.drawText(text, startTextX, newY, mPaintText);
}
