運行效果圖

運行效果圖

雷達圖結構分析

雷達圖結構

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

如何使用？以下是上面效果圖的代碼：

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>

設置適配器

        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;
            }
        });

難點總結

• 主要就是要計算各個點的坐標，每一個交叉點的坐標需要計算出來，好在這是一個非常標準的數學模型，可以通過公式計算出來，以下是計算坐標的代碼：

//[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