五分了解Android Progress Bar进度条加载

忆拾易行

1、前言

最近在开发中，同事对于android.widget下的控件一知半解，又恰好那天用到了Seekbar，想了想，那就从Seekbar's father ProgressBar 来说说android.widget下的常用控件和常用用法吧。后面也会根据这些控件来进行仿写、扩展，做一些高度自定义的View啦。如果写的不好，或者有错误之处，恳请在评论、私信、邮箱指出，万分感谢🙏

2、ProgressBar

A user interface element that indicates the progress of an operation.
使用很简单,看看一些基本的属性

1. android:max：进度条的最大值android:progress：进度条已完成进度值android:progressDrawable：设置轨道对应的Drawable对象android:indeterminate：如果设置成true，则进度条不精确显示进度（会一直进行动画）android:indeterminateDrawable：设置不显示进度的进度条的Drawable对象android:indeterminateDuration：设置不精确显示进度的持续时间android:secondaryProgress：二级进度条（使用场景不多）

复制代码

直接在布局中使用即可

1.         <ProgressBar
   
2.             style="@android:style/Widget.ProgressBar.Small"
   
3.             android:layout_width="wrap_content"
   
4.             android:layout_height="wrap_content"
   
5.             android:layout_marginTop="10dp" />
   
6.         <ProgressBar
   
7.             android:layout_width="wrap_content"
   
8.             android:layout_height="wrap_content"
   
9.             android:layout_marginTop="10dp" />
   
10.         <ProgressBar
    
11.             style="@android:style/Widget.ProgressBar.Large"
    
12.             android:layout_width="wrap_content"
    
13.             android:layout_height="wrap_content"
    
14.             android:layout_marginTop="10dp" />
    
15.         <ProgressBar
    
16.             android:id="@+id/sb_no_beautiful"
    
17.             style="@android:style/Widget.ProgressBar.Horizontal"
    
18.             android:layout_width="match_parent"
    
19.             android:layout_height="wrap_content"
    
20.             android:layout_marginTop="10dp"
    
21.             android:max="100"
    
22.             android:progress="50"
    
23.             android:secondaryProgress="70" />
    
24.         <ProgressBar
    
25.             android:id="@+id/sb_no_beautiful2"
    
26.             style="@android:style/Widget.Holo.ProgressBar.Horizontal"
    
27.             android:layout_width="match_parent"
    
28.             android:layout_height="wrap_content"
    
29.             android:layout_marginTop="10dp"
    
30.             android:indeterminate="true"
    
31.             android:max="100"
    
32.             android:progress="50"
    
33.             android:secondaryProgress="70" />

复制代码

分别就对应以下图片咯

但是这种样式，不得不怀疑Google之前的审美，肯定是不满意的，怎么换样式呢。
看看XML文件，很容易发现，这几个ProgressBar的差异是因为style引起的，随手点开一个@android:style/Widget.ProgressBar.Horizontal 看看。

1.     <style name="Widget.ProgressBar.Horizontal">
   
2.         <item name="indeterminateOnly">false</item>
   
3.         <item name="progressDrawable">@drawable/progress_horizontal</item>
   
4.         <item name="indeterminateDrawable">@drawable/progress_indeterminate_horizontal</item>
   
5.         <item name="minHeight">20dip</item>
   
6.         <item name="maxHeight">20dip</item>
   
7.         <item name="mirrorForRtl">true</item>
   
8.     </style>

复制代码

很好，估摸着样式就出在progressDrawable/indeterminateDrawable上面，看看 @drawable/progress_horizontal 里面

1. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   
2.     <item android:id="@android:id/background">
   
3.         <shape>
   
4.             <corners android:radius="5dip" />
   
5.             <gradient
   
6.                     android:startColor="#ff9d9e9d"
   
7.                     android:centerColor="#ff5a5d5a"
   
8.                     android:centerY="0.75"
   
9.                     android:endColor="#ff747674"
   
10.                     android:angle="270"/>
    
11.         </shape>
    
12.     </item>
    
13.     <item android:id="@android:id/secondaryProgress">
    
14.         <clip>
    
15.             <shape>
    
16.                 <corners android:radius="5dip" />
    
17.                 <gradient
    
18.                         android:startColor="#80ffd300"
    
19.                         android:centerColor="#80ffb600"
    
20.                         android:centerY="0.75"
    
21.                         android:endColor="#a0ffcb00"
    
22.                         android:angle="270"/>
    
23.             </shape>
    
24.         </clip>
    
25.     </item>
    
26.     <item android:id="@android:id/progress">
    
27.         <clip>
    
28.             <shape>
    
29.                 <corners android:radius="5dip" />
    
30.                 <gradient
    
31.                         android:startColor="#ffffd300"
    
32.                         android:centerColor="#ffffb600"
    
33.                         android:centerY="0.75"
    
34.                         android:endColor="#ffffcb00"
    
35.                         android:angle="270"/>
    
36.             </shape>
    
37.         </clip>
    
38.     </item>
    
39. </layer-list>

复制代码

