Android中使用自定義View實現下載進度的顯示

　　一般有下載功能的應用都會有這樣一個場景，需要一個圖標來標識不同的狀態。之前在公司的項目中寫過一個，今天抽空來整理一下。

　　一般下載都會有這么幾種狀態：未開始、等待、正在下載、下載結束，當然有時候會有下載出錯的狀態。等待狀態是指用戶點擊開始下載，但是線程池中沒有空閑的線程來處理該次下載，所以狀態為等待。

效果圖：

 

 

　　這里我只是演示了一下下載和暫停的狀態，其他狀態沒有演示，在代碼中設置就可以了。

實現代碼：

1、自定義View

public class DownloadPercentView extends View {

    public final static int STATUS_PEDDING = 1;
    public final static int STATUS_WAITING = 2;
    public final static int STATUS_DOWNLOADING = 3;
    public final static int STATUS_PAUSED = 4;
    public final static int STATUS_FINISHED = 5;

    // 畫實心圓的畫筆
    private Paint mCirclePaint;
    // 畫圓環的畫筆
    private Paint mRingPaint;
    // 繪制進度文字的畫筆
    private Paint mTxtPaint;
    // 圓形顏色
    private int mCircleColor;
    // 圓環顏色
    private int mRingColor;
    // 半徑
    private int mRadius;
    // 圓環寬度
    private int mStrokeWidth = 2;
    // 圓心x坐標
    private int mXCenter;
    // 圓心y坐標
    private int mYCenter;
    // 總進度
    private int mTotalProgress = 100;
    // 當前進度
    private int mProgress;
    //下載狀態
    private int mStatus = 1;

    //默認顯示的圖片
    private Bitmap mNotBeginImg;
    //暫停時中間顯示的圖片
    private Bitmap mPausedImg;
    //等待時顯示的圖片
    private Bitmap mWatiImg;
    //下載完成時顯示的圖片
    private Bitmap finishedImg;



