系統內建的SeekBar組件的樣式較為老土,已經不能滿足廣大開發人員的需求了,這裡給大家介紹一個簡單快捷的定製自己的SeekBar樣式的方法,不必重寫哦! 1.準備幾張個人化的圖片,一張是拖動條背景圖,一張是進度條圖,一張是拖動條圖。 這裡給幾張示範圖:
:拖動條背景圖
:進度條圖
:拖動條圖
2.在res/drawable 目錄下建立一個xml檔案 ,配置資訊如下: seekbar_progress.xml[html] <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/background"> // 背景項 <nine-patch android:src="@drawable/progress_background" /> // 背景圖 // 這裡使用9檔案,因此這麼配置如果使用的是普通圖片可直接使用<drawable />標籤,或者使用<shape />標籤,自訂圖形 </item> <item android:id="@android:id/progress"> // 進度項 <clip> <nine-patch android:src="@drawable/progress_progress" /> // 進度圖 </clip> </item> </layer-list> 3.接下來<SeekBar ... />標籤中添加如下參數: [html] www.2cto.comandroid:progressDrawable="@drawable/seekbar_progress" android:thumb="@drawable/thumb_drawable" 好了,經過上面的三個步驟,就可以輕鬆的實現自訂的SeekBar視圖了。看下效果吧! 附:這裡再貼一個使用<shape />標籤為SeekBar設定背景和進度的xml設定檔,注意和上面的使用9檔案的比對:[html] <?xml version="1.0" encoding="utf-8"?> <!-- ChenJianLi Code: View: Seekbar 滑動時的背景效果 --> <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="#ffffffff" android:centerColor="#fffffff0" android:centerY="0.75" android:endColor="#fffffafa" android:angle="270" /> </shape> </item> <!-- 第二進度條 --> <item android:id="@android:id/secondaryProgress"> <clip> <shape> <corners android:radius="5dip" /> <gradient android:startColor="#8000cdcd" android:centerColor="#8000bfff" android:centerY="0.75" android:endColor="#a000b2ee" android:angle="270" /> </shape> </clip> </item> <!-- 第一進度條 --> <item android:id="@android:id/progress"> <clip> <shape> <corners android:radius="5dip" /> <gradient android:startColor="#ff00ffff" android:centerColor="#ff00ced1" android:centerY="0.75" android:endColor="#ff00f5ff" android:angle="270" /> </shape> </clip> </item> </layer-list>