帶你實現乙個簡單實用的時間線

2021-07-25 08:09:19 字數 1103 閱讀 5106

相信有點自定義基礎的哥們一看這個效果圖就覺得很簡單,還請各路大神不要吐槽哈。

首先來分析一下這個效果圖,由三部分組成:

1.下面那條預設的線;

2.上面那條被選中的線;

3.以及線下面的文字。

繪製一條線,是自定義view中最基礎的操作了,就是呼叫canvas的drawline方法,隨便貼下**:

/**draw first line*/

mpaint.setcolor(mfirstcolor);

mpaint.setstrokewidth(mfirstlineheight);

mpaint.setstrokecap(paint.cap.round);

canvas.drawline(

mlinemargin,

mfirstlineheight + (msecondlineheight - mfirstlineheight) / 2.0f,

getwidth() - mlinemargin, mfirstlineheight + (msecondlineheight - mfirstlineheight) / 2.0f,

mpaint);

這裡可能有些人不清楚怎麼設定線段的兩邊為圓頭,其實就是呼叫paint的setstrokewidth方法,引數是paint.cap裡面的型別,有三種型別可選,分別是butt,round,square,大家可以分別嘗試一下效果。

下面在來繪製一下橫線下面的文字。我們要把一天24小時,分成8個時間段,每個時間段3個小時,我們要把文字繪製在每個斷點的中間,**如下:

/**draw text*/

for (int i = 0; i <= line_total_count ; i++)

/**draw second line*/

if(mselectedmap != null && mselectedmap.size() > 0) }}

手寫系列 帶你實現乙個簡單的Promise

學習之前 需要先對promise有個基本了解哦,這裡都預設大家都是比較熟悉promise的 本次將帶小夥伴們實現promise的基本功能 promise的基本骨架 promise的then promise.then的多次呼叫 then鏈式呼叫 catch的實現 finally的實現 const pr...

乙個簡單實用的分頁控制項

using system using system.web using system.web.ui using system.web.ui.webcontrols using system.text namespace localhost set 頁長度 public int pagesize se...

乙個超級簡單的demo帶你走進redux的大坑

1 import react,from react 2 import reactdom from react dom 3 import from redux 4 import from react redux 56 78render this props 10return 11 12 1314 15...