android SeekBar 样式大全

  UI参考

 

 

 

 

 

 

 

 
 

 

Xml代码  

1. <SeekBar  
2.        android:id="@+id/seekbar"  
3.        style="?android:attr/progressBarStyleHorizontal"  
4.        android:layout_width="fill_parent"  
5.        android:layout_height="wrap_content"  
6.        android:progressDrawable="@layout/seekbar_style"  
7.        android:thumb="@layout/thumb" />  

 

 

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

seekbar_style.xml

 

Xml代码  

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  
3.     <!-- 背景项 -->  
4.     <item android:id="@android:id/background">  
5.         <!-- 背景图 :这里使用9文件，因此这么配置,  
6.         如果使用的是普通图片可直接使用<drawable />标签，或者使用<shape />标签，自定义图形 -->  
7.         <nine-patch android:src="@drawable/skin_bg" />  
8.     </item>  
9.     <!-- 进度图 -->  
10.     <item android:id="@android:id/progress">  
11.      <clip >  
12.             <nine-patch android:src="@drawable/skin_bg2" />  
13.      </clip>  
14.      </item>  
15. </layer-list>  

 

thumb.xml

Xml代码  

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <!-- seekbar的滑块样式 -->  
4.     <!-- 按下状态 -->  
5.     <item android:drawable="@drawable/menu_bg" android:state_pressed="true"/>  
6.     <!-- 普通无焦点状态 -->  
7.     <item android:drawable="@drawable/menu_bg" android:state_focused="false" android:state_pressed="false"/>  
8.   
9. </selector>  

 

 

 

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

seekbar_style.xml

 

Xml代码  

1. <?xml version="1.0" encoding="utf-8"?>     
2. <!-- ChenJianLi Code: View: Seekbar      
3.         滑动时的背景效果 -->     
4.     
5. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">     
6.   <!--  背景  -->     
7.     <item android:id="@android:id/background">     
8.         <shape>     
9.             <corners android:radius="5dip" />     
10.             <gradient     
11.                     android:startColor="#ffffffff"    
12.                     android:centerColor="#fffffff0"    
13.                     android:centerY="0.75"    
14.                     android:endColor="#fffffafa"    
15.                     android:angle="270"    
16.             />     
17.         </shape>     
18.     </item>     
19.     <!--  第二进度条  -->     
20.     <item android:id="@android:id/secondaryProgress">     
21.         <clip>     
22.             <shape>     
23.                 <corners android:radius="5dip" />     
24.                 <gradient     
25.                         android:startColor="#8000cdcd"    
26.                         android:centerColor="#8000bfff"    
27.                         android:centerY="0.75"    
28.                         android:endColor="#a000b2ee"    
29.                         android:angle="270"    
30.                 />     
31.             </shape>     
32.         </clip>     
33.     </item>     
34.     <!--  第一进度条  -->     
35.     <item android:id="@android:id/progress">     
36.         <clip>     
37.             <shape>     
38.                 <corners android:radius="5dip" />     
39.                 <gradient     
40.                         android:startColor="#ff00ffff"    
41.                         android:centerColor="#ff00ced1"    
42.                         android:centerY="0.75"    
43.                         android:endColor="#ff00f5ff"    
44.                         android:angle="270"    
45.                 />     
46.             </shape>     
47.         </clip>     
48.     </item>     

 方式三：

Xml代码  

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  
3.   
4.     <!-- 使用<drawable />标签设置背景图片 -->  
5.     <!-- 背景项 -->  
6.   
7.     <item  
8.         android:id="@android:id/background"  
9.         android:drawable="@drawable/timeline1"></item>  
10.     <!-- 进度图 -->  
11.   
12.     <item  
13.         android:id="@android:id/progress"  
14.         android:drawable="@drawable/timeline2"></item>  
15.   
16. </layer-list>  

 

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