Android Studio中如何根据用户输入动态绘制自定义点数的图形？

核心思路：自定义View绘制 #

直接用自定义View动态绘制是最资源友好的方案，无需提前生成静态Drawable，完全按需渲染，适配自定义属性项和数值动态更新的场景。

步骤1：创建自定义View类 #

继承View，重写onMeasure和onDraw方法，完成多边形网格、属性轴、数据填充的绘制逻辑：

public class RadarChartView extends View {
    private Paint gridPaint, axisPaint, dataPaint;
    private List<String> attributes; // 自定义属性项集合
    private List<Float> values; // 属性值（建议归一化到0-1范围，方便映射到图表半径）
    private int centerX, centerY;
    private float radius; // 图表有效半径

    public RadarChartView(Context context) {
        super(context);
        init();
    }

    public RadarChartView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        // 初始化画笔，避免在onDraw中重复创建
        gridPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        gridPaint.setColor(Color.LTGRAY);
        gridPaint.setStyle(Paint.Style.STROKE);
        gridPaint.setStrokeWidth(2);

        axisPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        axisPaint.setColor(Color.DKGRAY);
        axisPaint.setStyle(Paint.Style.STROKE);
        axisPaint.setStrokeWidth(3);

        dataPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        dataPaint.setColor(Color.parseColor("#FF4081"));
        dataPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        dataPaint.setStrokeWidth(2);
        dataPaint.setAlpha(180);

        // 默认示例数据，可通过外部方法替换
        attributes = new ArrayList<>(Arrays.asList("速度", "力量", "敏捷", "防守", "射门"));
        values = new ArrayList<>(Arrays.asList(0.8f, 0.6f, 0.9f, 0.7f, 0.5f));
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // 强制图表为正方形，取宽高中的较小值作为尺寸
        int size = Math.min(MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.getSize(heightMeasureSpec));
        setMeasuredDimension(size, size);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        centerX = getWidth() / 2;
        centerY = getHeight() / 2;
        radius = Math.min(centerX, centerY) * 0.8f; // 预留边距，避免内容溢出

        // 绘制多层多边形网格（示例为3层）
        for (int i = 1; i <= 3; i++) {
            float currentRadius = radius * i / 3f;
            Path gridPath = new Path();
            for (int j = 0; j < attributes.size(); j++) {
                // 计算当前属性点的角度（从顶部开始）
                float angle = (float) (2 * Math.PI * j / attributes.size() - Math.PI / 2);
                float x = centerX + (float) Math.cos(angle) * currentRadius;
                float y = centerY + (float) Math.sin(angle) * currentRadius;
                if (j == 0) {
                    gridPath.moveTo(x, y);
                } else {
                    gridPath.lineTo(x, y);
                }
            }
            gridPath.close();
            canvas.drawPath(gridPath, gridPaint);
        }

        // 绘制属性轴和属性名称
        for (int j = 0; j < attributes.size(); j++) {
            float angle = (float) (2 * Math.PI * j / attributes.size() - Math.PI / 2);
            float endX = centerX + (float) Math.cos(angle) * radius;
            float endY = centerY + (float) Math.sin(angle) * radius;
            // 绘制轴线条
            canvas.drawLine(centerX, centerY, endX, endY, axisPaint);
            // 绘制属性文字，偏移避免与轴重叠
            float textX = endX + (float) Math.cos(angle) * 20;
            float textY = endY + (float) Math.sin(angle) * 20;
            axisPaint.setTextSize(14);
            canvas.drawText(attributes.get(j), textX, textY, axisPaint);
        }

        // 绘制数据填充区域
        if (values.size() == attributes.size()) {
            Path dataPath = new Path();
            for (int j = 0; j < attributes.size(); j++) {
                float angle = (float) (2 * Math.PI * j / attributes.size() - Math.PI / 2);
                float valueRadius = radius * values.get(j);
                float x = centerX + (float) Math.cos(angle) * valueRadius;
                float y = centerY + (float) Math.sin(angle) * valueRadius;
                if (j == 0) {
                    dataPath.moveTo(x, y);
                } else {
                    dataPath.lineTo(x, y);
                }
            }
            dataPath.close();
            canvas.drawPath(dataPath, dataPaint);
        }
    }

    // 外部调用更新数据，触发重绘
    public void updateData(List<String> attributes, List<Float> values) {
        this.attributes = attributes;
        this.values = values;
        invalidate();
    }
}

步骤2：在布局中引用自定义View #

在XML布局文件中直接添加该View：

<com.yourpackage.RadarChartView
    android:id="@+id/radarChart"
    android:layout_width="match_parent"
    android:layout_height="300dp" />

步骤3：动态更新图表数据 #

在Activity/Fragment中调用updateData方法，即可实时刷新图表内容：

RadarChartView radarChart = findViewById(R.id.radarChart);
// 自定义属性项和对应数值
List<String> customAttrs = Arrays.asList("体力", "传球", "盘带", "射门", "防守", "速度");
List<Float> customValues = Arrays.asList(0.7f, 0.85f, 0.9f, 0.6f, 0.75f, 0.8f);
radarChart.updateData(customAttrs, customValues);

优化建议 #

• 性能优化：若需频繁更新数据，可使用postInvalidate()在子线程触发重绘；画笔对象统一在init方法初始化，禁止在onDraw中重复创建。
• 美观调整：可给数据填充区域添加渐变效果，或给不同层级的网格线设置区分色；根据文字角度调整绘制位置，避免重叠。
• 交互增强：若需点击属性项查看详情，可在onTouchEvent中处理触摸点，判断点击的属性轴区域。

该方案基于原生Android API实现，无需额外依赖库，资源消耗极低，完全支持自定义属性数量和动态数值更新，匹配你的需求场景。

内容的提问来源于stack exchange，提问作者WholesomeRipples