Android 自定義 View 實(shí)現(xiàn)橫行時(shí)間軸

本篇文章會(huì)說(shuō)下如何使用并且要用麻煩的自定義 view 去實(shí)現(xiàn)時(shí)間軸效果，以及如何分析、實(shí)現(xiàn)自定義 view。需要具備的知識(shí)：Paint、Canvas、自定義 view 的繪制流程。

歡迎留言交流。

一、已經(jīng)有很多 RecycleView 實(shí)現(xiàn)時(shí)間軸的例子，為何還要費(fèi)勁的使用自定義 view 去實(shí)現(xiàn)時(shí)間軸？

首先看下最終想要的效果：

Android 自定義 View 實(shí)現(xiàn)橫行時(shí)間軸

根據(jù)上圖可以總結(jié)出以下幾點(diǎn)：

每個(gè)階段要顯示時(shí)間、階段名、狀態(tài)圖標(biāo)、中間有虛線(xiàn)；
文字上下交錯(cuò)顯示；
相鄰階段的文字在垂直方向上是可以相交的；
時(shí)間軸的個(gè)數(shù)不確定，但是要鋪滿(mǎn)屏幕并且不可滑動(dòng)；如果只實(shí)現(xiàn)上兩點(diǎn)的效果，使用 RecycleView 無(wú)疑是最好的選擇，但是要同時(shí)實(shí)現(xiàn)以上整個(gè)效果目前想到的最好的辦法就是使用自定義 view。

二、如何開(kāi)始？

相信也有人跟我一樣，對(duì)自定義的繪制過(guò)程 view、canvas、path、paint 的使用有了解，但是真的要去寫(xiě)自定義 view 確不知道從何開(kāi)始，不知道第一步如何下手。我個(gè)人的總結(jié)就是：想要的太多，遲遲不動(dòng)手，所以有想法一定要去動(dòng)手試驗(yàn)！ 不要想著寫(xiě)完第一次運(yùn)行就是最終想展示的完美效果，而是要抱著整體拆分成不重復(fù)的小塊，然后去繪制重復(fù)塊，然后去一點(diǎn)點(diǎn)實(shí)現(xiàn)一步步完美的心態(tài)才能做出來(lái)。

所以首先要把想實(shí)現(xiàn)的 view 拆分成一個(gè)個(gè)小的可繪制的并且沒(méi)有重復(fù)的塊，以目前想實(shí)現(xiàn)的時(shí)間軸效果來(lái)說(shuō)，最小可繪制無(wú)重復(fù)塊也就是只包括一個(gè)時(shí)間結(jié)點(diǎn)的塊如圖：

它包括：

垂直居中的一條虛線(xiàn)；
一個(gè)表示狀態(tài)的圖標(biāo)；
一個(gè)顯示時(shí)間的文本塊；
一個(gè)顯示階段名的文本塊；

三、開(kāi)始畫(huà)

有了上面的分析，接下來(lái)就要開(kāi)始畫(huà)了。

1. 畫(huà)中間的線(xiàn)

首先畫(huà)虛線(xiàn)，如果虛線(xiàn)不知道怎么畫(huà)，可以先畫(huà)一條實(shí)線(xiàn)，然后再去找畫(huà)虛線(xiàn)的方法。

使用 canvas 中畫(huà)線(xiàn)的方法 drawLine(float startX, float startY, float stopX, float stopY, @NonNull Paint paint)，根據(jù)參數(shù)得知需知道線(xiàn)的起點(diǎn)與終點(diǎn)坐標(biāo)以及一個(gè) paint 對(duì)象，因?yàn)槭谴怪本又星覚M穿整個(gè)控件的直線(xiàn)所以可以確定兩個(gè)點(diǎn)的 y 坐標(biāo)是一樣的，也就是控件高的一半，起點(diǎn)的 x 坐標(biāo)為0，終點(diǎn)的 x 坐標(biāo)為控件的寬。也就是知道控件的寬和高之后就可以繪制出這條線(xiàn)。獲取控件的寬高，可以在 onMeasure 方法中獲取：

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 mViewWidth = MeasureSpec.getSize(widthMeasureSpec) - dip2px(mContext, mSafeDistance * 2);
 mViewHeight = MeasureSpec.getSize(heightMeasureSpec);
}

畫(huà)線(xiàn)的代碼（在 onDraw 方法中添加，下面其它的繪制方法同樣是在 onDraw 方法中添加）：

// 定義畫(huà)筆，并設(shè)置相關(guān)屬性
Paint mLinePaint = new Paint();
mLinePaint.setColor(Color.parseColor("#999999"));
mLinePaint.setStrokeWidth(1);
mLinePaint.setStyle(Paint.Style.STROKE);
// 畫(huà)虛線(xiàn)
canvas.drawLine(0, mViewHeight / 2, mViewWidth, mViewHeight / 2, mLinePaint);

2. 畫(huà)圖標(biāo)

