1. 程式人生 > >Android中如何修改SeekBar的預設樣式

Android中如何修改SeekBar的預設樣式

SeekBar的預設樣式如下:

想要修改成:(這種iphone的風格)

step1: 書寫 seekbar_style.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="5dip" />  
                 <gradient  
                         android:startColor="#ff9d9e9d"  
                         android:centerColor="#ff5a5d5a"  
                         android:centerY="0.75"  
                         android:endColor="#ff747674"  
                         android:angle="270"  
                 />  
             </shape>  
         </item>  
      
         <item android:id="@android:id/secondaryProgress">  
             <clip>  
                 <shape>  
                     <corners android:radius="5dip" />  
                     <gradient  
                             android:startColor="#80ffd300"  
                             android:centerColor="#80ffb600"  
                             android:centerY="0.75"  
                             android:endColor="#a0ffcb00"  
                             android:angle="270"  
                     />  
                 </shape>  
             </clip>  
         </item>  
      
         <item android:id="@android:id/progress">  
             <clip>  
                 <shape>  
                     <corners android:radius="5dip" />  
                     <gradient  
                             android:startColor="#ff0099CC"  
                             android:centerColor="#ff3399CC"  
                             android:centerY="0.75"  
                             android:endColor="#ff6699CC"  
                             android:angle="270"  
                     />  
                 </shape>  
             </clip>  
         </item>  
      
     </layer-list>

step2: 書寫 seekbar_thumb.xml  此處這個thumb 我就簡化處理了,只固定使用一張圖片,不管 focus, press與否

將這張圖片放在 drawable-hdpi資料夾下

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">       
        <item   
            android:drawable="@drawable/btn_circle_normal" />        
    </selector>  

step3: xml設定

  <SeekBar
             
                   android:layout_centerHorizontal="true"
                   android:progress="50"
                   android:max="100"
                   android:progressDrawable="@drawable/seekbar_style"
                   android:thumb="@drawable/seekbar_thumb"


                   />

這樣就算差不多完成了。

參考資料: