ProgressBar及其样式使用详解

ProgressBar

1、基本使用

和普通控件一样，在布局中添加ProgressBar，布局中设置一些属性

<ProgressBar
        //设置ProgressBar样式
        style="@style/Widget.AppCompat.ProgressBar.Horizontal
        
        //进度条最大值
        android:max="100"
        
        //一级进度条
        android:progress="60"
        
        //显示二级进度条
        android:secondaryProgress="80"
        
        //非精度显示
        android:indeterminate="true" />

还可以在代码中设置一些属性：

//设置第一进度
    setProgress(int) 
    
    //设置第二进
    setSecondaryProgress(int) 
    
    //获取第一进度
    getProgress() 
    
    //获取第二进度
    getSecondaryProgress() 
    
    //增加或减少第一进度
    incrementProgressBy(int) 
    
    //增加或减少第二进度
    incrementSecondaryProgressBy(int) 
    
    //获取最大进度
    getMax()

2、二级进度：secondaryProgress

一般缓存，下载进度显示都会用到二级进度条，使用android:secondaryProgress设置。

场景：音乐缓存的进度就可以是android:secondaryProgress，而音乐播放进度就是android:progress

3、模糊进度：indeterminate

加上这个indeterminate属性之后，进度条不是按照实际进度显示，而是不断的变化：

4、设置样式

官方预定义了一系ProgressBar的样式默认是转圈圈的圆圈。

Widget.ProgressBar.Horizontal
    Widget.ProgressBar.Small
    Widget.ProgressBar.Large
    Widget.ProgressBar.Inverse
    Widget.ProgressBar.Small.Inverse
    Widget.ProgressBar.Large.Inverse

①使用系统的style

style="@style/Widget.AppCompat.ProgressBar.Horizontal"

②使用系统attr

style="?android:attr/progressBarStyleHorizontal"

5、自定义样式

参考预定义ProgressBar的样式，看看是如何实现的。看看定义的drawable背景文件progress_horizontal_holo_dark.xml

在通过progressDrawable属性，设置drawable背景

<item name="progressDrawable">@drawable/progress_horizontal_holo_dark</item>

定义一个drawable/progressbar_bg.xml

<?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="6dp" />
            <solid
                android:color="#ffffff"
                />
            <size
                android:height="12dp"
                />
            <stroke
                android:width="2dp"
                android:color="#c4e9ff"
                />
            <!-- <gradient
                 android:startColor="#ff9d9e9d"
                 android:centerColor="#ff5a5d5a"
                 android:centerY="0.75"
                 android:endColor="#ff747674"
                 android:angle="270"
                 />-->
        </shape>
    </item>
    <!-- 第二进度条 -->
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="6dp" />
                <gradient
                    android:startColor="#b9a4ff"
                    android:centerColor="#c6b7ff"
                    android:centerY="0.75"
                    android:endColor="#c3b2ff"
                    android:angle="270"
                    />
                <size
                    android:height="12dp"
                    />
            </shape>
        </clip>
    </item>
    <!-- 第一进度条 -->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="6dp" />
                <!--<solid
                    android:color="@color/c_0061dd"
                    />-->
                <gradient
                    android:startColor="#5cacff"
                    android:centerColor="#0061dd"
                    android:endColor="#0061dd"
                    android:angle="45"
                    />
                <size
                    android:height="12dp"
                    />
                <stroke
                    android:width="2dp"
                    android:color="@android:color/transparent"
                    />
                <!--<gradient
                    android:startColor="#57e8ff"
                    android:centerColor="#74ebff"
                    android:centerY="0.75"
                    android:endColor="#8eefff"
                    android:angle="270"
                    />-->
            </shape>
        </clip>
    </item>
</layer-list>

设置给ProgressBar：

android:progressDrawable="@drawable/progressbar_bg"

第一进度条shape使用了gradient配色渐变，进度条效果：