一般有下载功能的应用都会有这样一个场景，需要一个图标来标识不同的状态。之前在公司的项目中写过一个，今天抽空来整理一下。
一般下载都会有这么几种状态：未开始、等待、正在下载、下载结束，当然有时候会有下载出错的状态。等待状态是指用户点击开始下载，但是线程池中没有空闲的线程来处理该次下载，所以状态为等待。
效果图：
这里我只是演示了一下下载和暂停的状态，其他状态没有演示，在代码中设置就可以了。
实现代码：
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 @Override 104 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 * 绘制下载中的view 129 * @param canvas 130 */ 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 //计算文字垂直居中的baseline 147 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 * 绘制暂停时的view 155 * @param canvas 156 */ 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 progress 177 */ 178 public void setProgress(int progress) { 179 mProgress = progress; 180 postInvalidate(); 181 } 182 183 /** 184 * 设置下载状态 185 * @param status 186 */ 187 public void setStatus(int status) { 188 this.mStatus = status; 189 postInvalidate(); 190 } 191 192 /** 193 * 获取下载状态 194 * @return 195 */ 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 }
2、自定义属性
1 <?xml version="1.0" encoding="utf-8"?> 2 <resources> 3 4 <declare-styleable name="DownloadPercentView"> 5 <attr name="radius" format="dimension"/> 6 <attr name="notBeginImg" format="string"/> 7 <attr name="waitImg" format="string"/> 8 <attr name="pausedImg" format="string"/> 9 <attr name="finishedImg" format="string"/> 10 <attr name="strokeWidth" format="dimension"/> 11 <attr name="circleColor" format="color"/> 12 <attr name="ringColor" format="color"/> 13 </declare-styleable> 14 15 </resources>
3、使用自定义布局
首先在布局文件中引用：
1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:custom="http://schemas.android.com/apk/res-auto" 3 xmlns:tools="http://schemas.android.com/tools" 4 android:layout_width="match_parent" 5 android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" 6 android:paddingRight="@dimen/activity_horizontal_margin" 7 android:paddingTop="@dimen/activity_vertical_margin" 8 android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"> 9 10 <com.bbk.lling.downloadpercentdemo.DownloadPercentView 11 android:id="@+id/downloadView" 12 android:layout_width="wrap_content" 13 android:layout_height="wrap_content" 14 android:layout_centerInParent="true" 15 custom:notBeginImg="@drawable/ic_no_download" 16 custom:waitImg="@drawable/ic_wait" 17 custom:pausedImg="@drawable/ic_pause" 18 custom:finishedImg="@drawable/ic_finished" 19 custom:strokeWidth="2dp" 20 custom:circleColor="#bdbdbd" 21 custom:radius="18dp" 22 custom:ringColor="#52ce90"/> 23 24 </RelativeLayout>
然后我这里在Activity使用一个线程来模拟下载过程来演示：
1 package com.bbk.lling.downloadpercentdemo; 2 3 import android.app.Activity; 4 import android.os.Bundle; 5 import android.os.Handler; 6 import android.os.Message; 7 import android.view.View; 8 9 10 public class MainActivity extends Activity { 11 12 public final static int MSG_UPDATE = 1; 13 public final static int MSG_FINISHED = 2; 14 15 private DownloadPercentView mDownloadPercentView; 16 private int mDownloadProgress = 0; 17 private Handler mHandler = new InnerHandler(); 18 private boolean downloading = false; 19 20 @Override 21 protected void onCreate(Bundle savedInstanceState) { 22 super.onCreate(savedInstanceState); 23 setContentView(R.layout.activity_main); 24 mDownloadPercentView = (DownloadPercentView) findViewById(R.id.downloadView); 25 mDownloadPercentView.setOnClickListener(new View.OnClickListener() { 26 @Override 27 public void onClick(View v) { 28 if(mDownloadPercentView.getStatus() == DownloadPercentView.STATUS_PEDDING 29 || mDownloadPercentView.getStatus() == DownloadPercentView.STATUS_PAUSED) { 30 downloading = true; 31 mDownloadPercentView.setStatus(DownloadPercentView.STATUS_DOWNLOADING); 32 //模拟下载 33 new Thread(new Runnable() { 34 @Override 35 public void run() { 36 while (downloading) { 37 if(mDownloadProgress == 100) { 38 mHandler.sendEmptyMessage(MSG_FINISHED); 39 return; 40 } 41 mDownloadProgress += 1; 42 mHandler.sendEmptyMessage(MSG_UPDATE); 43 try{ 44 Thread.sleep(100); 45 } catch (Exception e) { 46 } 47 48 } 49 } 50 }).start(); 51 } else if(mDownloadPercentView.getStatus() == DownloadPercentView.STATUS_DOWNLOADING){ 52 downloading = false; 53 mDownloadPercentView.setStatus(DownloadPercentView.STATUS_PAUSED); 54 } 55 } 56 }); 57 } 58 59 class InnerHandler extends Handler { 60 @Override 61 public void handleMessage(Message msg) { 62 switch (msg.what) { 63 case MSG_FINISHED: 64 mDownloadPercentView.setStatus(DownloadPercentView.STATUS_FINISHED); 65 break; 66 case MSG_UPDATE: 67 mDownloadPercentView.setProgress(mDownloadProgress); 68 break; 69 } 70 super.handleMessage(msg); 71 } 72 } 73 74 75 }