Android下如何自定义ProgressBar的外观

在Android应用中经常会用的到一些进度条,这些进度条的样子千差万别,但是大多都是由ProgressBar来的。但是Android系统自带的进度条样式却不太好看,今天要做的就是自定义一个好看的ProgressBar。


我们先来看看Android自带的进度条的样子:



我们今天的目标,自定义 的进度条的样子:



不难发现差距还是挺大的,好了,废话不多说,进入正题:

我们首先还是从源码入手,我们可以打开ADT目录下的sdk\platforms\android-16\data\res\values文件夹,由于很多Android下组件的样式(Style)都是定义在这个文件夹下的styles.xml文件中的,系统默认的ProgressBar也不例外,所以我们可以打开这里的styles.xml文件,并且找到ProgressBar的定义的地方:

由于今天需要一个横向的进度条,所以我们找到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>
    </style>


在这里面,实际上我们需要重点关注一下progress_horizontal这个文件,我们可以在找到这个sdk\platforms\android-16\data\res\drawable文件夹下找到progress_horizontal.xml:

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

打开一看,我们可以发现其中定义了三个item,分别是:backgroundsecondaryProgressprogress,这里的background就是进度条所使用的背景,对应于我们上面那副自定义进度条的图就是灰色的部分,填充在进度条的底部;而progress则是进度条的样子,对应于我们上面图示的绿色的进度条的部分;secondaryProgress在我们的图示里面没有,这个组件的作用是类似于在网上看在线视频的时候,缓冲进度显示的那个灰色的进度条,跟观看进度是两个不同的进度,在这里我们没有加。


进一步观察每一个item的定义方式,Android系统是直接指定了每一个item的颜色这种方法来定义样子的,在我们这里可以使用不同的背景图片来定义会更加漂亮一些。


至此,源码部分基本搞定,下面我们需要做的就是三步:

1、在我们自己的工程目录的res/values/styles.xml文件中添加一个style条目,名字自定,比如我们这里叫my_pb_style,但是需要指定一个父类也就是在上面我们打开的Android系统中的ProgressBar的样式,同时我们需要重写父类中设置progress_horizontal的地方,将这个xml文件改为我们自己工程中自定义的xml文件,比如说叫my_progressbar.xml

    <style name="my_pb_style" parent="@android:style/Widget.ProgressBar.Horizontal">
        <item name="android:progressDrawable">@drawable/progressbarcolor</item>
    </style>


2、在我们工程目录下的res目录下,新建一个drawable的文件夹,在其中建立一个my_progressbar.xml的文件,将上面打开的progress_horizontal.xml文件中的secondaryProgress的item去掉,只保留background和progress即可,然后每个item的shape部分也去掉,改为我们自己准备好的图片,如下,其中security_progress_bg和security_progress分别为我们事先准备好的放在drawble目录下的图片,比如我们这里的图片如下:

           

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@android:id/background"
        android:drawable="@drawable/security_progress_bg"/>
    <item
        android:id="@android:id/progress"
        android:drawable="@drawable/security_progress"/>

</layer-list>

3、在我们需要ProgressBar的布局文件中定义出ProgressBar,并将上面我们定义好的Style样式添加进去即可:

<ProgressBar
                android:id="@+id/progressBar1"
                style="@style/my_pb_style"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp" />


至此,我们就可以在文件中来使用这个自定义外观的ProgressBar了。



郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。