Android自定義View:雷達圖/蜘蛛網(wǎng)圖

運行效果圖

運行效果圖

雷達圖結(jié)構(gòu)分析

雷達圖結(jié)構(gòu)

對雷達圖進行結(jié)構(gòu)拆分,得到一個清晰的思路,這些結(jié)構(gòu)也就是需要繪制的部分。為了能夠有更好的擴展性,我將它們作為可定制的屬性暴露出來,以下是結(jié)構(gòu)屬性表:

結(jié)構(gòu) 相關(guān)屬性 描述
bone boneColor 骨架顏色
- boneWidth 骨架寬度
net netColor 網(wǎng)線顏色
- netWidth 網(wǎng)線寬度
node nodeColor 結(jié)點顏色
- nodeRadius 結(jié)點半徑
cover coverColor 覆蓋層(由各種屬性的值組成的覆蓋層)顏色
text textColor 文本顏色
- textSize 文本大小
- labelMargin 文本與雷達圖間距

如何使用?以下是上面效果圖的代碼:

xml

<win.smartown.library.radarview.RadarView
    android:id="@+id/radar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:boneColor="#5392FF"
    app:boneWidth="0.5dp"
    app:coverColor="#380392FF"
    app:labelMargin="10dp"
    app:netColor="#5392FF"
    app:netWidth="1dp"
    app:nodeColor="#53AFFF"
    app:nodeRadius="3dp"
    app:textColor="#868686"
    app:textSize="12sp">
</win.smartown.library.radarview.RadarView>

設(shè)置適配器

        RadarView radarView = findViewById(R.id.radar);
        radarView.setAdapter(new RadarAdapter() {
            @Override
            public int getItemCount() {
                return 12;
            }

            @Override
            public int getMaxValue() {
                return 5;
            }

            @Override
            public int getValue(int position) {
                if (position > getMaxValue()) {
                    return getMaxValue();
                }
                return position;
            }

            @Override
            public String getName(int position) {
                return "Label" + position;
            }
        });

難點總結(jié)

  • 主要就是要計算各個點的坐標,每一個交叉點的坐標需要計算出來,好在這是一個非常標準的數(shù)學(xué)模型,可以通過公式計算出來,以下是計算坐標的代碼:
//[centerX,centerY]為中心點坐標,radius為待求坐標到中心點的距離
float x = (float) (centerX + radius * Math.cos(degree * Math.PI / 180));
float y = (float) (centerY + radius * Math.sin(degree * Math.PI / 180));

最后放上源碼

https://github.com/xiaoowuu/CustomView

最后編輯于
?著作權(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ù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,234評論 25 708
  • 用兩張圖告訴你,為什么你的 App 會卡頓? - Android - 掘金 Cover 有什么料? 從這篇文章中你...
    hw1212閱讀 14,054評論 2 59
  • 我是2014年8月加入簡書的,猶記得那時簡書還沒有現(xiàn)在這么熱門,當時我曾在簡書發(fā)表過一篇文章《后來我們活成了山寨版...
    櫻寧閱讀 493評論 0 11
  • 開學(xué)的時候 小黎告訴了我們一個新詞 叫OBB 問她啥意思 “喔粑粑” 現(xiàn)在我們的對話都成了這樣 “唉” “咋子” ...
    困守閱讀 886評論 0 0
  • 近一年來,我越發(fā)感受到,碎片化的學(xué)習(xí),特別是對于音頻學(xué)習(xí),如果只是聽一遍就了事,那其實真正吸收到的知識很少,甚至過...
    兮兮碼字的地方閱讀 712評論 0 0

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