本篇文章會說下如何使用並且要用麻煩的自定義 view 去實現時間軸效果，以及如何分析、實現自定義 view。 需要具備的知識：Paint、Canvas、自定義 view 的繪製流程。
一、已經有很多 RecycleView 實現時間軸的例子，爲何還要費勁的使用自定義 view 去實現時間軸？
首先看下最終想要的效果：
根據上圖可以總結出以下幾點：
- 每個階段要顯示時間、階段名、狀態圖標、中間有虛線；
- 文字上下交錯顯示；
- 相鄰階段的文字在垂直方向上是可以相交的；
- 時間軸的個數不確定，但是要鋪滿屏幕並且不可滑動； 如果只實現上兩點的效果，使用 RecycleView 無疑是最好的選擇，但是要同時實現以上整個效果目前想到的最好的辦法就是使用自定義 view。
二、如何開始？
相信也有人跟我一樣，對自定義的繪製過程 view、canvas、path、paint 的使用有了解，但是真的要去寫自定義 view 確不知道從何開始，不知道第一步如何下手。我個人的總結就是：想要的太多，遲遲不動手，所以有想法一定要去動手試驗！ 不要想着寫完第一次運行就是最終想展示的完美效果，而是要抱着整體拆分成不重複的小塊，然後去繪製重複塊，然後去一點點實現一步步完美的心態才能做出來。
所以首先要把想實現的 view 拆分成一個個小的可繪製的並且沒有重複的塊，以目前想實現的時間軸效果來說，最小可繪製無重複塊也就是隻包括一個時間結點的塊如圖：
它包括：
- 垂直居中的一條虛線；
- 一個表示狀態的圖標；
- 一個顯示時間的文本塊；
- 一個顯示階段名的文本塊；
三、開始畫
有了上面的分析，接下來就要開始畫了。
1. 畫中間的線
首先畫虛線，如果虛線不知道怎麼畫，可以先畫一條實線，然後再去找畫虛線的方法。
使用 canvas 中畫線的方法 drawLine(float startX, float startY, float stopX, float stopY, @NonNull Paint paint)，根據參數得知需知道線的起點與終點座標以及一個 paint 對象，因爲是垂直居中且橫穿整個控件的直線所以可以確定兩個點的 y 座標是一樣的，也就是控件高的一半，起點的 x 座標爲0，終點的 x 座標爲控件的寬。也就是知道控件的寬和高之後就可以繪製出這條線。獲取控件的寬高，可以在 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);
}
畫線的代碼（在 onDraw 方法中添加，下面其它的繪製方法同樣是在 onDraw 方法中添加）：
// 定義畫筆，並設置相關屬性
Paint mLinePaint = new Paint();
mLinePaint.setColor(Color.parseColor("#999999"));
mLinePaint.setStrokeWidth(1);
mLinePaint.setStyle(Paint.Style.STROKE);
// 畫虛線
canvas.drawLine(0, mViewHeight / 2, mViewWidth, mViewHeight / 2, mLinePaint);
2. 畫圖標
canvas 畫圖標的方法：drawBitmap(@NonNull Bitmap bitmap, float left, float top, @Nullable Paint paint)，根據方法的參數去分析如何準備值，這裏需要一個 bitmap 對象，起點座標以及 paint。bitmap 對象可以將資源文件 drawable 轉爲 bitmap 格式；座標就是控件的中心點。畫圖標的代碼：
// 圖標 x，y 座標
Bitmap statusBitmap = BitmapFactory.decodeResource(mContext.getResources(), R.mipmap.ic_no_pass);
float bX = mViewWidth / 2;
// 垂直的中心點在圖標的頂部，所以要減去 bitmap 高的一半
float bY = mViewHeight / 2 - statusBitmap.getHeight() / 2f;
Paint mBitmapPaint = new Paint();
mBitmapPaint.setFilterBitmap(true);
canvas.drawBitmap(statusBitmap, bX, bY, mBitmapPaint);
3. 畫文本
canvas 畫文本的方法：drawText(@NonNull String text, float x, float y, @NonNull Paint paint)，依然是根據方法得知需要知道繪製的內容，開始的座標點以及 paint。當文本在圖標上方時，文本的 y 座標需要使用圖標的 y 座標減去文本到圖標的距離，x 座標同圖片的 x 座標一樣；當文本在圖標下方時，文本的 y 座標需要使用圖標的 y 座標加上文本到圖標的距離。畫文本的代碼：
// 定義畫筆
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);
// 定義座標變量
float dateX = bX + statusBitmap.getWidth() / 2f;
float dateY;
dateY = mViewHeight / 2 - dip2px(mContext, 19);
// 畫文字，在圖標上
canvas.drawText("有效時間", dateX, dateY, mNamePain);
canvas.drawText("09.27-09.29", dateX, dateY - dateTextHeight mDatePaint);
// 畫文字，在圖標下
dateY = mViewHeight / 2 + dip2px(mContext, 19);
canvas.drawText("09.27-09.29", dateX, dateY, mDatePaint);
canvas.drawText("有效時間", dateX, dateY + dateTextHeigh, mNamePain);
4. 由局部到整體
上面已經完成了只有一個時間點的繪製，接下來思考如果有多個時間點時如何繪製。只有一個時間點時計算座標是以控件的寬高進行計算，那麼當有兩個時間點的時候需要首先把控件均分成兩部分，然後在均分的部分中計算對應的座標，完成繪製。當有三個時間點的時候需要均分爲三部分，然後在各自的部分計算對應的座標，完成繪製。所以得到不論時間點的個數有多少繪製的方法不會改變，需要改變的是繪製時候用到的點的座標。其實已經可以看出，當多個點的時候需要循環一下，代碼如下：
// 得到多個點時，其中每個部分的寬，itevW 也就等同與上面只有一個時間點時控件的寬
float itemW = mViewWidth / mDataList.size();
for (int i = 0; i < mDataList.size(); i++) {
// 完成相關計算、繪製
}
5. 完善
到這裏，整個分析及繪製就差不多要結束了。
繪製虛線的方法：mLinePaint.setPathEffect(new DashPathEffect(new float[]{10, 10}, 0));
繪製虛線時遇到一個問題，在手機上不顯示虛線效果，後來查到需要關閉 view 層的硬件加速：setLayerType(View.LAYER_TYPE_SOFTWARE, null);
繪製文本時的中心點計算需要注意下，可以 參考
paint、bitmap 等變量的初始化建議放到初始化方法中去做，不建議在 onDraw 方法中做。
四、總結
關於自定義 view 一定要多看，多嘗試。