ProgressBar,即进度条,是常用的界面控件之一,其作用是展示操作进度。不同于其他控件直接可视化数据或功能,进度条更能提高用户体验,帮助用户更直观地了解操作进度和剩余时间。因此,进度条应用广泛,如文件上传、下载、软件安装和游戏等。但是,大部分的进度条都是系统自带的,单调、无个性,使得UI界面缺乏美感。因此,添加自定义的ProgressBar变得非常重要,它增加了用户界面的可视性和可读性,同时突出了应用程序的个性化。
本文主要介绍如何添加自定义的ProgressBar,帮助您尽可能简单容易地实现相关功能。
一、进度条概述
进度条一般由两部分组成:背景和滑块。背景通常是长方形的,滑块是在背景上滑动以显示进度的区域。ProgressBar会根据项目处理的进度,从0%到100%之间的某个值进行设置,以及动画效果使进度从左到右或上到下向滑块移动,从而显示操作的进度。另外进度条还可以实现进度和任务的暂停和重新启动以及进度和任务的取消。
Android的ProgressBar类提供了一些功能来简化进度条的创建和管理,并提供了以下类型的ProgressBar:
1、普通的进度条,可以是水平或垂直的
2、圆形进度条
3、首选项进度
4、自定义进度条,可以是水平或垂直的,可以包含图像、动画等
其中,普通的进度条是应用最为广泛的进度条,也是自定义进度条的基本实现。
二、常见的进度条效果
1、基础的横向进度条
这是最常见的进度条效果,它不仅会随着任务进度进行,而且它可以使用这个进度来做出反应,比如进行计算和调整界面。ProgressBar可以通过XML和Java代码对其进行自定义。在这个例子中,我们添加了一个新的颜色,更改了背景和前景颜色并增加了一个刻度线。
![image.png](https://cdn.nlark.com/yuque/0/2021/png/12759901/1623320706937-58e772d2-550a-417f-a62f-33d8149fa1a7.png#align=left&display=inline&height=408&margin=%5Bobject%20Object%5D&name=image.png&originHeight=408&originWidth=651&size=19088&status=done&style=none&width=651)
2、圆形进度条
圆形进度条是一个原型进度条,常常被用于耗时较长的任务中。在这个例子中,进度条呈现以 75% 的速度向前进行的动画, 进度条可以添加到任何布局中,在XML和Java代码中进行自定义。
![image.png](https://cdn.nlark.com/yuque/0/2021/png/12759901/1623320734113-a28385bf-536b-4c2f-9e49-9f2f7282225b.png#align=left&display=inline&height=372&margin=%5Bobject%20Object%5D&name=image.png&originHeight=372&originWidth=636&size=38129&status=done&style=none&width=636)
3、带有百分比标签的进度条
这是最常用于文件上传和下载进度条的效果,它同时将进度呈现为数字和图像,这使得用户能够更好地理解她的任务进展。在这个例子中,我们通过添加一个TextView来提供进度百分比,并增加了一个深色的背景颜色。
![image.png](https://cdn.nlark.com/yuque/0/2021/png/12759901/1623320867603-3f304dc3-31d8-43c2-b2df-985f62055e49.png#align=left&display=inline&height=405&margin=%5Bobject%20Object%5D&name=image.png&originHeight=405&originWidth=653&size=23631&status=done&style=none&width=653)
4、带有动画效果的进度条
动画是一个有效的方法来增加你的进度条,它可以让用户感到更加兴奋和协作。在这个例子中,我们增加了一个动画,当滚动条到达 50% 时,它会逐渐转换为另一个颜色。
![image.png](https://cdn.nlark.com/yuque/0/2021/png/12759901/1623321071128-142420db-637a-4950-bb9d-a8d43f3f3b3e.png#align=left&display=inline&height=380&margin=%5Bobject%20Object%5D&name=image.png&originHeight=380&originWidth=618&size=23278&status=done&style=none&width=618)
三、如何自定义ProgressBar
1、XML 文件中使用样式定义 ProgressBar
Android允许我们在XML样式表中定义自己的主题样式来自定义ProgressBar。使用样式定义 ProgressBar 非常灵活,许多开发者都将其用于对UI元素实现更好的定制化与样式掌控。
定义样式需要使用
```
将这个样式应用到布局文件中的 ProgressBar 中。
```kotlin
android:id="@+id/progressbar" style="@style/CustomProgressBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:indeterminateOnly="false" android:max="100" android:progress="0" /> ``` 以上这样,进度条就可以以规定的样式呈现出来。 2、Java 代码中使用自定义 ProgressBar 当需要在 Java 代码中通过动态方式定义ProgressBar样式或者实现其它效果时,可通过继承ProgressBar框架来实现,首先创建ProgressBar继承类。 示例如下: ```kotlin public class CustomLoadProgressBar extends ProgressBar { public CustomLoadProgressBar(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } public CustomLoadProgressBar(Context context, AttributeSet attrs) { super(context, attrs); } public CustomLoadProgressBar(Context context) { super(context); } @Override public void setProgress(int progress) { super.setProgress(progress); setProgressDrawable(getContext().getResources() .getDrawable(R.drawable.custom_progressbar)); } } ``` 重写 onDrawDrawable() 函数,自己定义 ProgressBar 的绘制方式。上面的例子中,在setProgress()函数中调用了自定义的R.drawable.custom_progressbar样式,自定义的进度条Drawable绘制样式在此处设置。 最后,就可以在布局文件中,使用此自定义的进度条控件。 ```xml android:id="@+id/load_progressbar" android:layout_width="match_parent" android:layout_height="50dp" /> ``` 总结: 自定义ProgressBar只需要通过XML或Java代码实现。Android的ProgressBar类提供了一些功能来简化进度条的创建和管理,实现常规的进度条并不难。自定义ProgressBar的主要目的是为了使UI控件更加美观和易于使用,在设计和实现进度条控件时,请注意增加UI的可读性和可视性。希望本文对大家有所帮助,谢谢!