一. 简介

1
2
android.view.View
↳android.widget.ProgressBar

ProgressBar一般用于显示一个过程,例如数据加载过程,文件下载进度,音乐播放进度等。

ProgressBar有两种样式:

1
2
3
style="@style/Widget.AppCompat.ProgressBar"        //默认样式,圆形进度,旋转转圈,不显示具体的进度值,适用于界面加载

style="@style/Widget.AppCompat.ProgressBar.Horizontal" //横向带进度的进度条

二. 属性

1
2
3
4
5
6
7
8
9
10
11
style=""                    //样式,有两种值。
//默认的圆形:@style/Widget.AppCompat.ProgressBar
//横向进度:@style/Widget.AppCompat.ProgressBar.Horizontal

android:max="" //最大进度值

android:progress="" //当前进度值

android:secondaryProgress=""//第二进度的值,常用来作为进度值的背景或者缓存进度

android:progressDrawable="" //progress的样式

三. 自定义progressDrawable

1
2
//使用方式
android:progressDrawable="@drawable/progressbar_bg"
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
<!--drawable文件夹下面的progressbar_bg-->
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<!--设置背景颜色-->
<item android:id="@android:id/background"
android:drawable="@color/colorProgress"
/>

<!--设置缓冲条进度-->
<item android:id="@android:id/secondaryProgress">
<clip>
<shape>
<!--圆角-->
<corners android:radius="50dp"/>

<!--进度条渐变颜色的初值和结束值-->
<gradient
android:endColor="#D2D2B0"
android:startColor="#D2D2B0"
/>
</shape>
</clip>
</item>

<!--设置进度条颜色-->
<item android:id="@android:id/progress">
<clip>
<shape>
<!--圆角-->
<corners android:radius="50dp"/>

<!--进度条渐变颜色的初值和结束值-->
<gradient
android:endColor="#fff000"
android:startColor="#fff000"
/>
</shape>
</clip>
</item>

</layer-list>

四. demo

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
//activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".MainActivity"
android:orientation="vertical"
android:gravity="center">

<ProgressBar
style="@style/Widget.AppCompat.ProgressBar"
android:layout_width="200dp"
android:layout_height="40dp" />

<ProgressBar
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="200dp"
android:layout_height="40dp"
android:layout_marginTop="60dp"
android:max="100"
android:progress="80"
android:progressDrawable="@drawable/progressbar_bg1"
android:secondaryProgress="100" />

<ProgressBar
android:id="@+id/progress"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="200dp"
android:layout_height="40dp"
android:layout_marginTop="60dp"
android:max="100"
android:progress="80"
android:progressDrawable="@drawable/progressbar_bg2"
android:secondaryProgress="100" />
</LinearLayout>

//MainActivity
public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

ProgressBar progressBar = findViewById(R.id.progress);

progressBar.setSecondaryProgress(100);
progressBar.setMax(100);
progressBar.setProgress(50);
}
}
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
<!--drawable文件夹下面的progressbar_bg-->
<!--progressbar_bg1和progressbar_bg2的区别是@color/colorProgress的值不同
progressbar_bg1的是:#00ff00 绿色
progressbar_bg2的是:#00ffffff 透明白色
-->
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<!--设置背景颜色-->
<item android:id="@android:id/background"
android:drawable="@color/colorProgress"
/>

<!--设置缓冲条进度-->
<item android:id="@android:id/secondaryProgress">
<clip>
<shape>
<!--圆角-->
<corners android:radius="50dp"/>

<!--进度条渐变颜色的初值和结束值-->
<gradient
android:endColor="#D2D2B0"
android:startColor="#D2D2B0"
/>
</shape>
</clip>
</item>

<!--设置进度条颜色-->
<item android:id="@android:id/progress">
<clip>
<shape>
<!--圆角-->
<corners android:radius="50dp"/>

<!--进度条渐变颜色的初值和结束值-->
<gradient
android:endColor="#fff000"
android:startColor="#fff000"
/>
</shape>
</clip>
</item>

</layer-list>

运行效果:

五. 补充

1. 动态设置进度和进度条颜色

1
2
3
4
5
private void setProgress(int i, int color) {
ClipDrawable drawable = new ClipDrawable(new ColorDrawable(color), Gravity.LEFT, ClipDrawable.HORIZONTAL);
progress.setProgressDrawable(drawable);
progress.setProgress(i);
}

2. 竖起来

设置Rotation旋转就好或者自定义。

参考文章

Android开发之进度条ProgressBar

Android 实现圆角ProgressBar