—— 如果你有个梦想，就必须捍卫它。 ——当幸福来敲门
上一篇我们讲了图片控件ImageView的基本用法，这里来学习进度条控件ProgressBar的基本用法。
ProgreeBar是什么
ProgressBar进度条控件，如数据加载中、下载进度显示、视频播放进度显示等等。ProgressBar有两种形态，一种是圆形的，常用来显示如数据加载中等待状态，另一种是水平线性的，常用来表示为如下载进度、视频播放进度等。
ProgreeBar有什么用
用来显示数据加载中、下载进度、视频播放进度等。
ProgreeBar怎么用
继续基于上一篇的项目，我们增加几个进度条Progressbar：
| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 | <?``xml version``=``"1.0" encoding``=``"utf-8"``?>``<``androidx.constraintlayout.widget.ConstraintLayout xmlns:android``=``"http://schemas.android.com/apk/res/android"`` ``xmlns:app``=``"http://schemas.android.com/apk/res-auto"`` ``xmlns:tools``=``"http://schemas.android.com/tools"`` ``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: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" />`` ``<``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``> |
|---|
可以看到图中最下面的进度条有四种状态，从上到下四种进度条分别为：
第一种圆形进度条：
| 1234567 | <``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”：表示进度条的风格采用系统默认圆形进度条样式，实际的效果是，圆形进度条会自动转圈圈的，类似加载中的效果。
第二种默认样式水平进度条：
| 12345678 | <``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" /> |
|---|
| 12 | style="@style/Widget.AppCompat.ProgressBar.Horizontal"：表示进度条的风格采用系统默认水平进度条样式。``android:progress="20"：表示进度条的进度显示到20%，进度条默认最大值100。 |
|---|
第三种自定义进度条颜色：
| 12345678910 | <``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文件如下（里面具体的配置暂时不详细说明，到后续篇章会详细讲到）：
| 123456789101112131415 | <?``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``>`` ``<``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``> |
|---|
第四种带第二进度的进度：
第二进度的效果就是在线看电影时进度条除了显示当前观看的进度，还会显示一个已缓冲的进度，这个就是第二进度，本文中的带第二进度的进度条：
| 1234567891011 | <``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文件如下：
| 12345678910111213141516171819202122 | <?``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``>`` ``<``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``> |
|---|
