自定义控件:实现饼状图选中效果
2019-11-19 本文已影响0人
好学人
业务需求
公司产品的用户中心有一个资产统计模块,需要用一个饼状图展示用户资产的分类统计情况,效果图如下:
思路分析
首先,这种效果肯定是要使用自定义控件来实现的。
-
普通的饼状图很好实现,使用
canvas.drawArc()
方法绘制弧形即可。 -
那选中部分的突出效果该如何实现呢?我们可以扩大绘制弧形的矩形区域,同时调整笔记的宽度,即可绘制出如图的突出选中效果。
以下是Kotlin版的代码实现。
代码实现(Kotlin)
/**
* 自定义饼状图
*/
class AssetPieChart(context: Context, attrs: AttributeSet) : View(context, attrs) {
private val paint = Paint()
private val rectF = RectF(0f, 0f, 400f, 400f)
/**
* 对自定义控件进行测量
*/
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
val width = View.resolveSize(500, widthMeasureSpec)
val height = View.resolveSize(500, heightMeasureSpec)
this.setMeasuredDimension(width, height)
}
override fun onDraw(canvas: Canvas) {
// 移动画布的坐标系
canvas.translate(100f, 100f)
// 绘制环形饼状图的普通部分
paint.strokeWidth = 100f
paint.color = Color.MAGENTA
paint.style = Paint.Style.STROKE
canvas.drawArc(rectF, 0f, -300f, false, paint)
// 绘制环形饼状图选中(突出)部分
val offset = -5f
rectF.inset(offset, offset) // 扩大矩形的快捷方法
paint.strokeWidth -= offset * 2
paint.color = Color.GREEN
canvas.drawArc(rectF, 60f, -60f, false, paint)
}
}
总结思考
在绘制弧形时,通过改变弧形所在的矩形区域大小以及调整画笔的宽度,即可实现饼状图的选中效果。
思考:如何确定弧形区域的点击范围?