Android中使用自定义View实现下载进度的显示

　　一般有下载功能的应用都会有这样一个场景，需要一个图标来标识不同的状态。之前在公司的项目中写过一个，今天抽空来整理一下。

　　一般下载都会有这么几种状态：未开始、等待、正在下载、下载结束，当然有时候会有下载出错的状态。等待状态是指用户点击开始下载，但是线程池中没有空闲的线程来处理该次下载，所以状态为等待。

效果图：

　　这里我只是演示了一下下载和暂停的状态，其他状态没有演示，在代码中设置就可以了。

实现代码：

1、自定义View

 1 public class DownloadPercentView extends View { 2  3   public final static int STATUS_PEDDING = 1; 4   public final static int STATUS_WAITING = 2; 5   public final static int STATUS_DOWNLOADING = 3; 6   public final static int STATUS_PAUSED = 4; 7   public final static int STATUS_FINISHED = 5; 8  9   // 画实心圆的画笔 10   private Paint mCirclePaint; 11   // 画圆环的画笔 12   private Paint mRingPaint; 13   // 绘制进度文字的画笔 14   private Paint mTxtPaint; 15   // 圆形颜色 16   private int mCircleColor; 17   // 圆环颜色 18   private int mRingColor; 19   // 半径 20   private int mRadius; 21   // 圆环宽度 22   private int mStrokeWidth = 2; 23   // 圆心x坐标 24   private int mXCenter; 25   // 圆心y坐标 26   private int mYCenter; 27   // 总进度 28   private int mTotalProgress = 100; 29   // 当前进度 30   private int mProgress; 31   //下载状态 32   private int mStatus = 1; 33  34   //默认显示的图片 35   private Bitmap mNotBeginImg; 36   //暂停时中间显示的图片 37   private Bitmap mPausedImg; 38   //等待时显示的图片 39   private Bitmap mWatiImg; 40   //下载完成时显示的图片 41   private Bitmap finishedImg; 42  43  44  45   public DownloadPercentView(Context context, AttributeSet attrs) { 46     super(context, attrs); 47     // 获取自定义的属性 48     initAttrs(context, attrs); 49     initVariable(); 50   } 51  52   private void initAttrs(Context context, AttributeSet attrs) { 53     TypedArray typeArray = context.getTheme().obtainStyledAttributes(attrs, 54         R.styleable.DownloadPercentView, 0, 0); 55     mRadius = (int)typeArray.getDimension(R.styleable.DownloadPercentView_radius, 100); 56     mNotBeginImg = ((BitmapDrawable)typeArray.getDrawable(R.styleable.DownloadPercentView_notBeginImg)).getBitmap(); 57     mPausedImg = ((BitmapDrawable)typeArray.getDrawable(R.styleable.DownloadPercentView_pausedImg)).getBitmap(); 58     mWatiImg = ((BitmapDrawable)typeArray.getDrawable(R.styleable.DownloadPercentView_waitImg)).getBitmap(); 59     finishedImg = ((BitmapDrawable)typeArray.getDrawable(R.styleable.DownloadPercentView_finishedImg)).getBitmap(); 60  61     mNotBeginImg = big(mNotBeginImg, mRadius * 2, mRadius * 2); 62     mPausedImg = big(mPausedImg, mRadius * 2, mRadius * 2); 63     mWatiImg = big(mWatiImg, mRadius * 2, mRadius * 2); 64     finishedImg = big(finishedImg, mRadius * 2, mRadius * 2); 65  66     mStrokeWidth = (int)typeArray.getDimension(R.styleable.DownloadPercentView_strokeWidth, 2); 67  68 //    mRadius = Math.max(mNotBeginImg.getWidth()/2, mNotBeginImg.getHeight()/2) + mStrokeWidth; 69     mCircleColor = typeArray.getColor(R.styleable.DownloadPercentView_circleColor, 0xFFFFFFFF); 70     mRingColor = typeArray.getColor(R.styleable.DownloadPercentView_ringColor, 0xFFFFFFFF); 71   } 72  73   private void initVariable() { 74     //初始化绘制灰色圆的画笔 75     mCirclePaint = new Paint(); 76     mCirclePaint.setAntiAlias(true); 77     mCirclePaint.setColor(mCircleColor); 78     mCirclePaint.setStyle(Paint.Style.STROKE); 79     mCirclePaint.setStrokeWidth(mStrokeWidth); 80  81     //初始化绘制圆弧的画笔 82     mRingPaint = new Paint(); 83     mRingPaint.setAntiAlias(true); 84     mRingPaint.setColor(mRingColor); 85     mRingPaint.setStyle(Paint.Style.STROKE); 86     mRingPaint.setStrokeWidth(mStrokeWidth); 87  88     //初始化绘制文字的画笔 89     mTxtPaint = new Paint(); 90     mTxtPaint.setAntiAlias(true); 91     mTxtPaint.setColor(Color.parseColor("#52ce90")); 92     mTxtPaint.setTextAlign(Paint.Align.CENTER); 93     mTxtPaint.setTextSize(24); 94  95   } 96  97   @Override 98   protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 99     int width = (int)Math.ceil(mRadius) * 2;100     setMeasuredDimension(width, width);101   }102   103   @Override104   protected void onDraw(Canvas canvas) {105     mXCenter = getWidth() / 2;106     mYCenter = getHeight() / 2;107     switch (mStatus) {108       case STATUS_PEDDING:109         canvas.drawBitmap(mNotBeginImg, 0, 0, null);110         break;111       case STATUS_WAITING:112         canvas.drawBitmap(mWatiImg, 0, 0, null);113         break;114       case STATUS_DOWNLOADING:115         drawDownloadingView(canvas);116         break;117       case STATUS_PAUSED:118         drawPausedView(canvas);119         break;120       case STATUS_FINISHED:121         canvas.drawBitmap(finishedImg, 0, 0, null);122         break;123     }124 125   }126 127   /**128    * 绘制下载中的view129    * @param canvas130   */131   private void drawDownloadingView(Canvas canvas) {132     //绘制灰色圆环133     canvas.drawCircle(mXCenter, mYCenter, mRadius - mStrokeWidth/2, mCirclePaint);134 135     //绘制进度扇形圆环136     RectF oval = new RectF();137     //设置椭圆上下左右的坐标138     oval.left = mXCenter - mRadius + mStrokeWidth/2;139     oval.top = mYCenter - mRadius + mStrokeWidth/2;140     oval.right = mXCenter + mRadius - mStrokeWidth/2;141     oval.bottom = mYCenter + mRadius - mStrokeWidth/2;142     canvas.drawArc(oval, -90, ((float)mProgress / mTotalProgress) * 360, false, mRingPaint);143 144     //绘制中间百分比文字145     String percentTxt = String.valueOf(mProgress);146     //计算文字垂直居中的baseline147     Paint.FontMetricsInt fontMetrics = mTxtPaint.getFontMetricsInt();148     float baseline = oval.top + (oval.bottom - oval.top - fontMetrics.bottom + fontMetrics.top) / 2 - fontMetrics.top;149     canvas.drawText(percentTxt, mXCenter, baseline, mTxtPaint);150 151   }152 153   /**154    * 绘制暂停时的view155    * @param canvas156   */157   private void drawPausedView(Canvas canvas) {158     //绘制灰色圆环159     canvas.drawCircle(mXCenter, mYCenter, mRadius - mStrokeWidth/2, mCirclePaint);160 161     //绘制进度扇形圆环162     RectF oval = new RectF();163     //设置椭圆上下左右的坐标164     oval.left = mXCenter - mRadius + mStrokeWidth/2;165     oval.top = mYCenter - mRadius + mStrokeWidth/2;166     oval.right = mXCenter + mRadius - mStrokeWidth/2;167     oval.bottom = mYCenter + mRadius - mStrokeWidth/2;168     canvas.drawArc(oval, -90, ((float) mProgress / mTotalProgress) * 360, false, mRingPaint);169 170     //绘制中间暂停图标171     canvas.drawBitmap(mPausedImg, 0, 0, null);172   }173 174   /**175    * 更新进度176    * @param progress177   */178   public void setProgress(int progress) {179     mProgress = progress;180     postInvalidate();181   }182 183   /**184    * 设置下载状态185    * @param status186   */187   public void setStatus(int status) {188     this.mStatus = status;189     postInvalidate();190   }191 192   /**193    * 获取下载状态194    * @return195   */196   public int getStatus() {197     return mStatus;198   }199 200   public static Bitmap big(Bitmap b,float x,float y)201   {202     int w=b.getWidth();203     int h=b.getHeight();204     float sx=(float)x/w;205     float sy=(float)y/h;206     Matrix matrix = new Matrix();207     matrix.postScale(sx, sy); // 长和宽放大缩小的比例208     Bitmap resizeBmp = Bitmap.createBitmap(b, 0, 0, w,209         h, matrix, true);210     return resizeBmp;211   }212 213 }

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：Android中使用自定义View实现下载进度的显示

关键词：Android