[关闭]
@coder-pig 2015-08-05T13:21:51.000000Z 字数 6661 阅读 1811

Android基础入门教程——2.3.7 ProgressBar(进度条)

Android基础入门教程

本节引言：

本节给大家带来的是Android基本UI控件中的ProgressBar(进度条)，ProgressBar的应用场景很多，比如
用户登录时，后台在发请求，以及等待服务器返回信息，这个时候会用到进度条；或者当在进行一些比较
耗时的操作，需要等待一段较长的时间，这个时候如果没有提示，用户可能会以为程序Carsh或者手机死机
了，这样会大大降低用户体验，所以在需要进行耗时操作的地方，添加上进度条，让用户知道当前的程序
在执行中，也可以直观的告诉用户当前任务的执行进度等！使用进度条可以给我带来这样的便利！
好了，开始讲解本节内容~
对了，ProgressBar官方API文档：ProgressBar

1.常用属性讲解与基础实例

从官方文档，我们看到了这样一个类关系图：

ProgressBar继承与View类，直接子类有AbsSeekBar和ContentLoadingProgressBar，
其中AbsSeekBar的子类有SeekBar和RatingBar，可见这二者也是基于ProgressBar实现的

常用属性详解：

  • android:max：进度条的最大值
  • android:progress：进度条已完成进度值
  • android:progressDrawable：设置轨道对应的Drawable对象
  • android:indeterminate：如果设置成true，则进度条不精确显示进度
  • android:indeterminateDrawable：设置不显示进度的进度条的Drawable对象
  • android:indeterminateDuration：设置不精确显示进度的持续时间
  • android:secondaryProgress：二级进度条，类似于视频播放的一条是当前播放进度，一条是缓冲进度，前者通过progress属性进行设置！

对应的再Java中我们可调用下述方法：

  • getMax()：返回这个进度条的范围的上限
  • getProgress()：返回进度
  • getSecondaryProgress()：返回次要进度
  • incrementProgressBy(int diff)：指定增加的进度
  • isIndeterminate()：指示进度条是否在不确定模式下
  • setIndeterminate(boolean indeterminate)：设置不确定模式下

接下来来看看系统提供的默认的进度条的例子吧！

系统默认进度条使用实例：

运行效果图：

实现布局代码：

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:orientation="vertical"
  6.     tools:context=".MainActivity">
  8.     <!-- 系统提供的圆形进度条,依次是大中小 -->
  10.     <ProgressBar
  11.         style="@android:style/Widget.ProgressBar.Small"
  12.         android:layout_width="wrap_content"
  13.         android:layout_height="wrap_content" />
  15.     <ProgressBar
  16.         android:layout_width="wrap_content"
  17.         android:layout_height="wrap_content" />
  19.     <ProgressBar
  20.         style="@android:style/Widget.ProgressBar.Large"
  21.         android:layout_width="wrap_content"
  22.         android:layout_height="wrap_content" />
  24.     <!--系统提供的水平进度条-->
  25.     <ProgressBar
  26.         style="@android:style/Widget.ProgressBar.Horizontal"
  27.         android:layout_width="match_parent"
  28.         android:layout_height="wrap_content"
  29.         android:max="100"
  30.         android:progress="18" />
  32.     <ProgressBar
  33.         style="@android:style/Widget.ProgressBar.Horizontal"
  34.         android:layout_width="match_parent"
  35.         android:layout_height="wrap_content"
  36.         android:layout_marginTop="10dp"
  37.         android:indeterminate="true" />
  39. </LinearLayout>

好吧，除了第二个能看，其他的就算了...系统提供的肯定是满足不了我们的需求的！
下面我们就来讲解下实际开发中我们对进度条的处理！

2.使用动画来替代圆形进度条

第一个方案是，使用一套连续图片，形成一个帧动画，当需要进度图的时候，让动画可见，不需要
的时候让动画不可见即可！而这个动画，一般是使用AnimationDrawable来实现的！好的，我们来
定义一个AnimationDrawable文件：
PS:用到的图片素材：进度条图片素材打包.zip

