1 style

1.1 sytles.xml簡介

style表示樣式，Android的樣式在“res/values/styles.xml”中定義。可以在Android Studio中對該檔案進行編輯。以下為Android Studio自動生成的styles.xml檔案的內容。

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

從以上內容中可以看出，styles.xml檔案中包含一個根元素<resource>，具體的每種樣式是通過根元素下的自標籤<style>來實現的，每個<style>中又包含多個<item>用來設定該樣式的不同屬性。

以上程式碼中，定義了一個名為“AppTheme”的樣式，<style>標籤的“parent”屬性指定了“AppTheme”要繼承的樣式。“AppTheme”樣式中包含了三個屬性，分別是“colorPrimary”、“colorPrimaryDark”以及“colorAccent”。

1.2 建立自定義進度條的樣式

在“styles.xml”中新增一個新的<style>標籤，該標籤標識自定義進度條的樣式。

<style name="StyleProgressBarMini" parent="@android:style/Widget.ProgressBar.Horizontal">
    <item name="android:maxHeight">50dip</item>
    <item name="android:minHeight">10dip</item>
    <item name="android:indeterminateOnly">false</item>
    <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
    <item name="android:progressDrawable">@drawable/shape_progressbar_mini</item>
</style>

以上程式碼中，新增了一個名為“StyleProgressBarMini”的樣式，該樣式繼承自“@android.style/Widget.ProgressBar.Horizontal”，即水平進度條。也就是說，自定義的進度條型別為水平型。關於進度條控制元件的介紹請參考《Android Studio中使用進度條控制元件》。android:maxHeight和android:minHeight指定了進度條的最大高度和最小高度；android:indeterminateOnly表示進度條是否顯示數字進度；android:progressDrawable指定了自定義進度條中顯示的影像，該值為“@drawable/shape_progressbar_mini”代表了@drawable/shape_progressbar_mini.xml檔案，該檔案的建立和編輯在“2 layer-list”中介紹。

2 layer-list

使用Drawable資源的根元素layer-list可以將多個drawable按照順序層疊在一起顯示。使用layer-list可以自定義進度條的背景、當前進度和第二進度。

2.1 建立layer-list檔案

在Android Studio專案中新增layer-list檔案的方法請參見《Android Studio中建立Selector檔案的方法》。唯一不同的是在“Root element:”中輸入“layer-list”，在“File name”中輸入“shape_progressbar_mini”，與“1.2 建立自定義進度條的樣式”中提到的progressDrawable屬性值相同。

 

圖1 建立layer-list 檔案

2.2 編輯layer-list檔案

layer-list檔案中，標籤<item>表示一個drawable。新增一個drawable的程式碼如下

<item android:id="@android:id/background">
    <shape>
        <corners android:radius="5dip" />
        <gradient
            android:angle="270"
            android:centerY="0.75"
            android:endColor="#FFFFFF"
            android:startColor="#FFFFFF" />
    </shape>
</item>

其中，<item>標籤下的<shape>標籤用來定義集合形狀，預設形狀為矩形。而<shape>下的<corners>標籤指定了該形狀的圓角，radius屬性指定了圓角的半徑，半徑值越大，說明角越圓；<gradient>標籤指定了形狀的漸變，android:angle指定了漸變的角度，0表示從上到下，90表示從左到右；android:startColor和android:endColor指定了漸變的起始顏色和結束顏色；android:centerY指定了漸變中心的相對位置，該值為0~1。以上程式碼定義了一個用於表示進度條背景的drawable。

接下來定義進度條的當前進度和第二進度。

<item android:id="@android:id/secondaryProgress">
    <clip>
        <shape>
            <corners android:radius="0dip" />

            <gradient
                android:angle="270"
                android:centerY="0.75"
                android:endColor="#df0024"
                android:startColor="#df0024" />
        </shape>
    </clip>
</item>
<item android:id="@android:id/progress">
    <clip>
        <shape>
            <corners android:radius="5dip" />
            <gradient
                android:angle="270"
                android:centerY="0.75"
                android:endColor="#de42ec"
                android:startColor="#de42ec" />
        </shape>
    </clip>
</item>

3 shape

使用Drawable資源的根元素shape來定義進度條的邊框。

3.1 建立shape檔案

建立的方法與“2.1 建立layer-list檔案”中提到的方法相同，只是將“Root element:”設定為shape。

3.2 編輯shape檔案

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#cecece" />
    <corners android:radius="90dp" />
    <padding
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp"
        android:top="1dp" />
</shape>

以上程式碼中，android:shape屬性指定了shape的形狀，即矩形；<solid>標籤用來設定形狀的填充顏色，該標籤只有一個屬性android:color用來指定填充的顏色；<corners>標籤用來設定圓角，屬性android:radius指定了圓角的半徑；標籤<padding>設定內容與形狀邊界的內間距，android:bottom、android:left、android:right和android:top分別表示下、左、右和上內間距。

4 建立自定義進度條

可以使用以上建立的style、layer-list以及shape來自定義進度條。

<ProgressBar
    android:id="@+id/pb_progressbar"
    style="@style/StyleProgressBarMini"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_margin="30dp"
    android:background="@drawable/shape_progressbar_bg"
    android:max="100"
    android:progress="30"
    android:secondaryProgress="80"/>

其中，style屬性指定了在“1 style”中定義的風格；android:background屬性指定了在“3 shape”中建立的shape。

自定義進度條執行效果如圖2所示。

 

圖2 自定義進度條