Android ProgressBar 详解改变 ProgressBar 颜色

迈不过友情╰ 2022-08-10 05:49 619阅读 0赞

今天来说说 ProgressBar   这个东西,

之前一种是用的 项目里面 别人写好的直接用, 还没怎么细看这两个东西

ProgressBar 很简单就一进度条

默认情况下, 他是圆形的,

但是它还有另一种 水平长条状的形态

同时还需要了解的有:

1. 水平形状的 ProgressBar 是有两个进度的 向我们看到 视频的精度条, 有一个是当前播放的,还有一个是下载的精度

2. ProgressBar 分为确定和不确定的两种,  android:indeterminate 为true 表示不确定

3.系统的关于 ProgressBar的Style有:

*  style="?android:attr/progressBarStyle" 
 *  style="?android:attr/progressBarStyleHorizontal" 
 *  style="?android:attr/progressBarStyleInverse" 
 *  style="?android:attr/progressBarStyleLarge" 
 *  style="?android:attr/progressBarStyleLargeInverse" 
 *  style="?android:attr/progressBarStyleSmall" 
 *  style="?android:attr/progressBarStyleSmallInverse" 
 *  style="?android:attr/progressBarStyleSmallTitle"

设置ProgressBar的样式有两种方式:

style="@style/StyleProgressBarMini"

style="?android:attr/progressBarStyleLargeInverse"

上面两种方式都可以设置PogressBar 的属性

我们在自定ProgressBar的时候一般用的都是第一种

下面看看 Android默认的两种 ProgressBar的Style

上面是默认的 的Style 是圆形的而且是不确定

这个是 水平的ProgressBar的 Style

progressDrawable 这个属性是 确定的进度条的属性

indeterminateDrawable 这个事不确定的 进度条的熟悉

我可以看看 系统默认的 @drawable/progress\_horizontal

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item android:id="@android:id/background">
            <shape>
                <corners android:radius="5dip" />
                <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="5dip" />
                    <gradient
                            android:startColor="#80ffd300"
                            android:centerColor="#80ffb600"
                            android:centerY="0.75"
                            android:endColor="#a0ffcb00"
                            android:angle="270"
                    />
                </shape>
            </clip>
        </item>
    
        <item android:id="@android:id/progress">
            <clip>
                <shape>
                    <corners android:radius="5dip" />
                    <gradient
                            android:startColor="#ffffd300"
                            android:centerColor="#ffffb600"
                            android:centerY="0.75"
                            android:endColor="#ffffcb00"
                            android:angle="270"
                    />
                </shape>
            </clip>
        </item>
    
    </layer-list>

上面有3个 item background、secondProgress、progress，看名字就能知道其大概作用, 我可以把这份文件copy 一份 就可以自己随心的改动 样式了

下面一份是自己定义的

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    
        
        <item
            android:id="@android:id/background"
            android:drawable="@drawable/progress_patch_green">
        </item>
        
        <item android:id="@android:id/progress">
            <clip>
                <nine-patch android:src="@drawable/progress_patch_galy" />
            </clip>
        </item>
        
    
        <item android:id="@android:id/secondaryProgress">
            <clip>
                <nine-patch android:src="@drawable/progresspatch_blue" />
            </clip>
        </item>
    
    </layer-list>

需要注意的是 上面 .9 图的使用

关于 clip  nine-patch  这些标签, 现在自己页不是很熟悉, 以后会写一篇关于这个的文章

**如果不用Drawable的画, 只是想单纯的使用颜色该如何处理呢?**

尝试过这样:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item
            android:id="@android:id/background"
            android:drawable="@color/white">
        </item>
        <item
            android:id="@android:id/secondaryProgress"
            android:drawable="@color/red">
        </item>
        <item
            android:id="@android:id/progress"
            android:drawable="@color/red">
        </item>
    </layer-list>

但是后面在设置 Progress的时候 不起作用, 看到的结果总是

![Center][]

