Android中怎么通過(guò)自定義View實(shí)現(xiàn)橫行時(shí)間軸效果

今天就跟大家聊聊有關(guān)Android中怎么通過(guò)自定義View實(shí)現(xiàn)橫行時(shí)間軸效果，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

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

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

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

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

相信也有人跟我一樣，對(duì)自定義的繪制過(guò)程 view、canvas、path、paint 的使用有了解，但是真的要去寫自定義 view 確不知道從何開(kāi)始，不知道第一步如何下手。我個(gè)人的總結(jié)就是：想要的太多，遲遲不動(dòng)手，所以有想法一定要去動(dòng)手試驗(yàn)！ 不要想著寫完第一次運(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)的塊如圖：

它包括：

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

三、開(kāi)始畫

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

1. 畫中間的線

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

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

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

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

// 定義畫筆，并設(shè)置相關(guān)屬性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. 畫圖標(biāo)

canvas 畫圖標(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)。畫圖標(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. 畫文本

canvas 畫文本的方法：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)的距離。畫文本的代碼：

// 定義畫筆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);// 畫文字，在圖標(biāo)上canvas.drawText("有效時(shí)間", dateX, dateY, mNamePain);canvas.drawText("09.27-09.29", dateX, dateY - dateTextHeight mDatePaint);// 畫文字，在圖標(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ì)算、繪制}

看完上述內(nèi)容，你們對(duì)Android中怎么通過(guò)自定義View實(shí)現(xiàn)橫行時(shí)間軸效果有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。