自定義控件——環形進度條

   系統提供的環形進度條無法顯示進度,且不會停止轉動,所以要用到能顯示進度的進度條時,只能自己定義一個控件。

   API Demos裏面有提供類似的畫法,API Demos --> Graphics --> Arcs。

   wKiom1NPMffx6SrIAABfYMSltqw103.jpg

   若想做到如上圖所示的最終效果,且黃色進度的部分是通過動畫漸漸生成的,則步驟如下:

   (1)首先新建一個類,繼承View或者ProgressBar或者ImageView都可以,區別就在於若繼承ProgressBar或者ImageView則我們自定義的控件也會具有這些父類的屬性,比如繼承ProgressBar時,運行就會發現除了我們畫出來的控件之外,還能看到系統的無盡進度條。若想去除,則將onDraw()方法中的super.onDraw(canvas)刪除即可。其實一般都是繼承View即可。

   (2)創建畫筆,若想畫圓環,而不是實心圓,則畫筆要設置成空心格式:

       mPaint.setStyle(Style.STROKE);再通過mPaint.setStrokeWidth(50)來設置畫筆寬度。上圖所示效果其實是由一個背景藍色圓環和一個進度條黃色圓弧構成,所以要創建兩個畫筆。

   (3)畫出背景圓環:在onDraw()方法中寫canvas.drawCircle(150, 150, 100, mPaint_bg);

   (4)畫圓弧進度條:畫圓弧的方法爲canvas.drawArc(oval, -90, angle, false, mPaint);

第一個參數是一個橢圓,作爲畫圓弧的模板,第二個參數表示起始角度,第二個參數表示轉動的總角度,第三個參數表示是否要畫出圓內部分。所以要先創建一個橢圓對象:RectF oval = new RectF(50, 50, 250, 250);要想達到如上圖所示效果,則橢圓要與背景圓完全重合,自己要計算好座標。因爲要實現動畫生成進度的效果,所以第三個參數要設置爲一個變量,實時變化。

   (5)寫一個方法,可以外部調用,來設置進度條的進度:    

        public void setProgress(int progress)

       {

           this.maxProgress = progress;

        }

   (6)設置動畫效果:在構造方法中寫:

    postDelayed(new Runnable() {

    @Override

         public void run() {

            totalAngle = 360*maxProgress/100;

            angle += 5;

            invalidate();

            if (angle <= totalAngle)

            {

                postDelayed(this, 80);

             }

         }

     }, 80);

   (7)在要用到該控件的類中,放入此控件,並得到控件對象,調用setProgress(int progress)方法即可完成。


備註:

   1、drawArc()方法的第四個參數若設置成true,則效果如下:

    wKioL1NPPF3jICOcAABeSCvGTOs948.jpg

   2、用Style.STROKE風格的畫筆畫圓弧時,圓弧並不是完全畫在橢圓模板的外圍,而是一半寬度處於橢圓內部,一半處於外圍,同樣的,畫圓時也一樣。將模板圓畫出來就可以看到,實際情況如下圖所示:

    wKioL1NPPaOAtrUGAABtTqb7dv0963.jpg







發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章