ProgressBar简介

作者: ccbuluo | 来源:发表于2017-05-10 19:46 被阅读0次

原文出处：http://www.ccbu.cc/android/progressbar-intro

ProgressBar是Android系统提供的进度条view控件。

ProgressBar有两个进度，一个是Android:progress，另一个是android:secondaryProgress。后者主要是为缓存需要所涉及的，比如在看网络视频时候都会有一个缓存的进度条以及还要一个播放的进度，在这里缓存的进度就可以是android:secondaryProgress，而播放进度就是android:progress，有了secondProgress，可以很方便定制ProgressBar。
ProgressBar分为确定的和不确定的，确定的是我们能明确看到进度，相反不确定的就是不清楚、不确定一个操作需要多长时间来完成，这个时候就需要用的不确定的ProgressBar了。属性android:indeterminate如果设置为true的话，那么ProgressBar就可能是圆形的滚动条或者水平的滚动条（由样式决定），但是我们一般时候，是直接使用Style类型来区分圆形还是水平ProgressBar的。
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:id="@+id/progressBar1"  
     style="?android:attr/progressBarStyleHorizontal" 
     android:layout_width="match_parent"  
     android:layout_height="wrap_content" /> 
<ProgressBar  
     android:id="@+id/progressBar2"  
     style="@android:style/Widget.ProgressBar.Horizontal"（等同于@android:attr）  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content" />

水平ProgressBar系统样式

我们去看一下style="?android:attr/progressBarStyleHorizontal"(即Widget.ProgressBar.Horizontal)的源码，如下：

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

可以看出，进度条显示的绘制Drawable定义主要是android:progressDrawable，让我们看一下progress_horizontal的源码。

<?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="#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>

可以看出，此处通过一个layer-list定义了一个LayerDrawable来处理进度的绘制，其中绘制包括3部分，即：background、secondProgress、progress，知道了绘制原理，那我们就可以很轻松的进行定义自己的进度条样式了。

如我们需要定义一个进度条，不需要绘制secondProgress,背景为透明，进度为红色填充，那么我们的定义如下的Drawable资源progress_bar_style.xml。

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

再在layout的xml配置中进行一下配置即可

<ProgressBar
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="match_parent"
    android:layout_height="8dp"
    android:progressDrawable="@drawable/progress_bar_style" />

水平ProgressBar使用图片作为进度条

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <nine-patch android:src="@drawable/background" android:dither="true"/>
    </item>
    <item android:id="@android:id/progress">
        <clip android:drawable="@drawable/progress"/>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip android:drawable="@drawable/secondaryProgress"/>
    </item>
</layer-list>

一般的，背景图片需要是.9.png格式，progress则可以为普通图片，当普通图片出现问题时，可以尝试使用.9.png来代替，需要注意的是，progress的资源需要放在clip标签内，将其转换为ClipDrawable来使用，才可以正常的显示进度。

弧形进度条样式
以progressBarStyleLarge为例，其样式源码如下：

    <style name="Widget.ProgressBar.Large">
    　　<item name="android:indeterminateDrawable">@android:drawable/progress_large_white</item>
    　　<item name="android:minWidth">76dip</item>
    　　<item name="android:maxWidth">76dip</item>
    　　<item name="android:minHeight">76dip</item>
    　　<item name="android:maxHeight">76dip</item>
    </style

继续看一下progress_large_white源码

    <rotate xmlns:android="http://schemas.android.com/apk/res/android"  
        android:drawable="@drawable/spinner_white_76"  
        android:pivotX="50%"  
        android:pivotY="50%"  
        android:fromDegrees="0"  
        android:toDegrees="360" />

此处我们可以看出，只是设置了一张图片，然后对图片进行了旋转来实现进度样式,这种加载动画的定义是比较简单的，如果要自定义，只需要更好图片即可。

那如何定义又一组图片组成的动画的加载进度样式呢？首先我们定义一组动画图片，使用animation-list定义一组逐帧动画。

    <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>

定义好动画后，将此动画Drawable设置到style的indeterminateDrawable即可。
另外，我们也可以通过定义一组sharp资源，来绘制一定样式的图形来表示加载过程，给出的示例代码如下：

    <?xml version="1.0" encoding="utf-8"?>    
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"    
    　　android:fromDegrees="0"    
    　　android:pivotX="50%"    
    　　android:pivotY="50%"    
    　　android:toDegrees="360" >    
    　　<shape    
    　　　　android:innerRadiusRatio="3"    
    　　　　android:shape="ring"    
    　　　　android:thicknessRatio="8"    
    　　　　android:useLevel="false" >    
    　　　　<gradient    
    　　　　　　android:centerColor="#FFFFFF"    
    　　　　　　android:centerY="0.50"    
    　　　　　　android:endColor="#1E90FF"    
    　　　　　　android:startColor="#000000"    
    　　　　　　android:type="sweep"    
    　　　　　　android:useLevel="false" />    
    　　</shape>    
    </rotate>

同样的，将此Drawable资源设置到style的indeterminateDrawable即可。

ProgressBar简介

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读