seekBar自定義樣式
阿新 • • 發佈:2019-02-01
<style name="Base.Widget.AppCompat.SeekBar" parent="android:Widget"> <item name="android:indeterminateOnly">false</item> <item name="android:progressDrawable">@drawable/custom_seek_bar_style</item> <item name="android:indeterminateDrawable">@drawable/abc_seekbar_track_material</item> <item name="android:thumb">@drawable/abc_seekbar_thumb_material</item> <item name="android:focusable">true</item> <item name="android:paddingLeft">16dp</item> <item name="android:paddingRight">16dp</item> </style>
這是seekBar的style檔案
比較關鍵的是 android:progressDrawable這個屬性設定的drawable檔案就是seekBar的主要UI配置檔案。
而thumb後面對應的drawable檔案是seekBar上可以拖拽的按鈕的資原始檔。
還有maxHeight,minHeight是設定高度的。在這裡就不一一贅述。
主要講講android:progressDrawable對應的資原始檔,下面是custom_seek_bar_style的內容:
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!--第一個item,id=background 是seekBar整個的背景設定--> <item android:id="@android:id/background" android:drawable="@drawable/a"/> <!--第二個item, id=seconddaryPrpgress 一般是用來表示緩衝區。(配置和第三個item一樣就可以)--> <item android:id="@android:id/secondaryProgress"> <scale android:scaleWidth="100%"> <selector> <item android:state_enabled="false"> <color android:color="@android:color/transparent"/> </item> <item android:drawable="@drawable/a"/> </selector> </scale> </item> <!--第三個item, id=progress 一般表示 已經下載完成或滑動選中的部分,也可以理解成seekBar滑動按鈕左邊的UI配置--> <item android:id="@android:id/progress"> <scale android:scaleWidth="100%"> <selector> <item android:state_enabled="false"> <color android:color="@android:color/transparent"/> </item> <item android:drawable="@drawable/b"/> </selector> </scale> </item> </layer-list>
這裡面有幾個地方需要注意:
1.三個item的順序不能改變。改變會出UI問題,具體原因請看原始碼。
2.一般seekBar只有滑動按鈕左右兩部分UI。所以第二個item的drawable一般只要和第一個item的drawable一樣就可以了。因為他們都是在seekBar右邊的UI。
3自定義樣式的seekbar中,progress和secondaryprogress要根據其所在layerlist中的先後順序,設定其中後面出現的透明度為非100%不透明的,這樣才能讓底下的另一個可見。