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

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">
  7. <!-- 系统提供的圆形进度条,依次是大中小 -->
  8. <ProgressBar
  9. style="@android:style/Widget.ProgressBar.Small"
  10. android:layout_width="wrap_content"
  11. android:layout_height="wrap_content" />
  12. <ProgressBar
  13. android:layout_width="wrap_content"
  14. android:layout_height="wrap_content" />
  15. <ProgressBar
  16. style="@android:style/Widget.ProgressBar.Large"
  17. android:layout_width="wrap_content"
  18. android:layout_height="wrap_content" />
  19. <!--系统提供的水平进度条-->
  20. <ProgressBar
  21. style="@android:style/Widget.ProgressBar.Horizontal"
  22. android:layout_width="match_parent"
  23. android:layout_height="wrap_content"
  24. android:max="100"
  25. android:progress="18" />
  26. <ProgressBar
  27. style="@android:style/Widget.ProgressBar.Horizontal"
  28. android:layout_width="match_parent"
  29. android:layout_height="wrap_content"
  30. android:layout_marginTop="10dp"
  31. android:indeterminate="true" />
  32. </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" >
  4. <item
  5. android:drawable="@drawable/loading_01"
  6. android:duration="200"/>
  7. <item
  8. android:drawable="@drawable/loading_02"
  9. android:duration="200"/>
  10. <item
  11. android:drawable="@drawable/loading_03"
  12. android:duration="200"/>
  13. <item
  14. android:drawable="@drawable/loading_04"
  15. android:duration="200"/>
  16. <item
  17. android:drawable="@drawable/loading_05"
  18. android:duration="200"/>
  19. <item
  20. android:drawable="@drawable/loading_06"
  21. android:duration="200"/>
  22. <item
  23. android:drawable="@drawable/loading_07"
  24. android:duration="200"/>
  25. <item
  26. android:drawable="@drawable/loading_08"
  27. android:duration="200"/>
  28. <item
  29. android:drawable="@drawable/loading_09"
  30. android:duration="200"/>
  31. <item
  32. android:drawable="@drawable/loading_10"
  33. android:duration="200"/>
  34. <item
  35. android:drawable="@drawable/loading_11"
  36. android:duration="200"/>
  37. <item
  38. android:drawable="@drawable/loading_12"
  39. android:duration="200"/>
  40. </animation-list>

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

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

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


3.自定义圆形进度条

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

运行效果图:

实现代码:

自定义View类:

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

然后在布局文件中加上:

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

就是这么简单~


本节小结:

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

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