用.9图改变SeekBar样式

时间:2023-02-01 13:54:53

 

1.布局文件中的SeekBar:
(进度条样式 android:progressDrawable="@drawable/seekbar_bg")

(拖动按钮 android:thumb="@drawable/thumb_bar"  也可配置样式,如按下状态等;)

                 <SeekBar
                        android:id="@+id/my_seekBar"
                        android:layout_width="300dp"
                        android:layout_height="20dp"
                        android:max="100"
                        android:minHeight="10dp"  
                        android:maxHeight="10dp"  
                        android:paddingLeft="8dp"  
                        android:paddingRight="8dp"
                        android:thumbOffset="5dp"
                        android:layout_centerVertical="true"
                          android:progressDrawable="@drawable/seekbar_bg"
                          android:thumb="@drawable/thumb"
                         />
 
 
2.进度条样式文件配置 seekbar_bg.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" >
        
        <nine-patch android:src="@drawable/bar_dn" />  
    </item>
        
       <!--第二进度-->
    <item android:id="@+android:id/SecondaryProgress" >
          <nine-patch android:src="@drawable/bar_dn" />  
    </item> 


      <!--进度-->
    <item android:id="@+android:id/progress" >
        <clip > 
          <nine-patch android:src="@drawable/bar_up"/>
        </clip>
    </item>
  
</layer-list>


----以上是用.9图的配置,如果直接用图片则可以直接这样配置:

 <layer-list>

   <item 

           android:id="@+android:id/background" 
           android:drawable="@drawable/bar_dn" />

<item 

           android:id="@+android:id/SecondaryProgress" 
           android:drawable="@drawable/bar_dn" />

<item 

            android:id="@+android:id/progress" 
           android:drawable="@drawable/bar_up" />

</layer-list>


3.  拖动按钮 android:thumb="@drawable/thumb"(下图中的小白点)
用.9图改变SeekBar样式

进度条.9图片(后缀为.9.png)

bar_dn.9.png

用.9图改变SeekBar样式

bar_up.9.png

用.9图改变SeekBar样式