ProgressBar进度条

# 1. ProgressBar进度条

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

常用属性详解：

android:max	进度条的最大值
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)：设置不确定模式下

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <!-- 系统提供的圆形进度条,依次是大中小 -->

    <ProgressBar
        style="@android:style/Widget.ProgressBar.Small"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <ProgressBar
        style="@android:style/Widget.ProgressBar.Large"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <!--系统提供的水平进度条-->
    <ProgressBar
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:progress="18" />

    <ProgressBar
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:indeterminate="true" />

</LinearLayout>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

# 1.1 动画来替代圆形进度条

使用一套连续图片，形成一个帧动画，当需要进度图的时候，让动画可见，不需要的时候让动画不可见即可！

🔗进度条素材图片 (opens new window)

定义一个AnimationDrawable文件：在drawable目录下新建一个amin_pgbar.xml的资源文件：

<?xml version="1.0" encoding="utf-8"?>  
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"  
    android:oneshot="false" >  
  
    <item  
        android:drawable="@drawable/loading_01"  
        android:duration="200"/>  
    <item  
        android:drawable="@drawable/loading_02"  
        android:duration="200"/>  
    <item  
        android:drawable="@drawable/loading_03"  
        android:duration="200"/>  
    <item  
        android:drawable="@drawable/loading_04"  
        android:duration="200"/>  
    <item  
        android:drawable="@drawable/loading_05"  
        android:duration="200"/>  
    <item  
        android:drawable="@drawable/loading_06"  
        android:duration="200"/>  
    <item  
        android:drawable="@drawable/loading_07"  
        android:duration="200"/>  
    <item  
        android:drawable="@drawable/loading_08"  
        android:duration="200"/>  
    <item  
        android:drawable="@drawable/loading_09"  
        android:duration="200"/>  
    <item  
        android:drawable="@drawable/loading_10"  
        android:duration="200"/>  
    <item  
        android:drawable="@drawable/loading_11"  
        android:duration="200"/>  
    <item  
        android:drawable="@drawable/loading_12"  
        android:duration="200"/>  
  
</animation-list>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

# 1.2 简单自定义Processbar

样式style

<ProgressBar
    style="@style/Widget.AppCompat.ProgressBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:max="100"/>

1
2
3
4
5

系统是默认样式有

style="@style/Widget.AppCompat.ProgressBar"圆形进度

style="@style/Widget.AppCompat.ProgressBar.Horizontal"水平进度条

在res/values/styles里边新建

 <style name="update_progress_horizontal" parent="Widget.AppCompat.ProgressBar.Horizontal">
    <item name="android:indeterminateOnly">false</item>
    <!--进度条的进度颜色drawable文件-->
    <item name="android:progressDrawable">@drawable/progress_indeterminate_horizontal</item>
    <!--进度条的最小高度-->
    <item name="android:minHeight">17dp</item>
    <!--进度条的最大高度-->
    <item name="android:maxHeight">17dp</item>
</style>

1
2
3
4
5
6
7
8
9

然后再ProgressBar中引用我们自定义的样式就可以了。

  <ProgressBar
  style="@style/update_progress_horizontal"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:max="100"/>

1
2
3
4
5

update_progress_horizontal其中的android:progressDrawable我们可以自己定义进度条的颜色。

在res/drawable下新建progress_indeterminate_horizontal文件（layer-list类型的）

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!--未加载的进度区域-->
<item android:id="@android:id/background">
    <shape>
        <!--进度条的圆角-->
        <corners android:radius="15dip" />
        <!--未加载的进度区域颜色-->
        <solid android:color="#FFDBDBDB"/>
    </shape>
</item>
<!--缓冲的进度的颜色，一般视频播放的缓冲区域-->
<item android:id="@android:id/secondaryProgress">
    <clip>
        <shape>
            <!--进度条的圆角-->
            <corners android:radius="15dip" />
            <!--缓冲的进度的颜色，一般视频播放的缓冲进度-->
            <solid android:color="#80C07AB8"/>
        </shape>
    </clip>
</item>
<!--已经加载完的进度的区域-->
<item android:id="@android:id/progress">
    <clip>
        <shape>
            <!--进度条的圆角-->
            <corners android:radius="15dip" />
            <!--已经加载完的进度的颜色-->
            <solid android:color="#FF706EB3"/>
        </shape>
    </clip>
</item>
</layer-list>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# 2. 复杂自定义ProgressBar

开源控件

lzyzsd (opens new window) / CircleProgress (opens new window)

EthanCo (opens new window) / CircleProgress (opens new window)

编辑

上次更新: 2021/09/05, 15:01:20

← 加载ImageView SeekBar拖动条→