canvas 畫(huà)圖標(biāo)的方法：drawBitmap(@NonNull Bitmap bitmap, float left, float top, @Nullable Paint paint)，根據(jù)方法的參數(shù)去分析如何準(zhǔn)備值，這里需要一個(gè) bitmap 對(duì)象，起點(diǎn)坐標(biāo)以及 paint。bitmap 對(duì)象可以將資源文件 drawable 轉(zhuǎn)為 bitmap 格式；坐標(biāo)就是控件的中心點(diǎn)。畫(huà)圖標(biāo)的代碼：

// 圖標(biāo) x，y 坐標(biāo)
Bitmap statusBitmap = BitmapFactory.decodeResource(mContext.getResources(), R.mipmap.ic_no_pass);
float bX = mViewWidth / 2;
// 垂直的中心點(diǎn)在圖標(biāo)的頂部，所以要減去 bitmap 高的一半
float bY = mViewHeight / 2 - statusBitmap.getHeight() / 2f;
Paint mBitmAppaint = new Paint();
mBitmapPaint.setFilterBitmap(true);
canvas.drawBitmap(statusBitmap, bX, bY, mBitmapPaint);

3. 畫(huà)文本

canvas 畫(huà)文本的方法：drawText(@NonNull String text, float x, float y, @NonNull Paint paint)，依然是根據(jù)方法得知需要知道繪制的內(nèi)容，開(kāi)始的坐標(biāo)點(diǎn)以及 paint。當(dāng)文本在圖標(biāo)上方時(shí)，文本的 y 坐標(biāo)需要使用圖標(biāo)的 y 坐標(biāo)減去文本到圖標(biāo)的距離，x 坐標(biāo)同圖片的 x 坐標(biāo)一樣；當(dāng)文本在圖標(biāo)下方時(shí)，文本的 y 坐標(biāo)需要使用圖標(biāo)的 y 坐標(biāo)加上文本到圖標(biāo)的距離。畫(huà)文本的代碼：

// 定義畫(huà)筆
Paint mDatePaint = new Paint();
mDatePaint.setColor(Color.parseColor("#666666"));
mDatePaint.setTextSize(dip2px(mContext, 12));
mDatePaint.setStyle(Paint.Style.FILL);
mDatePaint.setTextAlign(Paint.Align.CENTER);
mDatePaint.setAntiAlias(true);

Paint mNamePain = new Paint();
mNamePain.setColor(Color.parseColor("#666666"));
mNamePain.setTextSize(dip2px(mContext, 13));
mNamePain.setStyle(Paint.Style.FILL);
mNamePain.setTextAlign(Paint.Align.CENTER);
mNamePain.setAntiAlias(true);

// 定義坐標(biāo)變量
float dateX = bX + statusBitmap.getWidth() / 2f;
float dateY;
dateY = mViewHeight / 2 - dip2px(mContext, 19);

// 畫(huà)文字，在圖標(biāo)上
canvas.drawText("有效時(shí)間", dateX, dateY, mNamePain);
canvas.drawText("09.27-09.29", dateX, dateY - dateTextHeight mDatePaint);

// 畫(huà)文字，在圖標(biāo)下
dateY = mViewHeight / 2 + dip2px(mContext, 19);
canvas.drawText("09.27-09.29", dateX, dateY, mDatePaint);
canvas.drawText("有效時(shí)間", dateX, dateY + dateTextHeigh, mNamePain);

4. 由局部到整體

上面已經(jīng)完成了只有一個(gè)時(shí)間點(diǎn)的繪制，接下來(lái)思考如果有多個(gè)時(shí)間點(diǎn)時(shí)如何繪制。只有一個(gè)時(shí)間點(diǎn)時(shí)計(jì)算坐標(biāo)是以控件的寬高進(jìn)行計(jì)算，那么當(dāng)有兩個(gè)時(shí)間點(diǎn)的時(shí)候需要首先把控件均分成兩部分，然后在均分的部分中計(jì)算對(duì)應(yīng)的坐標(biāo)，完成繪制。當(dāng)有三個(gè)時(shí)間點(diǎn)的時(shí)候需要均分為三部分，然后在各自的部分計(jì)算對(duì)應(yīng)的坐標(biāo)，完成繪制。所以得到不論時(shí)間點(diǎn)的個(gè)數(shù)有多少繪制的方法不會(huì)改變，需要改變的是繪制時(shí)候用到的點(diǎn)的坐標(biāo)。其實(shí)已經(jīng)可以看出，當(dāng)多個(gè)點(diǎn)的時(shí)候需要循環(huán)一下，代碼如下：

// 得到多個(gè)點(diǎn)時(shí)，其中每個(gè)部分的寬，itevW 也就等同與上面只有一個(gè)時(shí)間點(diǎn)時(shí)控件的寬
float itemW = mViewWidth / mDataList.size();
for (int i = 0; i < mDataList.size(); i++) {
 // 完成相關(guān)計(jì)算、繪制
}