【Android View】写一个蛛网评分控件

上周项目中要用到一个蛛网评分控件，于是就先上Github搜，搜了半天没搜着（也可能是我搜的关键词不对），那只好自己写一个了，就叫SpiderWebScoreView

先放一张最终效果图：

先整理一下需求：

• 要能支持任意个角以及任意层级
• 不管是多少个角都要能自动左右对称
• 蛛网图形外圈的文字要能自定义（甚至是图片）

然后整理一下一个蛛网评分控件的实现流程：

• 首先要根据角的个数以及层数画一个蜘蛛网
• 然后根据最大分值和所有分值画一个分数图形
• 最后在蜘蛛网的外圈把文案画出来

我们第一步来画蜘蛛网

先整理一下画蜘蛛网需要的知识点：

• 一层一层的多边形要用Path画
• 从中心出发到每个角的线用drawLine
• 根据角度计算圆上的坐标

接下来看一下怎么根据角度计算圆上的坐标，直接上代码

float centerX = 100f;  // 已知圆心X坐标为100
float centerY = 100f;  // 已知圆心Y坐标为100
float radius = 100f;  // 已知半径为100
float angle = 45f;  // 已知角度为45°

double radians = Math.toRadians(angle);  // 计算出弧度
float x = (float) (centerX + Math.sin(radians) * radius);  // 计算出X坐标
float y = (float) (centerY - Math.cos(radians) * radius);  // 计算出Y坐标
复制代码

既然上述技术问题都解决了，就开始画吧

private int angleCount = 5; // 整个蛛网有几个角
private int hierarchyCount = 5;  // 整个蛛网分多少层（例如最大分数是10分，分5层，那么每层就代表2分）
private int lineColor = 0xFF000000; // 蛛网线条的颜色
private float lineWidth = -1; // 蛛网线条的宽度

private float centerX;    // 中心点X坐标
private float centerY;    // 中心点Y坐标
private float radius; // 整个蛛网图的半径
private Paint linePaint;
private Path path;

....

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    reset();
}

private void reset(){
    if(angleCount != 0 && hierarchyCount != 0){
        int viewWidth = getWidth();
        int viewHeight = getHeight();
        centerX = viewWidth / 2;
        centerY = viewHeight / 2;
        radius = Math.min(viewWidth, viewHeight) / 2;
    }
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    drawAllHierarchy(canvas);
    drawAllLine(canvas);
}

/**
 * 绘制所有的层
 * @param canvas Canvas
 */
private void drawAllHierarchy(Canvas canvas) {
    float averageRadius = radius / hierarchyCount;
    for(int w = 0; w < hierarchyCount; w++){
        drawHierarchyByRadius(canvas, averageRadius *(w+1));
    }
}

/**
 * 根据半径绘制一层
 * @param canvas Canvas
 * @param currentRadius 当前半径
 */
private void drawHierarchyByRadius(Canvas canvas, float currentRadius) {
    path.reset();

    float nextAngle;
    float nextRadians;
    float nextPointX;
    float nextPointY;
    float averageAngle = 360 / angleCount;
    float offsetAngle = averageAngle > 0 && angleCount % 2 == 0 ? averageAngle / 2 : 0;
    for (int position = 0; position < angleCount; position++) {
        nextAngle = offsetAngle + (position * averageAngle);
        nextRadians = (float) Math.toRadians(nextAngle);
        nextPointX = (float) (centerX + Math.sin(nextRadians) * currentRadius);
        nextPointY = (float) (centerY - Math.cos(nextRadians) * currentRadius);

        if(position == 0){
            path.moveTo(nextPointX, nextPointY);
        }else{
            path.lineTo(nextPointX, nextPointY);
        }
    }

    path.close();
    canvas.drawPath(path, linePaint);
}

/**
 * 绘制所有的线
 * @param canvas Canvas
 */
