《Android》『SeekBar』- 卷軸拖曳元件的基本用法與如何透過 Shape、layer-list 自訂外觀
《Android Developers 參考文獻》
《繼承架構》
extends AbsSeekBar
↳ android.widget.SeekBar
《簡單介紹》
SeekBar 是一個外觀類似 ProgressBar 的卷軸拖曳元件，不一樣的是，它提供了一個給使用者拖曳的滑動桿，在使用上 SeekBar 繼承自 ProgressBar，也因此 SeekBar 類別中的很多方法均繼承自 ProgressBar，我們可以直接宣告預設的 SeekBar 元件來使用，亦可以透過 layer-list 資源檔，達到自訂外觀的效果。
➥透過 Selector 與 layer-list 資源檔自訂拖曳按鈕與進度條外觀
基本用法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
package ... import ... public class MainActivity extends Activity { private SeekBar mSeekBar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mSeekBar = (SeekBar) findViewById(R.id.seekBar); mSeekBar.setOnSeekBarChangeListener(seekBarOnSeekBarChange); } private SeekBar.OnSeekBarChangeListener seekBarOnSeekBarChange = new SeekBar.OnSeekBarChangeListener() { @Override public void onStopTrackingTouch(SeekBar seekBar) { //停止拖曳時觸發事件 } @Override public void onStartTrackingTouch(SeekBar seekBar) { //開始拖曳時觸發事件 } @Override public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) { //拖曳途中觸發事件，回傳參數 progress 告知目前拖曳數值 } }; } |
MainActivity.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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/seekBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="15dp" android:max="100" android:progress="50"/> </LinearLayout> |
activity_main.xml
以上直接透過程式碼的方式，示範 SeekBar 元件的基本使用方式，以下將常用到的設定參數條列如下 –
android:max
設定 SeekBar 範圍的最大值。
android:progress
設定拖曳鈕目前的位置數值。
android:thumb
設定拖曳鈕的圖案。
android:progressDrawable
自訂拖曳按鈕與進度條外觀
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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/seekBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="15dp" android:max="100" android:progress="50" android:progressDrawable="@android:drawable/progress_horizontal" //進度條外觀 android:thumb="@android:drawable/btn_star" /> //拖曳鈕外觀 </LinearLayout> |
activity_main.xml
我們可以直接透過設定 android:thumb 與 android:progressDrawable 屬性的方式，將 SeekBar 做一些基本的外觀變化，但是若我們只是單純的設定圖檔，當使用者按下拖曳按鈕時，拖曳按鈕並不會有按下的效果，這個時候，Selector 資源檔的運用就派上用場了。
透過 Selector 與 layer-list 資源檔自訂 SeekBar 外觀
為了更進一步的實作 SeekBar 上一些外觀上的效果，我們通常會使用 Selector 資源檔來設定 android:thumb 屬性，並使用 layer-list 資源檔來設定 android:progressDrawable 屬性，相關程式碼如下 –
|
1 2 3 4 5 6 7 8 9 |
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:state_pressed="true" //按下狀態 android:drawable="@drawable/thumb_pressed" /> <item android:drawable="@drawable/thumb_normal" /> //預設狀態 </selector> |
thumb_selector.xml
首先我們自訂了一個名為 thumb_selector.xml 的 Selector 資源檔，並在其中定義了元件在預設狀態以及按下狀態時的圖案。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?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="@color/seek_bar_bg_color" /> <item android:id="@android:id/progress" > //進度條的進度值圖片 <clip> //定義圖檔重複 <bitmap xmlns:android="http://schemas.android.com/apk/res/android" android:src="@drawable/progress_icon" android:tileMode="repeat" android:antialias="true" android:dither="false" android:filter="false" android:gravity="left" /> </clip> </item> <!-- //進度條的進度值圖片，單純定義顏色 <item android:id="@android:id/progress" > <clip android:drawable="@color/seek_bar_progress_color" /> </item> --> </layer-list> |
progress_layer.xml
接著我們自訂了一個名為 progress_layer.xml 的 layer-list 資源檔，其中我們必須定義兩個帶有特定 id 名稱的 <item> 標籤，條列如下 –
@android:id/background
此 id 的 <item> 標籤代表著 SeekBar 中進度條的底圖圖片，不得任意修改 id 名稱。
@android:id/progress
此 id 的 <item> 標籤代表著 SeekBar 中進度條的進度值圖片，不得任意修改 id 名稱。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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/seekBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="15dp" android:max="100" android:progress="50" android:progressDrawable="@drawable/progress_layers" //進度條外觀 android:thumb="@drawable/thumb_selector" /> //拖曳鈕外觀 </LinearLayout> |
activity_main.xml
最後，將 android:progressDrawable 與 android:thumb 屬性設定為之前定義好的 layer-list 與 selector 資源檔，自訂外觀就完成了。另外，若是我們想要進一步改變進度條外觀的形狀，也很簡單，只要在 <layer-list> 中的 <item> 標籤內加入 <shape> 定義即可。
延伸閱讀：
臉書留言
一般留言