Android自定義View之三種流行進度條的寫法

概述：

利用自定義View的onDraw()方法，可以繪製很多種圖形，進度框只是其中之一。

Demo

這是一個模擬下載的demo。

自中央逐漸充滿型圓形進度框

demo1

public class FirstProgressView extends View{

    private int width;
    private int height;

    private int progress;
    private int maxProgress = 100;
    private Paint mPaintBackGround;
    private Paint mPaintCurrent;
    private Paint mPaintText;

    public void setWidth(int width) {
        this.width = width;
    }

    public void setHeight(int height) {
        this.height = height;
    }

    public int getProgress() {
        return progress;
    }

    public void setProgress(int progress) {
        this.progress = progress;
        invalidate();
    }

    public int getMaxProgress() {
        return maxProgress;
    }

    public void setMaxProgress(int maxProgress) {
        this.maxProgress = maxProgress;
    }

    public FirstProgressView(Context context) {
        super(context);
    }

    public FirstProgressView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaintBackGround = new Paint();//新定義一個畫筆，用來畫背景
        mPaintBackGround.setColor(Color.GRAY);//設置畫筆顏色
        mPaintBackGround.setAntiAlias(true);//設置爲true，代表抗鋸齒

        mPaintCurrent = new Paint();//用於畫進度圖
        mPaintCurrent.setColor(Color.GREEN);
        mPaintCurrent.setAntiAlias(true);

        mPaintText = new Paint();//用來畫文本的畫筆
        mPaintText.setColor(Color.BLACK);
        mPaintText.setAntiAlias(true);
        mPaintText.setTextAlign(Paint.Align.CENTER);//設置文本排布方式：正中央
        mPaintText.setTextSize(50);//設置文本大小，這裏爲50xp
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //左起：圓心x座標，圓心y座標，半徑，Paint對象(畫筆)
        canvas.drawCircle(width / 2, height / 2, 400, mPaintBackGround);
        canvas.drawCircle(width/2,height/2,progress*400f/maxProgress,mPaintCurrent);
        //左起：文本內容，起始位置x座標，起始位置y座標，畫筆
        canvas.drawText(progress*100f/maxProgress+"%",width / 2, height / 2,mPaintText);

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //該View佈局寬
        width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
        //該View佈局高
        height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
        //設定本View的大小的方法
        setMeasuredDimension(width, height);
    }
}

水箱型注水式進度框

demo2

public class SecondProgressView extends View {

    private int width;
    private int height;

    private int progress;
    private int maxProgress = 100;
    private Paint mPaintBackGround;
    private Paint mPaintCurrent;
    private Paint mPaintText;

    public void setWidth(int width) {
        this.width = width;
    }

    public void setHeight(int height) {
        this.height = height;
    }

    public int getProgress() {
        return progress;
    }

    public void setProgress(int progress) {
        this.progress = progress;
        invalidate();
    }

    public int getMaxProgress() {
        return maxProgress;
    }

    public void setMaxProgress(int maxProgress) {
        this.maxProgress = maxProgress;
    }

    public SecondProgressView(Context context) {
        super(context);
    }

    public SecondProgressView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaintBackGround = new Paint();
        mPaintBackGround.setColor(Color.GRAY);
        mPaintBackGround.setStyle(Paint.Style.STROKE);
        mPaintBackGround.setStrokeWidth(20);
        mPaintBackGround.setAntiAlias(true);

        mPaintCurrent = new Paint();
        mPaintCurrent.setColor(Color.BLUE);
        mPaintCurrent.setAntiAlias(true);

        mPaintText = new Paint();
        mPaintText.setColor(Color.BLACK);
        mPaintText.setAntiAlias(true);
        mPaintText.setTextAlign(Paint.Align.CENTER);
        mPaintText.setTextSize(50);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.drawRect(width / 2 - 200, height / 2 - 200, width / 2 + 200, height / 2 + 200, mPaintBackGround);
        canvas.drawRect(width/2-190,height/2-190+(380-progress*380f/maxProgress),width/2+190,height/2+190,mPaintCurrent);
        canvas.drawText(progress*100f/maxProgress+"%",width / 2, height / 2,mPaintText);

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
        height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
        setMeasuredDimension(width, height);
    }
}

