Android自定义View:雷达图/蜘蛛网图

smartown / 文 发表于2018-11-30 12:19 次阅读 自定义view,android

运行效果图

运行效果图

雷达图结构分析

雷达图结构

对雷达图进行结构拆分,得到一个清晰的思路,这些结构也就是需要绘制的部分。为了能够有更好的扩展性,我将它们作为可定制的属性暴露出来,以下是结构属性表:

结构 相关属性 描述
bone boneColor 骨架颜色
- boneWidth 骨架宽度
net netColor 网线颜色
- netWidth 网线宽度
node nodeColor 结点颜色
- nodeRadius 结点半径
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>

设置适配器

        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/smartown/CustomView

收藏 赞 (0) 踩 (0)