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
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容