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

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)怎么在Android中通過(guò)自定義View實(shí)現(xiàn)一個(gè)橫行時(shí)間軸效果，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比金秀網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式金秀網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋金秀地區(qū)。費(fèi)用合理售后完善，十多年實(shí)體公司更值得信賴。

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

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

1. 每個(gè)階段要顯示時(shí)間、階段名、狀態(tài)圖標(biāo)、中間有虛線；

2. 文字上下交錯(cuò)顯示；

3. 相鄰階段的文字在垂直方向上是可以相交的；

4. 時(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 的使用有了解，但是真的要去寫(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)的塊如圖：

它包括：

• 垂直居中的一條虛線；

• 一個(gè)表示狀態(tài)的圖標(biāo)；

• 一個(gè)顯示時(shí)間的文本塊；

• 一個(gè)顯示階段名的文本塊；

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

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

1. 畫(huà)中間的線

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

使用 canvas 中畫(huà)線的方法 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 方法中獲取：

@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à)線的代碼（在 onDraw 方法中添加，下面其它的繪制方法同樣是在 onDraw 方法中添加）：

// 定義畫(huà)筆，并設(shè)置相關(guān)屬性
Paint mLinePaint = new Paint();
mLinePaint.setColor(Color.parseColor("#999999"));
mLinePaint.setStrokeWidth(1);
mLinePaint.setStyle(Paint.Style.STROKE);
// 畫(huà)虛線
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ì)算、繪制
}

5. 完善

到這里，整個(gè)分析及繪制就差不多要結(jié)束了。

繪制虛線的方法：mLinePaint.setPathEffect(new DashPathEffect(new float[]{10, 10}, 0));

繪制虛線時(shí)遇到一個(gè)問(wèn)題，在手機(jī)上不顯示虛線效果，后來(lái)查到需要關(guān)閉 view 層的硬件加速：setLayerType(View.LAYER_TYPE_SOFTWARE, null);

繪制文本時(shí)的中心點(diǎn)計(jì)算需要注意下

paint、bitmap 等變量的初始化建議放到初始化方法中去做，不建議在 onDraw 方法中做。

上述就是小編為大家分享的怎么在Android中通過(guò)自定義View實(shí)現(xiàn)一個(gè)橫行時(shí)間軸效果了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前題目：怎么在Android中通過(guò)自定義View實(shí)現(xiàn)一個(gè)橫行時(shí)間軸效果
網(wǎng)站地址：http://www.jbt999.com/article4/pdgjoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開(kāi)發(fā)、App設(shè)計(jì)、Google、網(wǎng)站改版、網(wǎng)站設(shè)計(jì)、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)