Androidカスタムコントロールシリーズの応用編——円形進捗バー

一、概説
前回のブログでは、Androidカスタムコントロールシリーズの基礎編を紹介しました.リンク:http://www.cnblogs.com/jerehedu/p/4360066.html
このブログでは、基本編に基づいてondraw()メソッドとカスタム属性を書き換えることで、図に示すように円形の進捗バーを実現します.

二、実現手順
1、カスタムコンポーネントMyCircleProgress拡張ビューの作成

public class MyCircleProgress extends View {

…    

}

2、MyCircleProgressクラスで、属性をカスタマイズする

    public int progress  = 0;//     ,    

    /**

     *        ，              、  、   

     */

    private int mR;//   ，     

    private int bgColor;//        

    private int fgColor;//        ，       

    private int drawStyle; //     FILL      ，STROKE       

            private int strokeWidth;//STROKE          

    private int max;//   ，        

  /** 

     *     ，        ，         ，     

     */  

    public synchronized void setProgress(int progress) {

        if(progress<0){

            progress=0;

        }else if(progress>max){

            progress=max;

        }else{

            this.progress = progress;

        }        

    }

    public int getMax() {

        return max;    }

3、カスタム属性にattrsを書く.xmlリソース.res/valuesディレクトリの下に配置されます.内容は次のとおりです.

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <declare-styleable name="CircleProgressBar">

        <attr name="bgColor" format="color"/>

        <attr name="fgColor" format="color"/>

        <attr name="r" format="integer"/>

        <attr name="strokeWidth" format="integer"/>

        <attr name="drawStyle">

            <enum name="STROKE" value="0"></enum>

            <enum name="FILL" value="1"></enum>

        </attr>

        <attr name="max" format="integer"/>

    </declare-styleable>

</resources>

4、MyCircleProgressクラスで構造関数を定義し、属性を初期化する

    private void initProperty(AttributeSet attrs){

    TypedArray tArray = context.obtainStyledAttributes(attrs, R.styleable.CircleProgressBar);

        mR=tArray.getInteger(R.styleable.CircleProgressBar_r,10);

        bgColor=tArray.getColor(R.styleable.CircleProgressBar_bgColor, Color.GRAY);

        fgColor=tArray.getColor(R.styleable.CircleProgressBar_fgColor, Color.RED);

        drawStyle=tArray.getInt(R.styleable.CircleProgressBar_drawStyle, 0);

        strokeWidth=tArray.getInteger(R.styleable.CircleProgressBar_strokeWidth, 10);

        max=tArray.getInteger(R.styleable.CircleProgressBar_max, 100);

    }    

public MyCircleProgress(Context context, AttributeSet attrs) {

        super(context, attrs);

        this.context = context;

        this.paint = new Paint();

        this.paint.setAntiAlias(true); //     

        this.paint.setStyle(Style.STROKE); //            

        initProperty(attrs);    

    }

5、MainActivityのレイアウトファイルにMyCircleProgressコンポーネントを追加する.以下に示す.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

xmlns:app="http://schemas.android.com/apk/res/com.jereh.mydrawcircleprogress"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context=".MainActivity"

     >   

 <com.jereh.views.MyCircleProgress

        android:id="@+id/MyCircleProgress"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content" 

        app:r="45"

        app:strokeWidth="10"

        app:bgColor="#cccccc"

        app:fgColor="#ff0000"

        app:drawStyle="FILL"

        app:max="50"

        />

</RelativeLayout>

6、カスタムコンポーネントMyCircleProgressでonDrawを書き換える方法:

    protected  void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        int center = getWidth() / 2; //     

        this.paint.setColor(bgColor);

        this.paint.setStrokeWidth(strokeWidth);

        canvas.drawCircle(center, center, mR, this.paint);

        //     

        this.paint.setColor(fgColor);

        if(drawStyle==0){

            this.paint.setStyle(Style.STROKE);

            opt=false;

        }else{

            this.paint.setStyle(Style.FILL);

            opt=true;

        }

        int top = (center - mR);

        int bottom = (center + mR);

        RectF oval = new RectF(top, top, bottom, bottom);

        canvas.drawArc(oval, 270, 360*progress/max, opt, paint);

    

    } 

7、MainActivityの作成

public class MainActivity extends Activity {

    private MyCircleProgress progressView;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        progressView = (MyCircleProgress) findViewById(R.id.MyCircleProgress);

        new ProgressAnimation().execute();

    }

    class ProgressAnimation extends AsyncTask<Void, Integer, Void> {

        @Override

        protected Void doInBackground(Void... params) {

            //        

            for (int i = 0; i < progressView.getMax(); i++) {

                try {

                    publishProgress(i);

                    Thread.sleep(100);

                } catch (InterruptedException e) {

                    e.printStackTrace();

                }

            }

            return null;

        }

        

        @Override

        protected void onProgressUpdate(Integer... values) {

            //     

            progressView.setProgress(values[0]);

            progressView.invalidate();

            super.onProgressUpdate(values);

        }

    }

}

 
作成者:
ジェリー教育
出典:
http://www.cnblogs.com/jerehedu/  
本文の著作権は煙台ジェリー教育科学技術有限会社とブログ園に共有され、転載を歓迎するが、著者の同意を得ずにこの声明を保留し、文章のページの明らかな位置で原文の接続を与えなければならない.そうしないと、法律責任を追及する権利を保留する.