《Android》『SeekBar』- 卷軸拖曳元件的基本用法與如何透過 Shape、layer-list 自訂外觀

《Android Developers 參考文獻》

➥SeekBar

 

《繼承架構》

extends AbsSeekBar


java.lang.Object

android.view.View

 ↳android.widget.ProgressBar

  ↳android.widget.AbsSeekBar

   ↳ android.widget.SeekBar

 

《簡單介紹》

SeekBar 是一個外觀類似 ProgressBar 的卷軸拖曳元件,不一樣的是,它提供了一個給使用者拖曳的滑動桿,在使用上 SeekBar 繼承自 ProgressBar,也因此 SeekBar 類別中的很多方法均繼承自 ProgressBar,我們可以直接宣告預設的 SeekBar 元件來使用,亦可以透過 layer-list 資源檔,達到自訂外觀的效果。

➥基本用法

➥自訂拖曳按鈕與進度條外觀

➥透過 Selector 與 layer-list 資源檔自訂拖曳按鈕與進度條外觀

基本用法

MainActivity.java

activity_main.xml

以上直接透過程式碼的方式,示範 SeekBar 元件的基本使用方式,以下將常用到的設定參數條列如下 –

android:max

設定 SeekBar 範圍的最大值。

android:progress

設定拖曳鈕目前的位置數值。

android:thumb

設定拖曳鈕的圖案。

android:progressDrawable

設定 SeekBar 的長條狀底圖。

 

自訂拖曳按鈕與進度條外觀

activity_main.xml

我們可以直接透過設定 android:thumb 與 android:progressDrawable 屬性的方式,將 SeekBar 做一些基本的外觀變化,但是若我們只是單純的設定圖檔,當使用者按下拖曳按鈕時,拖曳按鈕並不會有按下的效果,這個時候,Selector 資源檔的運用就派上用場了。

 

透過 Selector 與 layer-list 資源檔自訂 SeekBar 外觀

為了更進一步的實作 SeekBar 上一些外觀上的效果,我們通常會使用 Selector 資源檔來設定 android:thumb 屬性,並使用 layer-list 資源檔來設定 android:progressDrawable 屬性,相關程式碼如下 –

thumb_selector.xml

首先我們自訂了一個名為 thumb_selector.xml 的 Selector 資源檔,並在其中定義了元件在預設狀態以及按下狀態時的圖案。

progress_layer.xml

接著我們自訂了一個名為 progress_layer.xml 的 layer-list 資源檔,其中我們必須定義兩個帶有特定 id 名稱的 <item> 標籤,條列如下 –

@android:id/background

此 id 的 <item> 標籤代表著 SeekBar 中進度條的底圖圖片,不得任意修改 id 名稱。

@android:id/progress

此 id 的 <item> 標籤代表著 SeekBar 中進度條的進度值圖片,不得任意修改 id 名稱。

activity_main.xml

最後,將 android:progressDrawable 與 android:thumb 屬性設定為之前定義好的 layer-list 與 selector 資源檔,自訂外觀就完成了。另外,若是我們想要進一步改變進度條外觀的形狀,也很簡單,只要在 <layer-list> 中的 <item> 標籤內加入 <shape> 定義即可。

賽肥膩膩

我們是低調到不行的肥膩夫妻檔,一路上一邊吵鬧一邊記錄著生活大小事,偶爾一起暴飲暴食再偶爾一起節食減肥,最沒恆心與毅力但一路走來也持續減肥了好幾次,我們重量不重質,所以完全沒有效果也是理所當然的事。

上 / 下一篇文章

臉書留言

一般留言

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *