目錄

Android SeekBar常見問題

在使用Android Seekbar大家可能經常遇到下面這幾個問題：

1. 如何設定Seekbar進度條的高度？
2. 如何設定滑塊的樣式？
3. 如何設定進度條的顏色和背景顏色？

接下來，針對這三個問題我會逐一作出解答。

解答前，我們需要配置一個預設的Seekbar，樣式程式碼如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height
 
="match_parent"
    android:orientation="vertical">

    <SeekBar
        android:id="@+id/id_seekbar_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"/>
</LinearLayout>

在Android4.4平臺效果如下：

可以看到：

1. 進度條預設高度可能是10dp左右。
2. 進度條顏色：已經滑動的是藍色，剩餘為黑色。
3. 滑動塊形狀：藍色偏透明的圓形。

由於進度條的高度需要在設定進度條顏色後才能顯示出來，因此我們先學習如何設定進度條的顏色。

進度條顏色

進度條總共需要設定三個屬性的顏色：

1. @android:id/background：進度條的整體背景顏色。
2. @android:id/secondaryProgress：二級進度條的顏色
3. @android:id/progress：一級進度條的顏色，即進度條當前已經滑過面積的顏色。

這裡我們將一級進度條顏色設定為黃色，二級進度條顏色設定為綠色，背景設定為藍色，並將其設定為圓角，配置如下。

建立自定義樣式：

<?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="5dp"/>
            <solid android:color="#0c38e7"/>
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dp"/>
                <solid android:color="#11ce33"/>
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dp"/>
                <solid android:color="#d7c60e" />
            </shape>
        </clip>
    </item>
</layer-list>

同時，需要在Seekbar中通過progressDrwable屬性引用該樣式，為了更清楚的看到進度條效果，我將進度條的高度設定為100dp：

    <SeekBar
        android:id="@+id/id_seekbar_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:maxHeight="100dp"
        android:minHeight="100dp"
        android:layout_marginTop="20dp"
        android:progressDrawable="@drawable/seekbar_bg"/>

效果如下：

可能有的同學會對二級進度條產生疑問，畢竟上例中沒有顯示二級進度條的顏色，其實，我們可以通過程式碼來設定二級進度條的顏色，示例程式碼如下：

    private void initView() {
        seekbar1 = (SeekBar) getActivity().findViewById(R.id.id_seekbar_1);
        seekbar1.setProgress(30);
        seekbar1.setSecondaryProgress(60);
    }

效果如下：

設定進度條高度

在Seekbar中，我們可以通過如下兩個屬性設定進度條的高度：

• android:maxHeight:設定進度條的最大高度。
• android:minHeight:設定進度條的最低高度。

在上例中，我們已經將Seekbar的高度設定為100dp，具體效果見上圖。

設定滑塊樣式

Seekbar中修改滑塊樣式一般是通過設定android:thumb屬性實現的。
而android:thumb一般是指向一個selector的drawable。

drawable主要需要區分滑塊在正常狀態、按下狀態和有焦點狀態的樣式，因此採用selector：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 按下狀態-->
    <item android:drawable="@drawable/thumb1" android:state_pressed="true" />

    <!-- 有焦點狀態 -->
    <item android:drawable="@drawable/thumb1" android:state_focused="true" />

    <!-- 普通狀態 -->
    <item android:drawable="@drawable/thumb2" />
</selector>

我們將滑動塊按下和聚焦時，設定為佐助的圖片。正常狀態顯示為科比圖片。效果如圖：

正常狀態：

按下狀態：