android SeekBar 样式设置（包含自定义样式）

  UI参考



 



 

 



 

 



 

 





 

 



 

Xml代码  


<SeekBar  

       android:id="@+id/seekbar"  

       style="?android:attr/progressBarStyleHorizontal"  

       android:layout_width="fill_parent"  

       android:layout_height="wrap_content"  

       android:progressDrawable="@layout/seekbar_style"  

       android:thumb="@layout/thumb" />  

 

 

方式一：通过背景图片设置实现

seekbar_style.xml

 

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">  

        <!-- 背景图 :这里使用9文件，因此这么配置,  

        如果使用的是普通图片可直接使用<drawable />标签，或者使用<shape />标签，自定义图形 -->  

        <nine-patch android:src="@drawable/skin_bg" />  

    </item>  

    <!-- 进度图 -->  

    <item android:id="@android:id/progress">  

     <clip >  

            <nine-patch android:src="@drawable/skin_bg2" />  

     </clip>  

     </item>  

</layer-list>  

 

thumb.xml

Xml代码  


<?xml version="1.0" encoding="UTF-8"?>  

<selector xmlns:android="http://schemas.android.com/apk/res/android">  

    <!-- seekbar的滑块样式 -->  

    <!-- 按下状态 -->  

    <item android:drawable="@drawable/menu_bg" android:state_pressed="true"/>  

    <!-- 普通无焦点状态 -->  

    <item android:drawable="@drawable/menu_bg" android:state_focused="false" android:state_pressed="false"/>  

  

</selector>  

 

 

 

方式二：通过<shape  />标签为SeekBar设置背景和进度的xml配置文件

seekbar_style.xml

 

Xml代码  


<?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>     

 方式三：

Xml代码  


<?xml version="1.0" encoding="UTF-8"?>  

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  

  

    <!-- 使用<drawable />标签设置背景图片 -->  

    <!-- 背景项 -->  

  

    <item  

        android:id="@android:id/background"  

        android:drawable="@drawable/timeline1"></item>  

    <!-- 进度图 -->  

  

    <item  

        android:id="@android:id/progress"  

        android:drawable="@drawable/timeline2"></item>  

  

</layer-list>  

 

SeekBar_仿天天动听.zip (55.1 KB)
下载次数: 481