后面又尝试过 :

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item
            android:id="@android:id/background"
            >
            <shape>
                <solid android:color="@color/white"></solid>
            </shape>
    
        </item>
        <item
            android:id="@android:id/secondaryProgress"
            >
            <shape>
                <solid android:color="@color/red"></solid>
            </shape>
    
        </item>
        <item
            android:id="@android:id/progress"
            >
            <shape>
                <solid android:color="@color/red"></solid>
            </shape>
    
        </item>
    </layer-list>

还是不行 和上面一样的

后面又尝试了这样的:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item
            android:id="@android:id/background"
            >
            <clip>
                <shape>
                    <solid android:color="@color/white"></solid>
                </shape>
    
            </clip>
        </item>
        <item
            android:id="@android:id/secondaryProgress"
            >
            <clip>
                <shape>
                    <solid android:color="@color/red"></solid>
                </shape>
    
            </clip>
        </item>
        <item
            android:id="@android:id/progress"
            >
            <clip>
                <shape>
                    <solid android:color="@color/red"></solid>
                </shape>
    
            </clip>
        </item>
    </layer-list>

这下好了能够正常显示了:  
![Center 1][]

后面又尝试了这样的:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:id="@android:id/background">
            <clip>
                <shape>
                    <gradient
                        android:endColor="@color/white"
                        android:startColor="@color/white"/>
                </shape>
            </clip>
        </item>
        <item android:id="@android:id/secondaryProgress">
            <clip>
                <shape>
                    <gradient
                        android:endColor="@color/colorPrimary"
                        android:startColor="@color/colorPrimary"/>
                </shape>
            </clip>
        </item>
        <item android:id="@android:id/progress">
            <clip>
                <shape>
                    <gradient
                        android:endColor="@color/colorPrimary"
                        android:startColor="@color/colorPrimary"/>
                </shape>
            </clip>
        </item>
    </layer-list>

也是ok 如图:  
![Center 2][]

这是自己定义的ProgressBar的style

具体使用如下:

ok 下面说说 自定义圆形的

圆形的主要修改   android:indeterminateDrawable 属性

第一步，在drawable文件夹下新建：progressbar\_circle\_1.xml，如下：

<?xml version="1.0" encoding="utf-8"?>
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:drawable="@drawable/loading" //自定义的菊花图片
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360" >
    
    </rotate>

第二步，在Style中定义mProgress\_circle，如下：

支持大小自己随意定，别失真就好

第三步，组件中引用，如下

上面是通过一张图片填充 android:indeterminateDrawable ，我们也可以定义一个 动画 或者自定义 颜色（shape） 来实现，跟图片的用法一样：

定义动画 progress\_circle\_loading,xml：

<animation-list android:oneshot="false"
      xmlns:android="http://schemas.android.com/apk/res/android">
      <item android:duration="100" android:drawable="@drawable/loading_1" />
      <item android:duration="100" android:drawable="@drawable/loading_2" />
      <item android:duration="100" android:drawable="@drawable/loading_3" />
      <item android:duration="100" android:drawable="@drawable/loading_4" />
      <item android:duration="100" android:drawable="@drawable/loading_5" />
      <item android:duration="100" android:drawable="@drawable/loading_6" />
    </animation-list>

style的indeterminateDrawable引入：

<item name="android:indeterminateDrawable">@drawable/progress_circle_loading</item>

定义shape颜色 progress\_circle\_shape.xml

style的indeterminateDrawable引入：

<item name="android:indeterminateDrawable">@drawable/progress_circle_shape</item>

关于seekBar 的自定义和ProgressBar的基本一致

ok  老实说, 上面的关于 gradient shape 这新的知识不是很熟悉, 以后要专门写一篇关于这个的

参考了以下文章

[http://blog.csdn.net/mad1989/article/details/38042875][http_blog.csdn.net_mad1989_article_details_38042875]

[Center]: /images/20220731/1b50963849294c628f2645f6064d3491.png
[Center 1]: /images/20220731/b1c013e0371241db969cec98ae899fc1.png
[Center 2]: /images/20220731/470dd593ddf54be0908356daa164517f.png
[http_blog.csdn.net_mad1989_article_details_38042875]: http://blog.csdn.net/mad1989/article/details/38042875