    public DownloadPercentView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // 獲取自定義的屬性
        initAttrs(context, attrs);
        initVariable();
    }

    private void initAttrs(Context context, AttributeSet attrs) {
        TypedArray typeArray = context.getTheme().obtainStyledAttributes(attrs,
                R.styleable.DownloadPercentView, 0, 0);
        mRadius = (int)typeArray.getDimension(R.styleable.DownloadPercentView_radius, 100);
        mNotBeginImg = ((BitmapDrawable)typeArray.getDrawable(R.styleable.DownloadPercentView_notBeginImg)).getBitmap();
        mPausedImg = ((BitmapDrawable)typeArray.getDrawable(R.styleable.DownloadPercentView_pausedImg)).getBitmap();
        mWatiImg = ((BitmapDrawable)typeArray.getDrawable(R.styleable.DownloadPercentView_waitImg)).getBitmap();
        finishedImg = ((BitmapDrawable)typeArray.getDrawable(R.styleable.DownloadPercentView_finishedImg)).getBitmap();

        mNotBeginImg = big(mNotBeginImg, mRadius * 2, mRadius * 2);
        mPausedImg = big(mPausedImg, mRadius * 2, mRadius * 2);
        mWatiImg = big(mWatiImg, mRadius * 2, mRadius * 2);
        finishedImg = big(finishedImg, mRadius * 2, mRadius * 2);

        mStrokeWidth = (int)typeArray.getDimension(R.styleable.DownloadPercentView_strokeWidth, 2);

//        mRadius = Math.max(mNotBeginImg.getWidth()/2, mNotBeginImg.getHeight()/2) + mStrokeWidth;
        mCircleColor = typeArray.getColor(R.styleable.DownloadPercentView_circleColor, 0xFFFFFFFF);
        mRingColor = typeArray.getColor(R.styleable.DownloadPercentView_ringColor, 0xFFFFFFFF);
    }

    private void initVariable() {
        //初始化繪制灰色圓的畫筆
        mCirclePaint = new Paint();
        mCirclePaint.setAntiAlias(true);
        mCirclePaint.setColor(mCircleColor);
        mCirclePaint.setStyle(Paint.Style.STROKE);
        mCirclePaint.setStrokeWidth(mStrokeWidth);

        //初始化繪制圓弧的畫筆
        mRingPaint = new Paint();
        mRingPaint.setAntiAlias(true);
        mRingPaint.setColor(mRingColor);
        mRingPaint.setStyle(Paint.Style.STROKE);
        mRingPaint.setStrokeWidth(mStrokeWidth);

        //初始化繪制文字的畫筆
        mTxtPaint = new Paint();
        mTxtPaint.setAntiAlias(true);
        mTxtPaint.setColor(Color.parseColor("#52ce90"));
        mTxtPaint.setTextAlign(Paint.Align.CENTER);
        mTxtPaint.setTextSize(24);

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int width = (int)Math.ceil(mRadius) * 2;
        setMeasuredDimension(width, width);
    }
    
    @Override
    protected void onDraw(Canvas canvas) {
        mXCenter = getWidth() / 2;
        mYCenter = getHeight() / 2;
        switch (mStatus) {
            case STATUS_PEDDING:
                canvas.drawBitmap(mNotBeginImg, 0, 0, null);
                break;
            case STATUS_WAITING:
                canvas.drawBitmap(mWatiImg, 0, 0, null);
                break;
            case STATUS_DOWNLOADING:
                drawDownloadingView(canvas);
                break;
            case STATUS_PAUSED:
                drawPausedView(canvas);
                break;
            case STATUS_FINISHED:
                canvas.drawBitmap(finishedImg, 0, 0, null);
                break;
        }

    }

    /**
     * 繪制下載中的view
     * @param canvas
     */
    private void drawDownloadingView(Canvas canvas) {
        //繪制灰色圓環
        canvas.drawCircle(mXCenter, mYCenter, mRadius - mStrokeWidth/2, mCirclePaint);

        //繪制進度扇形圓環
        RectF oval = new RectF();
        //設置橢圓上下左右的坐標
        oval.left = mXCenter - mRadius + mStrokeWidth/2;
        oval.top = mYCenter - mRadius + mStrokeWidth/2;
        oval.right = mXCenter + mRadius - mStrokeWidth/2;
        oval.bottom = mYCenter + mRadius - mStrokeWidth/2;
        canvas.drawArc(oval, -90, ((float)mProgress / mTotalProgress) * 360, false, mRingPaint);

        //繪制中間百分比文字
        String percentTxt = String.valueOf(mProgress);
        //計算文字垂直居中的baseline
        Paint.FontMetricsInt fontMetrics = mTxtPaint.getFontMetricsInt();
        float baseline = oval.top + (oval.bottom - oval.top - fontMetrics.bottom + fontMetrics.top) / 2 - fontMetrics.top;
        canvas.drawText(percentTxt, mXCenter, baseline, mTxtPaint);

    }

    /**
     * 繪制暫停時的view
     * @param canvas
     */
    private void drawPausedView(Canvas canvas) {
        //繪制灰色圓環
        canvas.drawCircle(mXCenter, mYCenter, mRadius - mStrokeWidth/2, mCirclePaint);

        //繪制進度扇形圓環
        RectF oval = new RectF();
        //設置橢圓上下左右的坐標
        oval.left = mXCenter - mRadius + mStrokeWidth/2;
        oval.top = mYCenter - mRadius + mStrokeWidth/2;
        oval.right = mXCenter + mRadius - mStrokeWidth/2;
        oval.bottom = mYCenter + mRadius - mStrokeWidth/2;
        canvas.drawArc(oval, -90, ((float) mProgress / mTotalProgress) * 360, false, mRingPaint);

        //繪制中間暫停圖標
        canvas.drawBitmap(mPausedImg, 0, 0, null);
    }

    /**
     * 更新進度
     * @param progress
     */
    public void setProgress(int progress) {
        mProgress = progress;
        postInvalidate();
    }

    /**
     * 設置下載狀態
     * @param status
     */
    public void setStatus(int status) {
        this.mStatus = status;
        postInvalidate();
    }

    /**
     * 獲取下載狀態
     * @return
     */
    public int getStatus() {
        return mStatus;
    }

    public static Bitmap big(Bitmap b,float x,float y)
    {
        int w=b.getWidth();
        int h=b.getHeight();
        float sx=(float)x/w;
        float sy=(float)y/h;
        Matrix matrix = new Matrix();
        matrix.postScale(sx, sy); // 長和寬放大縮小的比例
        Bitmap resizeBmp = Bitmap.createBitmap(b, 0, 0, w,
                h, matrix, true);
        return resizeBmp;
    }

}

