Android开发-使用自定义View实现loading效果

最新推荐文章于 2021-12-09 20:26:51 发布

daditao

最新推荐文章于 2021-12-09 20:26:51 发布

阅读量1.5k

点赞数

分类专栏： Android精华

Android精华专栏收录该内容

42 篇文章 0 订阅

订阅专栏

http://www.hello-code.com/blog/android/201510/5545.html

今天给大家提供一个 Android开发中常用的下载loading效果实例。

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

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

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

实现代码：

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 }