Android下如何自訂ProgressBar的外觀，androidprogressbar

Android下如何自訂ProgressBar的外觀，androidprogressbar

在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，分別是： background、 secondaryProgress和 progress，這裡的 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了。

Android開發時，不知道為何ProgressBar的樣式不管怎設定都還是顯示成一個圈圈

你把這句代碼 style="@android:attr/progressBarStyleHorizontal"中的 “@”換成“？”即可了

希望能幫到你
 
幫我看一個這種自訂progressbar是怎實現的？效果見圖

不知道去問問別人