2、自定義屬性

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

    <declare-styleable name="DownloadPercentView">
        <attr name="radius" format="dimension"/>
        <attr name="notBeginImg" format="string"/>
        <attr name="waitImg" format="string"/>
        <attr name="pausedImg" format="string"/>
        <attr name="finishedImg" format="string"/>
        <attr name="strokeWidth" format="dimension"/>
        <attr name="circleColor" format="color"/>
        <attr name="ringColor" format="color"/>
    </declare-styleable>
    
</resources>

3、使用自定義布局

　　首先在布局文件中引用：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <com.bbk.lling.downloadpercentdemo.DownloadPercentView
        android:id="@+id/downloadView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        custom:notBeginImg="@drawable/ic_no_download"
        custom:waitImg="@drawable/ic_wait"
        custom:pausedImg="@drawable/ic_pause"
        custom:finishedImg="@drawable/ic_finished"
        custom:strokeWidth="2dp"
        custom:circleColor="#bdbdbd"
        custom:radius="18dp"
        custom:ringColor="#52ce90"/>

</RelativeLayout>

 

　　然后我這里在Activity使用一個線程來模擬下載過程來演示：

package com.bbk.lling.downloadpercentdemo;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.View;


public class MainActivity extends Activity {

    public final static int MSG_UPDATE = 1;
    public final static int MSG_FINISHED = 2;

    private DownloadPercentView mDownloadPercentView;
    private int mDownloadProgress = 0;
    private Handler mHandler = new InnerHandler();
    private boolean downloading = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mDownloadPercentView = (DownloadPercentView) findViewById(R.id.downloadView);
        mDownloadPercentView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(mDownloadPercentView.getStatus() == DownloadPercentView.STATUS_PEDDING
                        || mDownloadPercentView.getStatus() == DownloadPercentView.STATUS_PAUSED) {
                    downloading = true;
                    mDownloadPercentView.setStatus(DownloadPercentView.STATUS_DOWNLOADING);
                    //模擬下載
                    new Thread(new Runnable() {
                        @Override
                        public void run() {
                            while (downloading) {
                                if(mDownloadProgress == 100) {
                                    mHandler.sendEmptyMessage(MSG_FINISHED);
                                    return;
                                }
                                mDownloadProgress += 1;
                                mHandler.sendEmptyMessage(MSG_UPDATE);
                                try{
                                    Thread.sleep(100);
                                } catch (Exception e) {
                                }

                            }
                        }
                    }).start();
                } else if(mDownloadPercentView.getStatus() == DownloadPercentView.STATUS_DOWNLOADING){
                    downloading = false;
                    mDownloadPercentView.setStatus(DownloadPercentView.STATUS_PAUSED);
                }
            }
        });
    }

    class InnerHandler extends Handler {
        @Override
        public void handleMessage(Message msg) {
            switch (msg.what) {
                case MSG_FINISHED:
                    mDownloadPercentView.setStatus(DownloadPercentView.STATUS_FINISHED);
                    break;
                case MSG_UPDATE:
                    mDownloadPercentView.setProgress(mDownloadProgress);
                    break;
            }
            super.handleMessage(msg);
        }
    }


}

 

源碼下載：https://github.com/liuling07/DownloadPercentDemo