运行效果图：

实现步骤：
在res目录下新建一个:anim文件件，然后创建amin_pgbar.xml的资源文件：

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <animation-list xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:oneshot="false" >  
  5.     <item  
  6.         android:drawable="@drawable/loading_01"  
  7.         android:duration="200"/>  
  8.     <item  
  9.         android:drawable="@drawable/loading_02"  
  10.         android:duration="200"/>  
  11.     <item  
  12.         android:drawable="@drawable/loading_03"  
  13.         android:duration="200"/>  
  14.     <item  
  15.         android:drawable="@drawable/loading_04"  
  16.         android:duration="200"/>  
  17.     <item  
  18.         android:drawable="@drawable/loading_05"  
  19.         android:duration="200"/>  
  20.     <item  
  21.         android:drawable="@drawable/loading_06"  
  22.         android:duration="200"/>  
  23.     <item  
  24.         android:drawable="@drawable/loading_07"  
  25.         android:duration="200"/>  
  26.     <item  
  27.         android:drawable="@drawable/loading_08"  
  28.         android:duration="200"/>  
  29.     <item  
  30.         android:drawable="@drawable/loading_09"  
  31.         android:duration="200"/>  
  32.     <item  
  33.         android:drawable="@drawable/loading_10"  
  34.         android:duration="200"/>  
  35.     <item  
  36.         android:drawable="@drawable/loading_11"  
  37.         android:duration="200"/>  
  38.     <item  
  39.         android:drawable="@drawable/loading_12"  
  40.         android:duration="200"/>  
  42. </animation-list>

接着写个布局文件，里面仅仅有一个ImageView即可，用于显示进度条，把src设置为上述drawable资源即可！
最后到MainActivity.java

  1. public class MainActivity extends AppCompatActivity {
  3.     private ImageView img_pgbar;
  4.     private AnimationDrawable ad;
  6.     @Override
  7.     protected void onCreate(Bundle savedInstanceState) {
  8.         super.onCreate(savedInstanceState);
  9.         setContentView(R.layout.activity_main);
  10.         img_pgbar = (ImageView) findViewById(R.id.img_pgbar);
  11.         ad = (AnimationDrawable) img_pgbar.getDrawable();
  12.         img_pgbar.postDelayed(new Runnable() {
  13.             @Override
  14.             public void run() {
  15.                 ad.start();
  16.             }
  17.         }, 100);
  18.     }
  20. }

这里只是写了如何启动动画，剩下的就你自己来了哦~在需要显示进度条的时候，让ImageView可见；
在不需要的时候让他隐藏即可！另外其实Progressbar本身有一个indeterminateDrawable，只需把
这个参数设置成上述的动画资源即可，但是进度条条的图案大小是不能直接修改的，需要Java代码中
修改，如果你设置了宽高，而且这个宽高过大的时候，你会看到有多个进度条...自己权衡下吧~

3.自定义圆形进度条

相信你看完2会吐槽，卧槽，这么坑爹，拿个动画来坑人，哈哈，实际开发中都这样，当然上述
这种情况只适用于不用显示进度的场合，如果要显示进度的场合就没用处了，好吧，接下来看下
网上一个简单的自定义圆形进度条！代码还是比较简单，容易理解，又兴趣可以看看，或者进行相关扩展~

运行效果图：

实现代码：

