ProgressBar使用详解

ProgressBar是Android下的进度条，也是为数不多的直接继承于View类的控件,直接子类有AbsSeekBar和ContentLoadingProgressBar，其中AbsSeekBar的子类有SeekBar和RatingBar

ProgressBar的使用注意:

1、ProgressBar有两个进度，一个是android:progress，另一个是android:secondaryProgress。后者主要是为缓存需要所涉及的，比如在看网络视频时候都会有一个缓存的进度条以及还要一个播放的进度，在这里缓存的进度就可以是android:secondaryProgress，而播放进度就是android:progress。
2、ProgressBar分为确定的和不确定的，上面说的播放进度、缓存等就是确定的。相反地，不确定的就是不清楚、不确定一个操作需要多长时间来完成，这个时候就需要用的不确定的ProgressBar了。这个是由属性android:indeterminate来控制的，如果设置为true的话，那么ProgressBar就可能是圆形的滚动条或者水平的滚动条（由样式决定）。默认情况下，如果是水平进度条，那么就是确定的。
3、ProgressBar的样式设定其实有两种方式，在API文档中说明的方式如下：
- Widget.ProgressBar.Horizontal
- Widget.ProgressBar.Small
- Widget.ProgressBar.Large
- Widget.ProgressBar.Inverse
- Widget.ProgressBar.Small.Inverse
- Widget.ProgressBar.Large.Inverse

使用的时候可以这样：style="@android:style/Widget.ProgressBar.Small"。另外还有一种方式就是使用系统的attr，上面的方式是系统的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几种比较常用的属性:

布局中设置：

android:progress="50"——第一显示进度
android:secondaryProgress="80"——第二显示进度
android:indeterminate="true"——设置是否精确显示，true表示不精确显示进度，false表示精确显示进度

使用Java代码设置：

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

ProgressBar常见的几种样式

横向progressBarStyleHorizontal

<ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="240dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="10dp"
        android:max="100"
        android:progress="50" />

效果图:

image.png

横向Widget.ProgressBar.Horizontal

<ProgressBar
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="240dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="10dp"
        android:max="100"
        android:progress="50" />

效果图:

image.png

圆形:progressBarStyleLarge

<ProgressBar
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="10dp"
        android:id="@+id/progressBar1"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
         />

效果图:

image.png

圆形:普通

 <ProgressBar
        android:layout_marginTop="10dp"
        android:id="@+id/progressBar2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
         />

效果图:

image.png

圆形:progressBarStyleSmall

<ProgressBar
        android:layout_marginTop="10dp"
        android:layout_gravity="center_horizontal"
        android:id="@+id/progressBar3"
        style="?android:attr/progressBarStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
         />

效果图:

image.png

自定义进度条修改进度的颜色

在布局文件中的style属性就是设置进度条样式的

<ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

实际上面的背景文件是位于@android:style/Widget.ProgressBar.Horizontal，既上面的布局可以写成

<ProgressBar
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

查看系统中的水平进度条风格文件

<style name="Widget.ProgressBar.Horizontal">
    <item name="indeterminateOnly">false</item>
    <item name="progressDrawable">@drawable/progress_horizontal</item>
    <item name="indeterminateDrawable">@drawable/progress_indeterminate_horizontal</item>
    <item name="minHeight">20dip</item>
    <item name="maxHeight">20dip</item>
    <item name="mirrorForRtl">true</item>
</style>

上面的android:progressDrawable属性是设置进度条背景，进入查看

<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2008 The Android Open Source Project

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->

<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标签分别是设置：进度条、第二进度条、第一进度条的背景色。这里我们在drawable文件夹下新建一个pb_pd_sp_blog.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="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="#b9a4ff"
                    android:centerColor="#c6b7ff"
                    android:centerY="0.75"
                    android:endColor="#c3b2ff"
                    android:angle="270"
                    />
            </shape>
        </clip>
    </item>

    <!-- 第二进度条 -->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                    android:startColor="#57e8ff"
                    android:centerColor="#74ebff"
                    android:centerY="0.75"
                    android:endColor="#8eefff"
                    android:angle="270"
                    />
            </shape>
        </clip>
    </item>
</layer-list>

image.png

自定义进度条多种属性

我们不但可以修改进度的颜色,也可以修改其他属性我们可以自定义实现如下效果
布局中的属性设置

<ProgressBar
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="240dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="10dp"
        android:max="100"
        android:progress="100"
        android:maxHeight="12dp"
        android:minHeight="12dp"
        android:progressDrawable="@drawable/pb_pd_sp_download" />

drawable文件夹下的pb_pd_sp_downloadxml定义

<?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="@color/c_ffffff"
                />
            <size
                android:height="12dp"
                />
            <stroke
                android:width="2dp"
                android:color="@color/c_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="@color/c_5cacff"
                    android:centerColor="@color/c_0061dd"
                    android:endColor="@color/c_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>

效果图:

image.png

自定义进度条实现内部进度条为圆角形状

布局中的属性设置

<ProgressBar
        android:id="@+id/pbMedal"
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="0dp"
        android:layout_height="5dp"
        android:indeterminate="false"
        android:progressDrawable="@drawable/pb_pd_sp_medal"
        app:layout_constraintLeft_toLeftOf="@id/ivGoodsBg"
        app:layout_constraintRight_toRightOf="@id/ivGoodsBg"
        app:layout_constraintTop_toBottomOf="@id/ivGoodsBg" />

drawable文件夹下的pb_pd_sp_medal定义

<?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="2.5dp" />
            <solid android:color="#E2E4EA" />
            <size android:height="5dp" />
        </shape>
    </item>

    <!-- 第二进度条 -->
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="2.5dp" />
                <gradient
                    android:angle="270"
                    android:centerColor="#c6b7ff"
                    android:centerY="0.75"
                    android:endColor="#c3b2ff"
                    android:startColor="#b9a4ff" />
                <size android:height="5dp" />
            </shape>
        </clip>
    </item>

    <!-- 第一进度条 -->
    <item android:id="@android:id/progress">
        <scale android:scaleWidth="100%"
            android:drawable="@drawable/progress_bar_medal"   />
    </item>
</layer-list>

progress_bar_medal文件定义：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="2.5dp" />
    <solid android:color="@color/colorPrimaryDark" />
    <size android:height="5dp" />
</shape>

效果图：

image.png

最后编辑于：2022.03.14 09:41:39

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 160,108评论 4赞 364
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,699评论 1赞 296
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 109,812评论 0赞 244
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 44,236评论 0赞 213
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,583评论 3赞 288
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,739评论 1赞 222
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,957评论 2赞 315
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,704评论 0赞 204
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,447评论 1赞 246
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,643评论 2赞 249
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,133评论 1赞 261
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,486评论 3赞 256
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,151评论 3赞 238
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,108评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,889评论 0赞 197
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,782评论 2赞 277
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,681评论 2赞 272

ProgressBar使用详解

ProgressBar的使用注意:

ProgressBar几种比较常用的属性:

ProgressBar常见的几种样式

自定义进度条修改进度的颜色

自定义进度条多种属性

自定义进度条实现内部进度条为圆角形状

推荐阅读更多精彩内容