饼状图作为自定义view的入门,的确是很值得研究的。首先看一下效果:
总体上概况思路,就是三个部分:
1.绘制饼图文字提示和横线
2.点击扇形变换大小的处理
3.扇形一定情况下连贯生成的动画。
总体上的解决方案就是:
1.用两个paint,一个用来绘制扇形,一个用来绘制文字和横线,这儿绘制扇形用到了两个外接矩形,一个是未点击的,一个是点击后的。
2.变换大小在这里面挺复杂的,首先要转换点击点的原点参照系为扇形图的原点,其次要通过点所处的象限,利用反正切三角函数计算出这个点对应的角度。最后通过角度加上二分查找,找到这个角度在起始角数组里面所处的位置,然后用大外接矩形绘制。
3.连贯动画通过自定义一个Animation,重写applyTransformation(float interpolatedTime,Transformation t)方法来实现,interpolatedTime代表动画执行的过度时间,也就是一种时间单位。在这个变化中通过它来慢慢的改变每个扇形的弧度,来实现渐变动画。超过了这个时间单位,则直接设置对应的弧度为其静止状态下的正常值。
下面,是这个饼图自定义view的代码,注释说的很想走心
//步骤分解:
//1,最内侧的扇形组成的圆形区域的绘制
//2,中间的短线段的绘制
//3,最外侧的文本的绘制
public class Pie extends View {
private List<PieEntity> entities;
private int width;
private int height;
private int radius;
//这个画笔用于绘制弧形
private Path path;
private Paint paint;
//这个画笔用于绘制横线和文字
private Paint linePaint;
private float totalValue;
private float[] startAngles;
//被点击的扇形的位置
private int position = -1;
public Pie(Context context) {
this(context, null);
}
public Pie(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public Pie(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
//定义扇形的外接矩形
private RectF rectF;
private RectF touchRectF;
private void init() {
mAnimation = new PieChartAnimation();
mAnimation.setDuration(ANIMATION_DURATION);