自定义进度条之样式篇

自定义进度条基础篇之样式表

1. 样式（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