Android:SimplePolygonView 輕鬆構建帶圓角雷達圖

SimplePolygonView 可以輕鬆構建M邊N層的帶帶圓角雷達圖。

原文地址: https://blog.csdn.net/lylddingHFFW/article/details/83789078
GitHub源碼: https://github.com/lyldding/SimplePolygonView

效果圖展示: (上傳圖片被壓縮了不清晰)

xml代碼:

<!--view-->
<com.lyldding.library.SimplePolygonView
    android:id="@+id/demo_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:polygon_radiusMax="60" />
<!--view1-->
<com.lyldding.library.SimplePolygonView
    android:id="@+id/demo_view1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:polygon_cornerRadius="10"
    app:polygon_layers="3"
    app:polygon_radiusMax="60"
    app:polygon_rotation="270"
    app:polygon_sides="3"
    app:polygon_vertexLinePaintColor="@color/colorAccent" />
<!--view2-->
<com.lyldding.library.SimplePolygonView
    android:id="@+id/demo_view2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:polygon_cornerRadius="7"
    app:polygon_innerFillColor="#ffeebb"
    app:polygon_innerLayer="2"
    app:polygon_layers="4"
    app:polygon_radiusMax="60"
    app:polygon_rotation="270"
    app:polygon_sides="3"
    app:polygon_vertexLinePaintColor="@color/colorAccent" />
<!--view3-->
<com.lyldding.library.SimplePolygonView
    android:id="@+id/demo_view3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:polygon_cornerRadius="7"
    app:polygon_dimFillColor="#33123FFF"
    app:polygon_innerFillColor="#ffeebb"
    app:polygon_innerLayer="1"
    app:polygon_layers="4"
    app:polygon_radiusMax="80"
    app:polygon_rotation="270"
    app:polygon_sides="6"
    app:polygon_vertexLinePaintColor="@color/colorAccent" />

java代碼:

顯示維度區域時,要先設置各維度百分比。

SimplePolygonView dimView = findViewById(R.id.demo_view3);
int sides = dimView.getSides();
List<Float> dimPercentages = new ArrayList<>();
for (int index = 0; index < sides; index++) {
    dimPercentages.add((index + 1f) / (sides + 1f));
}
dimView.setDimPercentages(dimPercentages);
dimView.setPolygonShowDim(true);

主要思路:

  1. 計算頂點位置;
  2. 畫出從中心向各頂點的連線;
  3. 繪製多邊形;
  4. 繪製維度區域。

屬性表:

<!--層數-->
<attr name="polygon_layers" format="integer" />
<!--邊數-->
<attr name="polygon_sides" format="integer" />
<!--旋轉度-->
<attr name="polygon_rotation" format="integer" />
<!--圓角半徑-->
<attr name="polygon_cornerRadius" format="integer" />
<!--維度頂點圓背景半徑-->
<attr name="polygon_dimCircleRadiusBackground" format="integer" />
<!--維度頂點圓半徑-->
<attr name="polygon_dimCircleRadius" format="integer" />
<!--多邊形伸縮-->
<attr name="polygon_scale" format="float" />
<!--最外層半徑-->
<attr name="polygon_radiusMax" format="integer" />
<!--指定內層-->
<attr name="polygon_innerLayer" format="integer" />
<!--最外層邊寬度-->
<attr name="polygon_outerStrokeWidth" format="integer" />

<!--層邊顏色-->
<attr name="polygon_strokeColor" format="reference|color" />
<!--指定內層填充顏色-->
<attr name="polygon_innerFillColor" format="reference|color" />
<!--頂點到圓心連線顏色-->
<attr name="polygon_vertexLinePaintColor" format="reference|color" />
<!--維度區域填充色-->
<attr name="polygon_dimFillColor" format="reference|color" />
<!--維度區域邊顏色-->
<attr name="polygon_dimStrokeColor" format="reference|color" />
<!--維度區域頂點背景填充色-->
<attr name="polygon_dimCircleColorBackground" format="reference|color" />
<!--維度區域頂點填充色-->
<attr name="polygon_dimCircleColor" format="reference|color" />
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章