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