private void drawAllLine(Canvas canvas){
    float nextAngle;
    float nextRadians;
    float nextPointX;
    float nextPointY;
    float averageAngle = 360 / angleCount;
    float offsetAngle = averageAngle > 0 && angleCount % 2 == 0 ? averageAngle / 2 : 0;
    for(int position = 0; position < angleCount; position++){
        nextAngle = offsetAngle + (position * averageAngle);
        nextRadians = (float) Math.toRadians(nextAngle);
        nextPointX = (float) (centerX + Math.sin(nextRadians) * radius);
        nextPointY = (float) (centerY - Math.cos(nextRadians) * radius);

        canvas.drawLine(centerX, centerY, nextPointX, nextPointY, linePaint);
    }
}
复制代码

详解：

• onSizeChanged的时候会根据view的宽高计算圆心坐标和半径
• 先根据层数计算每层的半径
• 接下来再根据角个数计算出每个角的度数
• 有了角度和半径后就可以根据上面的算法算出每个点的坐标了
• 坐标都算出来了就直接用Path连线，然后绘制即可

这里面需要额外注意的就是offsetAngle的计算，offsetAngle用来偏移整个图形，让整个图形左右对称，算法就是对于角个数是奇数的不用偏移，是偶数的偏移平均角度除以2即可

第二步来画分数图形

和画蜘蛛网所用到的知识点一样，只不过半径要根据分值和最大分值来算，如下：

private float maxScore = 10f;   // 最大分数
private float[] scores;  // 分数列表
private int scoreColor = 0x80F65801; // 分数图形的颜色
private int scoreStrokeColor = 0xFFF65801; // 分数图形描边的颜色
private float scoreStrokeWidth = -1; // 分数图形描边的宽度
private boolean disableScoreStroke; // 禁用分数图形的描边
private Paint scorePaint;
private Paint scoreStrokePaint;

...

/**
 * 绘制分数图形
 * @param canvas Canvas
 */
private void drawScore(Canvas canvas){
    if(scores == null || scores.length <= 0){
        return;
    }

    path.reset();

    float nextAngle;
    float nextRadians;
    float nextPointX;
    float nextPointY;
    float currentRadius;
    float averageAngle = 360 / angleCount;
    float offsetAngle = averageAngle > 0 && angleCount % 2 == 0 ? averageAngle / 2 : 0;
    for (int position = 0; position < angleCount; position++) {
        currentRadius = (scores[position] / maxScore) * radius;
        nextAngle = offsetAngle + (position * averageAngle);
        nextRadians = (float) Math.toRadians(nextAngle);
        nextPointX = (float) (centerX + Math.sin(nextRadians) * currentRadius);
        nextPointY = (float) (centerY - Math.cos(nextRadians) * currentRadius);

        if(position == 0){
            path.moveTo(nextPointX, nextPointY);
        }else{
            path.lineTo(nextPointX, nextPointY);
        }
    }

    path.close();
    canvas.drawPath(path, scorePaint);

    // 绘制描边
    if(!disableScoreStroke){
        if(scoreStrokePaint == null){
            scoreStrokePaint = new Paint();
            scoreStrokePaint.setColor(scoreStrokeColor);
            scoreStrokePaint.setStyle(Paint.Style.STROKE);
            scoreStrokePaint.setAntiAlias(true);
            if(scoreStrokeWidth > 0){
                scoreStrokePaint.setStrokeWidth(scoreStrokeWidth);
            }
        }
        canvas.drawPath(path, scoreStrokePaint);
    }
}
复制代码

第三步画外面那圈文字

到了这里有些犹难办了，考虑到外面这圈文字变数比较大，不同的APP会有不同的需求，比如有的需求是一行纯文本，有的是两行纯文本但两行的样式不一样，更甚者可能是是文字加图片。

要是直接往Canvas上写文字是绝对满足不了这样的需求的，既然我要做一个开源的控件那就必须要解决这样的问题，要不然别人是用不了的

想到这里脑海里立马就有解决方案了，那就是自定义一个圆形的Layout，就叫CircularLayout，把CircularLayout放在SpiderWebScoreView上面，用的时候直接往CircularLayout里面添加View即可，这样想要什么样式就加什么样的View即可

具体的自定义CircularLayout的细节就不再赘述了，用到的知识点跟SpiderWebScoreView一样

最后放上蛛网评分控件的Github地址 github.com/xiaopansky/… ，欢迎大家访问使用

转载于:https://juejin.im/post/5cb41f89e51d456e3b701877