一个样式文件，分别操控了background/secondaryProgress/progress，这样我们很容易推测出

再看看 @drawable/progress_indeterminate_horizontal

1. <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
   
2.     <item android:drawable="@drawable/progressbar_indeterminate1" android:duration="200" />
   
3.     <item android:drawable="@drawable/progressbar_indeterminate2" android:duration="200" />
   
4.     <item android:drawable="@drawable/progressbar_indeterminate3" android:duration="200" />
   
5. </animation-list>

复制代码

显而易见，这是indeterminate模式下的样式啊，那我们仿写一个不同样式，就很简单了，动手。

1. styles.xml

复制代码

1. <style name="ProgressBar_Beautiful" >
   
2.     <item name="android:indeterminateOnly">false</item>
   
3.     <item name="android:progressDrawable">@drawable/progress_horizontal_1</item>
   
4.     <item name="android:indeterminateDrawable">@drawable/progress_indeterminate_beautiful</item>
   
5.     <item name="android:mirrorForRtl">true</item>
   
6. </style>

复制代码

1. progress_horizontal_1.xml

复制代码

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   
3.     <item android:id="@android:id/background">
   
4.         <shape>
   
5.             <corners android:radius="25dp" />
   
6.             <solid android:color="#FFF0F0F0"/>
   
7.         </shape>
   
8.     </item>
   
9.     <item android:id="@android:id/secondaryProgress">
   
10.         <clip>
    
11.             <shape>
    
12.                 <corners android:radius="25dp" />
    
13.                 <solid android:color="#FFC0EC87"/>
    
14.             </shape>
    
15.         </clip>
    
16.     </item>
    
17.     <item android:id="@android:id/progress">
    
18.         <clip>
    
19.             <shape>
    
20.                 <corners android:radius="25dp" />
    
21.                 <solid android:color="#FFA5E05B"/>
    
22.             </shape>
    
23.         </clip>
    
24.     </item>
    
25. </layer-list>

复制代码

1. progress_indeterminate_beautiful.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 android:drawable="@drawable/bg_progress_001" android:duration="200" />
   
5.     <item android:drawable="@drawable/bg_progress_002" android:duration="200" />
   
6.     <item android:drawable="@drawable/bg_progress_003" android:duration="200" />
   
7.     <item android:drawable="@drawable/bg_progress_004" android:duration="200" />
   
8. </animation-list>

复制代码

吭呲吭呲就写出来了，看看效果

换了个颜色，加了个圆角/ 换了个图片，还行。
我没有去再写环形的ProgressBar了，因为它就是个一个图，疯狂的在旋转。

1. <animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
   
2.     android:drawable="@drawable/spinner_white_76"
   
3.     android:pivotX="50%"
   
4.     android:pivotY="50%"
   
5.     android:framesCount="12"
   
6.     android:frameDuration="100" />

复制代码

还有一些属性我就不赘述了。你可以根据官方的样式，修一修、改一改，就可以满足一些基本的需求了。
用起来就这么简单，就是因为太简单，更复杂的功能就不是ProgressBar能直接实现的了。比如带个滑块？

3、SeekBar

好吧，ProgressBar的一个子类，也在android.widget下，因为是直接继承，而且就加了个滑块相关的代码，实际上它也非常简单，然我们来看看

1. <SeekBar
   
2.     android:id="@+id/sb_01"
   
3.     style="@style/ProgressBar_Beautiful"
   
4.     android:layout_width="match_parent"
   
5.     android:layout_height="20dp"
   
6.     android:layout_marginVertical="10dp"
   
7.     android:thumbOffset="1dp"
   
8.     android:max="100"
   
9.     android:progress="50"
   
10.     android:secondaryProgress="70"
    
11.     android:splitTrack="false"
    
12.     android:thumb="@drawable/icon_seekbar_thum" />
    
13. <SeekBar
    
14.     android:id="@+id/sb_02"
    
15.     style="@style/ProgressBar_Beautiful"
    
16.     android:layout_width="match_parent"
    
17.     android:layout_height="20dp"
    
18.     android:layout_marginVertical="10dp"
    
19.     android:max="100"
    
20.     android:progress="50"
    
21.     android:secondaryProgress="70"
    
22.     android:thumb="@drawable/icon_seekbar_thum" />
    
23. <SeekBar
    
24.     android:id="@+id/sb_03"
    
25.     style="@style/ProgressBar_Beautiful"
    
26.     android:layout_width="match_parent"
    
27.     android:layout_height="20dp"
    
28.     android:layout_marginVertical="10dp"
    
29.     android:max="100"
    
30.     android:progress="100"
    
31.     android:secondaryProgress="70"
    
32.     android:splitTrack="false"
    
33.     android:thumb="@drawable/icon_seekbar_thum" />
    
34. <SeekBar
    
35.     android:id="@+id/sb_04"
    
36.     style="@style/ProgressBar_Beautiful"
    
37.     android:layout_width="match_parent"
    
38.     android:layout_height="20dp"
    
39.     android:layout_marginVertical="10dp"
    
40.     android:thumbOffset="1dp"
    
