自定義圓形柱狀圖

效果圖

第一張為非會員gif制作的效果圖會有些模糊，第二張為在模擬器顯示的原圖


第一張

第二張
思路

拿到一個自定義view UI是，先要分析怎么一步一步畫出來，在進行代碼編寫

比如這個圓形柱狀圖，從下面幾步開始

  1. 應(yīng)該畫5根距離相同的灰色坐標(biāo)線，
  2. 畫柱狀圖三塊文字部分
  3. 畫柱狀圖灰色部分
  4. 柱狀圖藍(lán)色部分
  5. 畫柱狀圖黃色圓圈和黃線部分
  6. 把柱狀圖數(shù)據(jù)賦值和畫柱狀圖功能分離出來，不在自定義類里，做到項目需要使用時無需看內(nèi)部代碼，直接看外部調(diào)用顯示即可。
主要知識點

圓形柱狀圖有由 頂部半圓+方形+底部半圓組成

邊界值注意點

當(dāng)藍(lán)色長度值小于底部圓半徑時，不畫藍(lán)色方形，只畫底部半圓

顏色漸變效果

startx,starty, 開始漸變的xy軸坐標(biāo)，結(jié)束顏色漸變的XY軸坐標(biāo)。

 backGradient = new LinearGradient(startx,starty,  stopx, stopy,
                    new int[]{cylinderColorBlueStart, cylinderColorBlueMiddle, cylinderColorBlueMiddleEnd}, null, Shader.TileMode.CLAMP);
    bluePaint.setShader(backGradient);
畫圓是根據(jù)方形的四個坐標(biāo)進行繪畫的

方形四個坐標(biāo)相對原點坐標(biāo)位置


image.png
圓起始點0度位置為3點鐘位置，畫到多少度，
負(fù)數(shù)為逆時針方向開始畫起，正數(shù)為順時針開始畫起，
如下圖畫的為水平半圓，則畫的起始坐標(biāo)為矩形高度的1/2開始，若畫的為垂直半圓，其實坐標(biāo)為矩形寬度的1/2
image.png

github地址

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容