自定義折線(xiàn)较鼓、柱狀圖控件(kotlin)

實(shí)習(xí)一了段時(shí)間了椎木,終于有活干了……
然鵝……
我需要做一個(gè)折線(xiàn)圖控件,我tm之前從來(lái)沒(méi)做任何過(guò)復(fù)雜程度超過(guò)矩形的控件博烂,你現(xiàn)在讓我做一個(gè)折線(xiàn)圖O阕怠!G堇椤(手動(dòng)狗頭)
最后只能先去網(wǎng)上看看大神怎么寫(xiě)的畜伐,模仿著花了一天多終于把控件寫(xiě)出來(lái)了。
先上圖:


效果圖.jpg

其實(shí)完成之后想想也挺簡(jiǎn)單躺率,以下是思路:

首先設(shè)定初始化變量:

  1. 首先重寫(xiě)onMeasure()獲取控件大小width和height玛界,并且給出默認(rèn)大小悼吱;
  2. 確定繪制起點(diǎn)慎框,也就相當(dāng)于原點(diǎn)(startpointX,startpointY),圖中的所有線(xiàn)段后添、刻度包括文字的位置都是基于這個(gè)原點(diǎn)的笨枯;
  3. 通過(guò)控件width和height以及XY軸的刻度數(shù)量來(lái)設(shè)置X軸和Y軸的刻度單位長(zhǎng)度Xscale和Yscale,進(jìn)而獲得XY軸的總長(zhǎng)度xLength和yLength遇西;
  4. 初始化各種畫(huà)筆馅精,建議將畫(huà)坐標(biāo)軸的筆、畫(huà)數(shù)據(jù)線(xiàn)的筆粱檀、畫(huà)坐標(biāo)刻度的筆分開(kāi)

開(kāi)始繪制:

  • 初始化這些變量后就可以開(kāi)始繪制:
    1.繪制XY軸
    2.繪制XY軸刻度
    3.根據(jù)轉(zhuǎn)折點(diǎn)坐標(biāo)一段一段畫(huà)出折線(xiàn)

需要注意的點(diǎn):

  • 可以用二維數(shù)組來(lái)存儲(chǔ)轉(zhuǎn)折點(diǎn)坐標(biāo)(當(dāng)然也可以用一維數(shù)組)
  • 用rect和paint的getTextBounds()獲取字符串的寬高洲敢,便于定位刻度位置;
  • 對(duì)于陰影可以用path來(lái)畫(huà),要用畫(huà)筆的FILL模式
  • 對(duì)于點(diǎn)擊事件可重寫(xiě)onTouchEvent()來(lái)獲取觸摸位置touchX和touchY茄蚯,然后遍歷坐標(biāo)數(shù)組中的坐標(biāo)確定屬于哪個(gè)轉(zhuǎn)折點(diǎn)的點(diǎn)擊范圍压彭,觸發(fā)事件称近;
  • 若想要繪制虛線(xiàn),可以用paint的pathEffect屬性需要線(xiàn)關(guān)閉配置文件中當(dāng)前activity的hardwareAccelerated屬性

總結(jié):再?gòu)?fù)雜的控件也都是一點(diǎn)一點(diǎn)畫(huà)出來(lái)的哮塞,有了思路之后,一點(diǎn)一點(diǎn)做就一定能做出來(lái)凳谦,剛開(kāi)始的時(shí)候肯定錯(cuò)誤會(huì)比較多忆畅,但是你把錯(cuò)誤都試完了自然就只剩下成功的辦法了!

以下是這個(gè)項(xiàng)目地址尸执,如果能幫到你家凯,一定賞我一個(gè)star啊23333333……

項(xiàng)目地址https://github.com/No-dust-in-heart/MyCustomChart.git

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市如失,隨后出現(xiàn)的幾起案子绊诲,更是在濱河造成了極大的恐慌,老刑警劉巖褪贵,帶你破解...
    沈念sama閱讀 218,525評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件掂之,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡脆丁,警方通過(guò)查閱死者的電腦和手機(jī)世舰,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,203評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)槽卫,“玉大人跟压,你說(shuō)我怎么就攤上這事〖吲啵” “怎么了震蒋?”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,862評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀(guān)的道長(zhǎng)躲庄。 經(jīng)常有香客問(wèn)我查剖,道長(zhǎng),這世上最難降的妖魔是什么噪窘? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,728評(píng)論 1 294
  • 正文 為了忘掉前任梗搅,我火速辦了婚禮,結(jié)果婚禮上效览,老公的妹妹穿的比我還像新娘无切。我一直安慰自己,他們只是感情好丐枉,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,743評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布哆键。 她就那樣靜靜地躺著,像睡著了一般瘦锹。 火紅的嫁衣襯著肌膚如雪籍嘹。 梳的紋絲不亂的頭發(fā)上闪盔,一...
    開(kāi)封第一講書(shū)人閱讀 51,590評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音辱士,去河邊找鬼泪掀。 笑死,一個(gè)胖子當(dāng)著我的面吹牛颂碘,可吹牛的內(nèi)容都是我干的异赫。 我是一名探鬼主播头岔,決...
    沈念sama閱讀 40,330評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼塔拳,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼峡竣!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起颂碧,我...
    開(kāi)封第一講書(shū)人閱讀 39,244評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤类浪,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后个曙,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體受楼,經(jīng)...
    沈念sama閱讀 45,693評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,885評(píng)論 3 336
  • 正文 我和宋清朗相戀三年猴贰,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了河狐。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,001評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡栅干,死狀恐怖捐祠,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情踱蛀,我是刑警寧澤窿给,帶...
    沈念sama閱讀 35,723評(píng)論 5 346
  • 正文 年R本政府宣布崩泡,位于F島的核電站,受9級(jí)特大地震影響角撞,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,343評(píng)論 3 330
  • 文/蒙蒙 一百炬、第九天 我趴在偏房一處隱蔽的房頂上張望污它。 院中可真熱鬧,春花似錦衫贬、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,919評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)镇辉。三九已至贴捡,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間屹逛,已是汗流浹背汛骂。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,042評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留手销,地道東北人图张。 一個(gè)月前我還...
    沈念sama閱讀 48,191評(píng)論 3 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像兽埃,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子舷夺,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,955評(píng)論 2 355