需求背景
最近一個(gè)項(xiàng)目中需要實(shí)現(xiàn)一個(gè)能夠展示當(dāng)前工單狀態(tài)的狀態(tài)欄，具體效果如圖
status1.jpg
status2.jpg
根據(jù)設(shè)計(jì)稿所示，該狀態(tài)欄有幾個(gè)特點(diǎn)：1.每張工單的狀態(tài)數(shù)量可能不一樣，如圖一有五種狀態(tài)，圖二則有六種。2.已經(jīng)流轉(zhuǎn)過的狀態(tài)需要置灰，當(dāng)前所處狀態(tài)需要高亮顯示。
設(shè)計(jì)思路
拿到設(shè)計(jì)稿時(shí)候初步考慮是使用一個(gè)Layout，內(nèi)含一個(gè)View的列表，每一個(gè)狀態(tài)使用一個(gè)View來展示，然后每次狀態(tài)流轉(zhuǎn)去設(shè)置每個(gè)View的顯示。但是這么做顯而易見會(huì)需要有一堆if else(或者是switch)，里面有一個(gè)重復(fù)的累贅代碼（如setBackGround, setText等等）。此外我們?cè)僮屑?xì)觀察設(shè)計(jì)稿會(huì)發(fā)現(xiàn)每個(gè)狀態(tài)格都是一個(gè)類似箭頭的形狀，前后兩個(gè)狀態(tài)會(huì)有重疊的部分，這樣在做屏幕適配的時(shí)候會(huì)非常麻煩。再者如果狀態(tài)一多，view也將變得非常多可能導(dǎo)致繪制效率的降低。
于是想到了另一種方案，能不能把所有狀態(tài)都繪制到一個(gè)View內(nèi)，使用Canvas的來繪制每個(gè)狀態(tài)的流轉(zhuǎn)。使用Canvas另外一個(gè)好處就是我們可以使用drawPath來很簡(jiǎn)單得畫出箭頭形狀。
細(xì)節(jié)實(shí)現(xiàn)
- 箭頭繪制，注意如果狀態(tài)個(gè)數(shù)變化則需要重新計(jì)算每個(gè)箭頭的寬度
/**
* 計(jì)算箭頭形狀path需要經(jīng)過的點(diǎn)位
* *
*/
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) {
//注意第一個(gè)狀態(tài)不需要箭頭尾部的形狀
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);
}
