Android 自定义饼图View：实现不同扇形区域颜色和点击事件

{"title":"Android 自定义饼图View：实现不同扇形区域颜色和点击事件","description":"本文将介绍如何使用Android自定义View实现饼图，并展示如何设置不同扇形区域的颜色，以及如何添加点击事件来响应用户交互。","keywords":"android, 自定义view, 饼图, 扇形, 颜色, 点击事件, 代码示例","content":"以下是一个自定义 View 实现圆饼不同扇形区域颜色以及点击事件的示例代码：\n\njava\nimport android.content.Context;\nimport android.graphics.Canvas;\nimport android.graphics.Color;\nimport android.graphics.Paint;\nimport android.graphics.RectF;\nimport android.util.AttributeSet;\nimport android.view.MotionEvent;\nimport android.view.View;\n\npublic class PieChartView extends View {\n\n private int[] colors = {Color.RED, Color.BLUE, Color.GREEN};\n private float[] data = {30, 40, 30}; // 每个扇形区域的数据比例\n private RectF pieRectF; // 圆饼的矩形区域\n private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);\n private int selectedIndex = -1; // 选中的扇形区域索引\n\n public PieChartView(Context context) {\n super(context);\n }\n\n public PieChartView(Context context, AttributeSet attrs) {\n super(context, attrs);\n }\n\n public PieChartView(Context context, AttributeSet attrs, int defStyleAttr) {\n super(context, attrs, defStyleAttr);\n }\n\n @Override\n protected void onDraw(Canvas canvas) {\n super.onDraw(canvas);\n\n if (data.length == 0) {\n return;\n }\n\n float startAngle = 0;\n pieRectF = new RectF(0, 0, getWidth(), getHeight());\n\n for (int i = 0; i < data.length; i++) {\n paint.setColor(colors[i]);\n\n // 计算每个扇形区域的角度\n float sweepAngle = 360 * (data[i] / 100);\n\n // 绘制扇形区域\n canvas.drawArc(pieRectF, startAngle, sweepAngle, true, paint);\n\n // 如果选中的扇形区域，绘制选中效果\n if (i == selectedIndex) {\n paint.setColor(Color.WHITE);\n paint.setStyle(Paint.Style.STROKE);\n paint.setStrokeWidth(5);\n canvas.drawArc(pieRectF, startAngle, sweepAngle, true, paint);\n }\n\n // 更新下一个扇形区域的起始角度\n startAngle += sweepAngle;\n }\n }\n\n @Override\n public boolean onTouchEvent(MotionEvent event) {\n switch (event.getAction()) {\n case MotionEvent.ACTION_DOWN:\n float x = event.getX();\n float y = event.getY();\n\n // 计算点击的点与圆心的距离\n float distance = (float) Math.sqrt((x - getWidth() / 2) * (x - getWidth() / 2)\n + (y - getHeight() / 2) * (y - getHeight() / 2));\n\n // 如果点击的点在圆饼内部，计算点击的角度\n if (distance <= getWidth() / 2) {\n float clickAngle = (float) (Math.atan2(y - getHeight() / 2, x - getWidth() / 2) * 180 / Math.PI);\n clickAngle = (clickAngle + 360) % 360;\n\n // 判断点击的角度落在哪个扇形区域\n float startAngle = 0;\n for (int i = 0; i < data.length; i++) {\n float sweepAngle = 360 * (data[i] / 100);\n if (clickAngle >= startAngle && clickAngle <= startAngle + sweepAngle) {\n selectedIndex = i;\n break;\n }\n startAngle += sweepAngle;\n }\n\n // 重绘视图\n invalidate();\n }\n break;\n }\n\n return super.onTouchEvent(event);\n }\n}\n\n\n在布局文件中使用该自定义 View：\n\nxml\n<com.example.PieChartView\n android:layout_width="match_parent"\n android:layout_height="300dp" />\n\n\n通过设置 colors 数组和 data 数组，可以自定义不同扇形区域的颜色和数据比例。点击扇形区域时，会根据点击位置计算出点击的扇形区域索引，并通过重绘视图来实现选中效果。