圓圈式弧形進度框：

demo3:

public class ThirdProgressView extends View {

    private int width;
    private int height;

    private int progress;
    private int maxProgress = 100;
    private Paint mPaintBackGround;
    private Paint mPaintCurrent;
    private Paint mPaintText;

    public void setWidth(int width) {
        this.width = width;
    }

    public void setHeight(int height) {
        this.height = height;
    }

    public int getProgress() {
        return progress;
    }

    public void setProgress(int progress) {
        this.progress = progress;
        invalidate();
    }

    public int getMaxProgress() {
        return maxProgress;
    }

    public void setMaxProgress(int maxProgress) {
        this.maxProgress = maxProgress;
    }

    public ThirdProgressView(Context context) {
        super(context);
    }

    public ThirdProgressView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaintBackGround = new Paint();
        mPaintBackGround.setColor(Color.GRAY);
        mPaintBackGround.setStrokeWidth(60);
        mPaintBackGround.setStyle(Paint.Style.STROKE);
        mPaintBackGround.setAntiAlias(true);

        mPaintCurrent = new Paint();
        mPaintCurrent.setColor(Color.GREEN);
        mPaintCurrent.setStrokeWidth(60);
        mPaintCurrent.setStyle(Paint.Style.STROKE);
        mPaintCurrent.setAntiAlias(true);

        mPaintText = new Paint();
        mPaintText.setColor(Color.BLACK);
        mPaintText.setAntiAlias(true);
        mPaintText.setTextAlign(Paint.Align.CENTER);
        mPaintText.setTextSize(50);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.drawCircle(width / 2, height / 2, 400, mPaintBackGround);
        RectF oval = new RectF(width/2-400,height/2-400,width/2+400,height/2+400);
        //左起分別是RectF對象，起始角度，終止角度，是否顯示扇邊（如果爲true畫出的是一個扇形），Paint對象
        canvas.drawArc(oval,0,progress*360f/maxProgress,false,mPaintCurrent);
        canvas.drawText(progress*100f/maxProgress+"%",width / 2, height / 2,mPaintText);

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
        height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
        setMeasuredDimension(width, height);
    }
}

需要在佈局文件中加載自定義View，這裏隨便加載一個作示範（自定義View都這麼加載）：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/button_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Start Download"/>

    <com.example.administrator.selfdefinedview.widget.ThirdProgressView
        android:id="@+id/progress_view_first"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

主活動的中自定義View也需要聲明和findViewById，這裏寫的是一個模擬下載的小demo,加載的是第三種自定義View，其他的自定義View加載方式完全一樣。

public class MainActivity extends Activity {
    private int progress;
    private Button mButtonStart;
    private ThirdProgressView mProgressView;

    private static final int DOWNLOAD_UPDATE = 0x99;
    //模擬下載
    private Handler mHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            //處理msg
            switch (msg.what) {
                case DOWNLOAD_UPDATE:
                    progress++;
                    if (progress <= 100) {
                        mProgressView.setProgress(progress);
                        sendEmptyMessageDelayed(DOWNLOAD_UPDATE, 100);//每隔100毫秒發送一次handler
                    }
                    break;
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mButtonStart = (Button) findViewById(R.id.button_start);
        mProgressView = (ThirdProgressView) findViewById(R.id.progress_view_first);

        mButtonStart.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //向handler發送一個延時空消息，1000毫秒後發送
                mHandler.sendEmptyMessageDelayed(DOWNLOAD_UPDATE, 1000);
            }
        });

    }
}

我們猿類工作壓力大，很需要有自己的樂趣，於是乎，我開通了音樂人賬號，以後的作品將會上傳到我的音樂人小站上。如果這篇博客幫助到您，希望您能多關注，支持，鼓勵我將創作進行下去，同時也祝你能在工作和生活樂趣兩發麪都能出彩！

網易雲音樂人，直接打開客戶端搜索音樂人 “星河河”

豆瓣音樂人地址：https://site.douban.com/chuxinghe/ 星河河