—— 如果你有个梦想，就必须捍卫它。 ——当幸福来敲门
上一篇我们讲了图片控件ImageView的基本用法，这里来学习进度条控件ProgressBar的基本用法。
ProgreeBar是什么
ProgressBar进度条控件，如数据加载中、下载进度显示、视频播放进度显示等等。ProgressBar有两种形态，一种是圆形的，常用来显示如数据加载中等待状态，另一种是水平线性的，常用来表示为如下载进度、视频播放进度等。
ProgreeBar有什么用
用来显示数据加载中、下载进度、视频播放进度等。
ProgreeBar怎么用
继续基于上一篇的项目，我们增加几个进度条Progressbar：
|
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".TestActivity"> <ScrollView android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.0"> <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintTop_toTopOf="parent"> … <ProgressBar android:id="@+id/progress_circular" style="@style/Widget.AppCompat.ProgressBar" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintStart_toStartOf="@+id/tv9" app:layout_constraintTop_toBottomOf="@+id/tv9" /> <ProgressBar android:id="@+id/progress_horizontal" style="@style/Widget.AppCompat.ProgressBar.Horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:progress="20" app:layout_constraintStart_toStartOf="@+id/progress_circular" app:layout_constraintTop_toBottomOf="@+id/progress_circular" /> <ProgressBar android:id="@+id/progress_horizontal2" style="@style/Widget.AppCompat.ProgressBar.Horizontal" android:layout_width="match_parent" android:layout_height="4dp" android:progress="40" app:layout_constraintStart_toStartOf="@+id/progress_horizontal" app:layout_constraintTop_toBottomOf="@+id/progress_horizontal" /> <ProgressBar android:id="@+id/progress_horizontal3" style="@style/Widget.AppCompat.ProgressBar.Horizontal" android:layout_width="match_parent" android:layout_height="4dp" android:layout_marginTop="6dp" android:progress="40" android:secondaryProgress="45" android:progressDrawable="@drawable/layer_list_progressbar" app:layout_constraintStart_toStartOf="@+id/progress_horizontal2" app:layout_constraintTop_toBottomOf="@+id/progress_horizontal2" /> </androidx.constraintlayout.widget.ConstraintLayout> </ScrollView></androidx.constraintlayout.widget.ConstraintLayout> |
可以看到图中最下面的进度条有四种状态，从上到下四种进度条分别为：
第一种圆形进度条：
|
1
2
3
4
5
6
7
|
<ProgressBar android:id="@+id/progress_circular" style="@style/Widget.AppCompat.ProgressBar" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintStart_toStartOf="@+id/tv9" app:layout_constraintTop_toBottomOf="@+id/tv9" /> |
style="@style/Widget.AppCompat.ProgressBar"：表示进度条的风格采用系统默认圆形进度条样式，实际的效果是，圆形进度条会自动转圈圈的，类似加载中的效果。
第二种默认样式水平进度条：
|
1
2
3
4
5
6
7
8
|
<ProgressBar android:id="@+id/progress_horizontal" style="@style/Widget.AppCompat.ProgressBar.Horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:progress="20" app:layout_constraintStart_toStartOf="@+id/progress_circular" app:layout_constraintTop_toBottomOf="@+id/progress_circular" /> |
|
1
2
|
style="@style/Widget.AppCompat.ProgressBar.Horizontal"：表示进度条的风格采用系统默认水平进度条样式。android:progress="20"：表示进度条的进度显示到20%，进度条默认最大值100。 |
第三种自定义进度条颜色：
|
1
2
3
4
5
6
7
8
9
10
|
<ProgressBar android:id="@+id/progress_horizontal2" style="@style/Widget.AppCompat.ProgressBar.Horizontal" android:layout_width="match_parent" android:layout_height="4dp" android:max="100" android:progress="40" android:progressDrawable="@drawable/layer_list_progressbar" app:layout_constraintStart_toStartOf="@+id/progress_horizontal" app:layout_constraintTop_toBottomOf="@+id/progress_horizontal" /> |
android:progressDrawable="@drawable/layer_list_progressbar"：表示使用shape xml的方式设置进度条的颜色，xml文件如下（里面具体的配置暂时不详细说明，到后续篇章会详细讲到）：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<?xml version="1.0" encoding="utf-8"?> <item android:id="@android:id/background"> <shape> <solid android:color="#ffffff" /> </shape> </item> <item android:id="@android:id/progress"> <clip> <shape> <solid android:color="@color/teal_700" /> </shape> </clip> </item></layer-list> |
第四种带第二进度的进度：
第二进度的效果就是在线看电影时进度条除了显示当前观看的进度，还会显示一个已缓冲的进度，这个就是第二进度，本文中的带第二进度的进度条：
|
1
2
3
4
5
6
7
8
9
10
11
|
<ProgressBar android:id="@+id/progress_horizontal3" style="@style/Widget.AppCompat.ProgressBar.Horizontal" android:layout_width="match_parent" android:layout_height="4dp" android:layout_marginTop="6dp" android:progress="40" android:secondaryProgress="45" android:progressDrawable="@drawable/layer_list_progressbar" app:layout_constraintStart_toStartOf="@+id/progress_horizontal2" app:layout_constraintTop_toBottomOf="@+id/progress_horizontal2" /> |
android:secondaryProgress="45"：表示第二进度的进度值。
android:progressDrawable="@drawable/layer_list_progressbar"：同样表示使用shape xml的方式设置第一和第二进度条的颜色，xml文件如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<?xml version="1.0" encoding="utf-8"?> <item android:id="@android:id/background"> <shape> <solid android:color="#ffffff" /> </shape> </item> <item android:id="@android:id/secondaryProgress"> <clip> <shape> <solid android:color="#01AF9F" /> </shape> </clip> </item> <item android:id="@android:id/progress"> <clip> <shape> <solid android:color="@color/teal_700" /> </shape> </clip> </item></layer-list> |