41.     android:max="100"
    
42.     android:progress="100"
    
43.     android:secondaryProgress="70"
    
44.     android:splitTrack="false"
    
45.     android:thumb="@drawable/icon_seekbar_thum" />
    
46. <SeekBar
    
47.     android:id="@+id/sb_05"
    
48.     style="@style/ProgressBar_Beautiful"
    
49.     android:layout_width="match_parent"
    
50.     android:layout_height="20dp"
    
51.     android:layout_marginVertical="10dp"
    
52.     android:max="100"
    
53.     android:paddingHorizontal="0dp"
    
54.     android:progress="50"
    
55.     android:secondaryProgress="70"
    
56.     android:thumb="@drawable/icon_seekbar_thum" />
    
57. <SeekBar
    
58.     android:id="@+id/sb_06"
    
59.     style="@style/ProgressBar_Beautiful"
    
60.     android:layout_width="match_parent"
    
61.     android:layout_height="20dp"
    
62.     android:layout_marginVertical="10dp"
    
63.     android:max="100"
    
64.     android:progress="50"
    
65.     android:secondaryProgress="70"
    
66.     android:thumb="@null" />

复制代码

样式就在下面了

因为Seekbar相较而言就多了个thumb（就是那个滑块），所以就着重说一下滑块，其他的就一笔带过咯。
主要了解的是如何设置自己的thumb和thumb的各种问题

1. android:thumb="@drawable/icon_seekbar_thum"

复制代码

设置就这么thumb简单，一个drawable文件解决，我这里对应的是单一图片，不过Google的是带有多种状态的thumb，我们来看看官方是如何实现的

1. <selector xmlns:android="http://schemas.android.com/apk/res/android"
   
2.           android:constantSize="true">
   
3.     <item android:state_enabled="false" android:state_pressed="true">
   
4.         <bitmap android:src="@drawable/abc_scrubber_control_off_mtrl_alpha"android:gravity="center"/>
   
5.     </item>
   
6.     <item android:state_enabled="false">
   
7.         <bitmap android:src="@drawable/abc_scrubber_control_off_mtrl_alpha"android:gravity="center"/>
   
8.     </item>
   
9.     <item android:state_pressed="true">
   
10.         <bitmap android:src="@drawable/abc_scrubber_control_to_pressed_mtrl_005" android:gravity="center"/>
    
11.     </item>
    
12.     <item>
    
13.         <bitmap android:src="@drawable/abc_scrubber_control_to_pressed_mtrl_000"android:gravity="center"/>
    
14.     </item>
    
15. </selector>

复制代码

引用一个drawable，也是一个熟知的selector组，通过对应的item，我们就可以实现在不同的状态下显示不同的thumb了，具体的样式我就不写了，再说ProgressBar的样式的时候也是有类似的操作的
不过你可能发现了，其实这几个样式看起来都差不多，是因为都是我使用Seekbar遇到的问题以及解决方法，我们细说
(1) 自定义的thumb的背景会裁剪出一个正方形，这对于不规则图形来讲是非常难看的

很简单一行

1. android:splitTrack="false"

复制代码

修复0。0
(2)thumb的中心点对齐bar的边界，所以thumb是允许超出进度条一点的。有时候我们不需要

很简单一行

1. android:thumbOffset="1dp"

复制代码

修复0，0
(3) 你可能发现就算没有写margin和padding，seekbar也不会占满父布局的，是因为它自带padding，所以如果需要去掉

很简单一行

1. android:paddingHorizontal="0dp"

复制代码

修复0>0
(4)最后一个，SeekBar但是不想要滑块！为什么不用ProgressBar呢？没别的就是头铁！
很简单一行

1. android:thumb="@null"

复制代码

修复0」0
但是要注意的是，此时Seekbar还是能点击的！所以需要把点击事件拦截掉

1. sb02.setOnTouchListener { _, _ -> true }

复制代码

真的修复0[]0
好了好了，thumb的监听事件还没说呢

1.             sb01.setOnSeekBarChangeListener(object : OnSeekBarChangeListener {
   
2.                 override fun onProgressChanged(p0: SeekBar?, p1: Int, p2: Boolean) {
   
3.                     //进度发生改变时会触发
   
4.                 }
   
5.                 override fun onStartTrackingTouch(p0: SeekBar?) {
   
6.                     //按住SeekBar时会触发
   
7.                 }
   
8.                 override fun onStopTrackingTouch(p0: SeekBar?) {
   
9.                     //放开SeekBar时触发
   
10.                 }
    
11.             })

复制代码

没啦，Seekbar就这么多。
还有一个，放在下次讲吧
对了，如果你感觉你的ProgressBar不够流畅，可以用以下这个

1. bar.setProgress(progress, true)

复制代码

4、结尾

更多复杂的进度条需求，靠widget的控件，肯定是难以实现的，我们接下来会讲述RatingBar，以及继承ProgressBar，做更多好看的进度条！
以上就是五分了解Android Progress Bar进度条加载的详细内容，更多关于Android Progress Bar的资料请关注晓枫资讯其它相关文章！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！