Android模仿三星手機系統滑動條滑動時滑塊變大的特效

標籤：仿三星進度條   seekbar   thum   android   xml   

使用三星手機的過程中發現三星手機系統內建的滑動條有一個特效，比如調節亮度的滑動條，在滑動滑塊的過程中，滑塊會變大，功能很小但是體驗卻很好，於是決定做一個這樣的效果出來，好了廢話不多說了，下面開始實現

我們知道在SeekBar控制項中有兩個很重要的屬性，一個是進度條（即android:progressDrawable屬性），一個是滑塊（即android:thumb屬性），我們主要用到的是滑塊的特效，這裡就把進度條的配置稍微的介紹一下，先上代碼：

在res/xml檔案夾下建立seekbar_progress.xml檔案：

<?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="0dip" />            <gradient                android:angle="270"                android:centerColor="#999999"                android:centerY="0.75"                android:endColor="#999999"                android:startColor="#999999" />        </shape>    </item>    <item android:id="@android:id/secondaryProgress">        <clip>            <shape>                <corners android:radius="1dip" />                <gradient                    android:angle="270"                    android:centerColor="#88803990"                    android:centerY="0.75"                    android:endColor="#88803990"                    android:startColor="#88803990" />            </shape>        </clip>    </item>    <item android:id="@android:id/progress">        <clip>            <shape>                <corners android:radius="1dip" />                <gradient                    android:angle="270"                    android:centerColor="#803990"                    android:centerY="0.75"                    android:endColor="#803990"                    android:startColor="#803990" />            </shape>        </clip>    </item></layer-list>

代碼的內容很簡單，主要是設定進度條的第一進度、第二進度和背景顏色，這裡就不做具體介紹了。

接下來開始我們的滑塊屬性，要想實現三星的那種效果，我們必須要處理正常狀態下和按下的事件，應該都想到了狀態選取器，這裡我們在res/drawable目錄下建立滑塊的狀態選取器thum_selector.xml，然後設定去設定它的一些item屬性，但是這時候發現我們的滑塊還沒有建立呢，這裡的滑塊我們不使用圖片，而是通過繪製的方式來實現（至於具體的怎麼去建立，我們可以在Android源碼中找到thum的設定檔，改改就行了），在xml檔案夾下建立seekbar_thum_normal.xml檔案：

<?xml version="1.0" encoding="UTF-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle" >    <gradient        android:angle="270"        android:endColor="#ff585858"        android:startColor="#ffffffff" />        <size        android:height="15dp"        android:width="15dp" />    <stroke          android:width="5dp"          android:color="#00000000" />    <corners          android:radius="8dp" />    <solid android:color="#dcdcdc"/></shape>

按壓狀態下滑塊的設定檔seekbar_thum_pressed.xml：

<?xml version="1.0" encoding="UTF-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle" >    <gradient        android:angle="270"        android:endColor="#ff585858"        android:startColor="#ffffffff" />        <size        android:height="15dp"        android:width="15dp" />    <corners          android:radius="8dp" />    <solid android:color="#dcdcdc"/></shape>

仔細看會發現這兩個檔案主要的區別就是上一個檔案多了一個stroke屬性，它表示在滑塊的外圍進行描邊，我們將背景設定為透明效果，這樣處理的效果是使滑塊的大小一致，不至於在滑動的過程中出現進度條上下跳動的問題

接下來就是我們滑塊的狀態選取器的布局thum_selector.xml了

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">      <item android:state_pressed="true"          android:state_window_focused="true"          android:drawable="@xml/seekbar_thum_pressed" />      <item android:state_focused="true"          android:state_window_focused="true"          android:drawable="@xml/seekbar_thum_pressed" />      <item android:state_selected="true"          android:state_window_focused="true"          android:drawable="@xml/seekbar_thum_pressed" />      <item android:drawable="@xml/seekbar_thum_normal" /> </selector>

最後貼一下seekbar的布局檔案，說明一下可以通過調節android:thumbOffset屬性，讓進度條的進度在滑塊的中心點

<SeekBar             android:id="@+id/seekBar1"             android:layout_width="fill_parent"             android:layout_height="wrap_content"             android:progressDrawable="@xml/seekbar_progress"             android:thumb="@drawable/thum_selector"             android:thumbOffset="10dp"             android:minHeight="5dp"             android:maxHeight="5dp"             >         </SeekBar>

到此，我們模仿的效果就結束了，上一下三星手機的

Android模仿三星手機系統滑動條滑動時滑塊變大的特效