圓形(和柱形)動態增加的自定義view的製作


自定義view 嘛~需要做以下處理:

onDraw--朱圖

onMeasure()--這裏主要是對監聽的處理

startAnim--畫數字增加的動態效果


對畫筆的要求

   Paint arcPaint=new Paint();
   //繪製圓弧
   arcPaint.setStrokeWidth(widthBg / 20);
   //設置空心
   arcPaint.setStyle(Paint.Style.STROKE);
   //防抖動
   arcPaint.setDither(true);
 //  arcPaint.setAntiAlias(true);//消除鋸齒
   //連接處爲圓弧
arcPaint.setStrokeJoin(Paint.Join.ROUND);
   //畫筆的筆觸爲圓角
  arcPaint.setStrokeCap(Paint.Cap.ROUND);
   arcPaint.setColor(Color.BLUE);

畫圓弧的增長

 //圓弧範圍
 RectF    arcRect = new RectF(widthBg * 1 / 4, widthBg * 1 / 4, widthBg * 3 / 4, widthBg * 3 / 4);
 //繪製背景大圓弧
 canvas.drawArc(arcRect, -90, 360, false, arcPaint);
 arcPaint.setColor(Color.GREEN);
 //繪製分數小圓弧
canvas.drawArc(arcRect, -90, num, false, arcPaint);
畫圓柱的上升

下降自然用增加

//畫柱狀圖
        Path rectPath=new Path();
       // float startHeight = widthBg + 90 + rectAgHeight;
        rectPath.moveTo(500,600);

        rectPath.lineTo(500, 600-num);
        arcPaint.setColor(Color.RED);
        canvas.drawPath(rectPath, arcPaint);

這裏需要提示一點

關於變量num

是用來動態監聽num的值的增長的

private void startAnim() {
    //圓弧動畫的實現
    ValueAnimator arcAnimator = ValueAnimator.ofFloat(0, (float) 220);
    arcAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
           num = (float) animation.getAnimatedValue();
            postInvalidate();
        }
    });
    animSet.setDuration(3000);
    //在這裏可以添加多個的
    animSet.playTogether(arcAnimator);
    animSet.start();
}
 其中animSet可以設置好幾個值的--220那個是我們實際賦值的


最後把startAnim這個函數裝到onMeasure裏面既可以了

發佈了44 篇原創文章 · 獲贊 0 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章