自定义进度条基础篇之样式表
-
样式（style）
<ProgressBar style="@style/Widget.AppCompat.ProgressBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:max="100"/>
1.1 系统是默认样式有
style="@style/Widget.AppCompat.ProgressBar"圆形进度条
style="@style/Widget.AppCompat.ProgressBar.Horizontal"水平进度条
系统自带样式的进度条.jpg
- 一般圆形的适用于没有具体进度，需要用户等待的场景。
- 而条形的适用于有具体进度的情况，比如加载中，下载进度的提示。
1.2 自定义样式
一般我们不会使用系统自带的样式，比如进度的颜色，进度条的高度，等等简单的修改。这时候我们只需要改动一下样式，就可以达到目的。
在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>
然后再ProgressBar中引用我们自定义的样式就可以了。
<ProgressBar
style="@style/update_progress_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="100"/>
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>
自定义样式的进度条.png
当然如果 已经加载完的进度的区域
image.png
换成 下面的样式,就可以是加载完成的部分右边也有圆角
<!--已经加载完的进度的区域-->
<item android:id="@android:id/progress">
<scale android:scaleWidth="100%">
<shape>
<!--进度条的圆角-->
<corners android:radius="9dp" />
<!--已经加载完的进度的颜色-->
<solid android:color="#008CFF"/>
</shape>
</scale>
</item>
效果图如下
image.png
