Android蛛網評分控件：SpiderWebScoreView

Features

• 支持任意個角以及任意層級

• 蛛網圖形外邊的分數文案支持任意樣式

• 不管是多少維度都可左右對稱

1. 倒入 SpiderWebScoreView

添加 gradle dependency

dependencies{
    compile 'me.xiaopan:spiderwebscoreview:lastVersionName'
}

lastVersionName是最新版本名稱的意思，你可以在release頁面看到最新的版本名稱

最低支持Android2.2

2. 在布局中使用

首先在布局中使用聲明SpiderWebScoreView和CircularLayout

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:clipChildren="false">

    <me.xiaopan.swsv.SpiderWebScoreView
        android:id="@+id/spiderWeb_mainActivity_1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center" />

    <me.xiaopan.swsv.CircularLayout
        android:id="@+id/layout_mainActivity_circular1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:clipChildren="false"/>
</FrameLayout>

詳解：

• SpiderWebScoreView用來顯示蛛網圖形

• CircularLayout用來顯示四周的文案

• CircularLayout的尺寸必須和SpiderWebScoreView一致并且是層疊關系

• CircularLayout的子View將會顯示在圓圈的外面，因此CircularLayout和其父FrameLayout都必須設置clipChildren為false

• 父FrameLayout還要比CircularLayout大一圈，大的這一圈就是用來顯示CircularLayout的子View，具體大多少視你的需求而定

3. Run time settings

然后在代碼中通過SpiderWebScoreView.setScores(float maxScore, float[] scores)方法設置最大分數以及所有分值即可

• 有多少個分值（scores.length）蛛網圖形就有多少個角

• 默認分5層

最后根據你的需求往CircularLayout里面添加顯示分數的View即可，數量和順序必須同scores相同

如下：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    SpiderWebScoreView spiderWebScoreView1 = (SpiderWebScoreView) findViewById(R.id.spiderWeb_mainActivity_1);
    CircularLayout circularLayout1 = (CircularLayout) findViewById(R.id.layout_mainActivity_circular1);

    Score[] scores = new Score[]{
        new Score(7.0f, R.drawable.vip_icon7),
        new Score(8.0f, R.drawable.vip_icon8),
        new Score(5.0f, R.drawable.vip_icon5),
        new Score(5.0f, R.drawable.vip_icon5),
        new Score(8.0f, R.drawable.vip_icon8),
        new Score(7.0f, R.drawable.vip_icon7),
    };
    setup(spiderWebScoreView1, circularLayout1, scores);
}

private void setup(SpiderWebScoreView spiderWebScoreView, CircularLayout circularLayout, Score... scores){
    float[] scoreArray = new float[scores.length];
    for(int w = 0; w < scores.length; w++){
        scoreArray[w] = scores[w].score;
    }
    spiderWebScoreView.setScores(10f, scoreArray);

    circularLayout.removeAllViews();
    for(Score score : scores){
        TextView scoreTextView = (TextView) LayoutInflater.from(getBaseContext()).inflate(R.layout.score, circularLayout, false);
        scoreTextView.setText(score.score+"");
        if(score.iconId != 0){
            scoreTextView.setCompoundDrawablesWithIntrinsicBounds(0, 0, score.iconId, 0);
        }
        circularLayout.addView(scoreTextView);
    }
}

public static class Score{
    public float score;
    public int iconId;

    public Score(float score, int iconId) {
        this.score = score;
        this.iconId = iconId;
    }

    public Score(float score) {
        this.score = score;
    }
}

4. Attributes

SpiderWebScoreView

CircularLayout

更多示例請參考sample源碼