1. 程式人生 > >Android自定義View,製作餅狀圖帶動畫效果

Android自定義View,製作餅狀圖帶動畫效果

一個簡單的自定義view餅狀圖,加入了動畫效果

先看一下效果

下面就直接上程式碼了

public class Yidong2 extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new PointView(this));
    }

    public class PointView extends View {
        private int[] p1 = {0, 100, 200};        //存放弧度的陣列
        //定義存放顏色的陣列
        private int[] p2 = {Color.GREEN, Color.YELLOW, Color.RED};        
        Paint paint = new Paint();              //畫筆
        private float k;                        //弧度變動後的值
		
        //定義矩形,使用者確定描繪的餅狀圖位置
        private final RectF rectF = new RectF(100, 100, 800, 800);

        //定義
        public PointView(Context context) {
            super(context);
            paint.setStyle(Paint.Style.FILL);       //設定畫筆為填充
            paint.setStrokeWidth(10f);              //設定畫筆寬度
            paint.setAntiAlias(true);               //抗鋸齒

            //屬性動畫
            ValueAnimator animator = ValueAnimator.ofFloat(0, 360);
            animator.setDuration(1000);              //設定動畫時間
            animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    k = (float) animation.getAnimatedValue();		//獲取變動後的值
                    invalidate();           //重新整理佈局
                }
            });
            animator.start();				//啟動動畫
        }

        @SuppressLint("DrawAllocation")
        @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            //這裡做了不同顏色的範圍判斷,還可以進行封裝,為了便於學習,就沒有再次封裝
            if (k < p1[1]) {
                shezhi(canvas, 0);
            } else if (k < p1[2]) {
                shezhi(canvas, 1);
            } else {
                shezhi(canvas, 2);
            }
        }

        //動畫方法,Android的動畫有三種,View動畫,幀動畫,屬性動畫,
        //這裡對動畫方法進行簡單的封裝,只需要明白,如果存在多個顏色的話,在繪製第二個以後顏色時,每次都要先繪製先前所有顏色,再繪製當前顏色,即可理解,這也就是動畫的基本邏輯。
        private void shezhi(Canvas canvas, int n) {
            for (int i = 0; i <= n; i++) {
                paint.setColor(p2[i]);
                canvas.drawArc(rectF, p1[i], k - p1[i], true, paint);
            }
        }
    }
}

 已經加入了詳細的註釋,同樣的原理,還可以將動畫加入到柱形圖等等。