自定义View类：

  1. /**
  2.  * Created by Jay on 2015/8/5 0005.
  3.  */
  4. public class CirclePgBar extends View {
  7.     private Paint mBackPaint;
  8.     private Paint mFrontPaint;
  9.     private Paint mTextPaint;
  10.     private float mStrokeWidth = 50;
  11.     private float mHalfStrokeWidth = mStrokeWidth / 2;
  12.     private float mRadius = 200;
  13.     private RectF mRect;
  14.     private int mProgress = 0;
  15.     //目标值，想改多少就改多少
  16.     private int mTargetProgress = 90;
  17.     private int mMax = 100;
  18.     private int mWidth;
  19.     private int mHeight;
  22.     public CirclePgBar(Context context) {
  23.         super(context);
  24.         init();
  25.     }
  27.     public CirclePgBar(Context context, AttributeSet attrs) {
  28.         super(context, attrs);
  29.         init();
  30.     }
  32.     public CirclePgBar(Context context, AttributeSet attrs, int defStyleAttr) {
  33.         super(context, attrs, defStyleAttr);
  34.         init();
  35.     }
  38.     //完成相关参数初始化
  39.     private void init() {
  40.         mBackPaint = new Paint();
  41.         mBackPaint.setColor(Color.WHITE);
  42.         mBackPaint.setAntiAlias(true);
  43.         mBackPaint.setStyle(Paint.Style.STROKE);
  44.         mBackPaint.setStrokeWidth(mStrokeWidth);
  46.         mFrontPaint = new Paint();
  47.         mFrontPaint.setColor(Color.GREEN);
  48.         mFrontPaint.setAntiAlias(true);
  49.         mFrontPaint.setStyle(Paint.Style.STROKE);
  50.         mFrontPaint.setStrokeWidth(mStrokeWidth);
  53.         mTextPaint = new Paint();
  54.         mTextPaint.setColor(Color.GREEN);
  55.         mTextPaint.setAntiAlias(true);
  56.         mTextPaint.setTextSize(80);
  57.         mTextPaint.setTextAlign(Paint.Align.CENTER);
  58.     }
  61.     //重写测量大小的onMeasure方法和绘制View的核心方法onDraw()
  62.     @Override
  63.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  64.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  65.         mWidth = getRealSize(widthMeasureSpec);
  66.         mHeight = getRealSize(heightMeasureSpec);
  67.         setMeasuredDimension(mWidth, mHeight);
  69.     }
  72.     @Override
  73.     protected void onDraw(Canvas canvas) {
  74.         initRect();
  75.         float angle = mProgress / (float) mMax * 360;
  76.         canvas.drawCircle(mWidth / 2, mHeight / 2, mRadius, mBackPaint);
  77.         canvas.drawArc(mRect, -90, angle, false, mFrontPaint);
  78.         canvas.drawText(mProgress + "%", mWidth / 2 + mHalfStrokeWidth, mHeight / 2 + mHalfStrokeWidth, mTextPaint);
  79.         if (mProgress < mTargetProgress) {
  80.             mProgress += 1;
  81.             invalidate();
  82.         }
  84.     }
  86.     public int getRealSize(int measureSpec) {
  87.         int result = 1;
  88.         int mode = MeasureSpec.getMode(measureSpec);
  89.         int size = MeasureSpec.getSize(measureSpec);
  91.         if (mode == MeasureSpec.AT_MOST || mode == MeasureSpec.UNSPECIFIED) {
  92.             //自己计算
  93.             result = (int) (mRadius * 2 + mStrokeWidth);
  94.         } else {
  95.             result = size;
  96.         }
  98.         return result;
  99.     }
  101.     private void initRect() {
  102.         if (mRect == null) {
  103.             mRect = new RectF();
  104.             int viewSize = (int) (mRadius * 2);
  105.             int left = (mWidth - viewSize) / 2;
  106.             int top = (mHeight - viewSize) / 2;
  107.             int right = left + viewSize;
  108.             int bottom = top + viewSize;
  109.             mRect.set(left, top, right, bottom);
  110.         }
  111.     }
  114. }

然后在布局文件中加上：

  1.     <com.jay.progressbardemo.CirclePgBar
  2.         android:layout_width="match_parent"
  3.         android:layout_height="match_parent"/>

就是这么简单~

本节小结：

本节给大家介绍了Android中的常用控件：ProgressBar讲解了基本用法，以及实际开发中
对于进度条的两种实现方法，第二个自定义进度条可以自行完善，然后用到实际开发中~！
好的，本节就到这里，谢谢~

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注