自定义view之可伸缩的圆弧与扇形
原文地址： 自定义view之可伸缩的圆弧与扇形
上一篇文章中讲解了如何自定义一个带有清除按钮的Edittext，这次讲解如何实现一个带有动画效果的圆弧及扇形图。先简单看一下效果：
简单看一下这两个图形：
- 弧形是根据输入的一个范围在0-360范围内的值，增加时会显示一个逐渐增加的动画，减少时也会有一个逐渐减少的动画，这个动画的插值器我设置的是先增速后减速。
- 扇形百分比动画是一个每次都会从开始的位置从新生成的动画，也可以做成类似于圆弧动画的效果。
自定义圆弧类
这个圆弧类我们直接继承自View，然后必然实现构造方法。
private float value;//用户设置的值
private Paint arcPaint;//要用到的画笔
private RectF rectF;//绘制的范围
private float oldValue;//过时的值
public ArcProgress(Context context) {
super(context);
init();
}
public ArcProgress(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public ArcProgress(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
在构造器中我们定义了一个init方法，这个方法主要是用来初始化一些东西，我只是初始化了画笔，注意一点，不能将rectF在这时候设置范围，因为我们是要根据用户设置的大小来填充rectF。
private void init() {
arcPaint = new Paint();
arcPaint.setAntiAlias(true);//抗锯齿
arcPaint.setStyle(Paint.Style.STROKE);//只绘制圆弧边界
arcPaint.setColor(Color.parseColor("#2c2c2c"));
arcPaint.setStrokeWidth(50);//50px的圆弧宽度
}
画笔大家应该用的都很熟练了，此处只说一点，如果不设置setStyle，默认是FILL，是填充效果。这个画笔是在ondraw方法中用来绘制圆弧的。
onsizechange方法
还记得上节内容中将的view的初始化顺序，
constructor->onmeasure->onDraw
现在引入一个新的方法，onSizeChanged(int w, int h, int oldw, int oldh)
这个方法是在控件的布局参数发生变化时调用的，oldvalue在第一次加载时是0。
这个方法是在onmeasure之后ondraw之前调用。调用顺序为：
constructor->onmeasure->onSizeChanged->onDraw
在这个方法中我们定义了rectF的范围
rectF = new RectF(50, 50, getMeasuredHeight() - 50, getMeasuredHeight() - 50);
我们设置了一个边界范围是50px，目的是看的更清楚，关于stroke的绘制是在宽度外还是内的问题此处不做详解。
ondraw方法
canvas.drawArc(rectF, 270, value, false, arcPaint);
方法只有一个最简单的绘制圆弧，注意第二个参数是绘制的起始角度，第三个参数是绘制的角度，为不是结束角度，结束角度是起始角度+绘制角度。第三个参数设置为false，这时候绘制的圆弧而不是扇形。
设置值的接口
public void setValue(final float v) {
ValueAnimator animator = ValueAnimator.ofFloat(oldValue, v);
oldValue = v;
if (Math.abs(v - oldValue) > 180) {
animator.setDuration(1000);
} else {
animator.setDuration(500);
}
animator.setInterpolator(new AccelerateDecelerateInterpolator());
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
value = (float) animation.getAnimatedValue();
Log.d("change", "=" + animation.getAnimatedValue());
invalidate();
}
});
animator.start();
}
这个接口是要暴漏出来的，设置为public。
此处我们定义了一个ValueAnimator，用oldv接收设置的v，此处为了用户体验，当变化角度小于180时设置持续时间为500ms，当变化角度大于180度时设置持续时间为500ms。
定义的插值器是一个先加速后减速的插值器。
重要的是为animator中添加UpdateListener，这个函数会持续返回给我们一个ValueAnimator对象，这个对象包含了我们在插值器中设定的不同的时间段对应的值，相当于一个时间函数。回调函数一直持续到动画结束。
此处我们通过ValueAnimator取出对应的数值，然后通过调用invalidate方法来刷新当前view，产生一个不断在动的效果。
这个invalid会刷新所有的可见view，但是必须工作在ui线程。
这样就完成了一个简单的view
button = (Button) view.findViewById(R.id.btn_change);
circleProgress.setValue(300);
progress.setValue(10, 10, 10);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
circleProgress.setValue(new Random().nextInt(360));
progress.setValue(new Random().nextInt(20), new Random().nextInt(20),
new Random().nextInt(20));
}
});
这是调用代码，点击按钮生成随机的一个值。
同样的方式我们可以用来设置扇形。基本原理相似。
在ondraw方法中要设置为如下
canvas.drawArc(rectF, 0, 360 * percentOne, true, circlePaint1);
canvas.drawArc(rectF, 360 * percentOne, 360 * percentTwo, true, circlePaint2);
canvas.drawArc(rectF, 360 * (percentOne + percentTwo), 360 * percentThree, true, circlePaint3);
drawArc的第三个参数要用true，才能绘制扇形。
设置值的方法如下：
public void setValue(int value1, int value2, int value3) {
int sum = value1 + value2 + value3;
percentOne = (float) value1 / sum;
newPercentOne = percentOne;
percentTwo = (float) value2 / sum;
newPercentTwo = percentTwo;
percentThree = (float) value3 / sum;
newPercentThree = percentThree;
ValueAnimator animator1 = ValueAnimator.ofFloat(oldPercentOne, newPercentOne);
ValueAnimator animator2 = ValueAnimator.ofFloat(oldPercentTwo, newPercentTwo);
ValueAnimator animator3 = ValueAnimator.ofFloat(oldPercentThree, newPercentThree);
animator1.setDuration(1000);
animator2.setDuration(1000);
animator3.setDuration(1000);
animator1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
percentOne = (float) animation.getAnimatedValue();
}
});
animator2.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
percentTwo = (float) animation.getAnimatedValue();
}
});
animator3.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
percentThree= (float) animation.getAnimatedValue();
invalidate();
}
});
AnimatorSet animatorSet=new AnimatorSet();
animatorSet.playTogether(animator1,animator2,animator3);
animatorSet.start();
Log.d("rect :", "percentone=" + percentOne + ",percenttwo=" + percentTwo + ",percentthree=" + percentThree);
}
我们用一个animatorset来包裹着三个动画同时发生，当然也可以按顺序发生，效果如下：
最后，关于动画的使用
