首页 > 代码库 > 自定义漂亮的Android SeekBar样式

自定义漂亮的Android SeekBar样式

2024-10-18 16:01:39   211人阅读

系统自带的SeekBar真是太难看了，项目需要，只能自定义了,先来张效果图

技术分享

 

第一个Seekbar 背景是颜色，thumb是图片，上代码：

 

[html] view plaincopy
 
  1. <SeekBar  
  2.         android:id="@+id/timeline"  
  3.         android:layout_width="fill_parent"  
  4.         android:layout_height="wrap_content"  
  5.         android:focusable="true"  
  6.         android:maxHeight="4.0dip"  
  7.         android:minHeight="4.0dip"  
  8.         android:paddingLeft="16.0dip"  
  9.         android:paddingRight="16.0dip"  
  10.         android:progressDrawable="@drawable/po_seekbar"  
  11.         android:thumb="@drawable/seekbar_thumb" />  

drawable/po_seekbar.xml:

[html] view plaincopy
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <layer-list  
  3.   xmlns:android="http://schemas.android.com/apk/res/android">  
  4.     <item android:id="@*android:id/background">  
  5.         <shape>  
  6.             <solid android:color="#ff51495e" />  
  7.         </shape>  
  8.     </item>  
  9.     <item android:id="@*android:id/secondaryProgress">  
  10.         <clip>  
  11.             <shape>  
  12.                 <solid android:color="#ff51495e" />  
  13.             </shape>  
  14.         </clip>  
  15.     </item>  
  16.     <item android:id="@*android:id/progress">  
  17.         <clip>  
  18.             <shape>  
  19.                 <solid android:color="#ff996dfe" />  
  20.             </shape>  
  21.         </clip>  
  22.     </item>  
  23. </layer-list>  

drawable/seekbar_thumb.xml:

[html] view plaincopy
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <selector  
  3.   xmlns:android="http://schemas.android.com/apk/res/android">  
  4.     <item android:state_focused="true" android:state_pressed="false" android:drawable="@drawable/seekbar_thumb_normal" />  
  5.     <item android:state_focused="true" android:state_pressed="true" android:drawable="@drawable/seekbar_thumb_pressed" />  
  6.     <item android:state_focused="false" android:state_pressed="true" android:drawable="@drawable/seekbar_thumb_pressed" />  
  7.     <item android:drawable="@drawable/seekbar_thumb_normal" />  
  8. </selector>  


seekbar_thumb_pressed.png:

 

技术分享

seekbar_thumb_normal.png:

技术分享

第2个和第3个seekbar都是图片实现的

 

[html] view plaincopy
 
  1. <SeekBar  
  2.     android:id="@+id/sb_detail_play_progress"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="wrap_content"  
  5.     android:layout_centerVertical="true"  
  6.     android:layout_gravity="center"  
  7.     android:paddingLeft="15.0dip"  
  8.     android:paddingRight="15.0dip"  
  9.     android:progressDrawable="@drawable/progress_holo_light"  
  10.     android:thumb="@drawable/detail_icon_schedule_ball" />  


drawable/progress_holo_light.xml:

 

 

[html] view plaincopy
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <layer-list  
  3.   xmlns:android="http://schemas.android.com/apk/res/android">  
  4.     <item android:id="@*android:id/background" android:drawable="@drawable/volumn_bg" />  
  5.     <item android:id="@*android:id/secondaryProgress">  
  6.         <scale android:drawable="@drawable/volumn_front" android:scaleWidth="100%" />  
  7.     </item>  
  8.     <item android:id="@*android:id/progress">  
  9.         <scale android:drawable="@drawable/volumn_primary" android:scaleWidth="100%" />  
  10.     </item>  
  11. </layer-list>  

volumn_bg.9.png

 

技术分享

volumn_front.9.png

技术分享

volumn_primary.png

技术分享

第3个seekbar

技术分享

技术分享

这有个图片技术分享

demo下载链接：http://download.csdn.net/detail/w8320273/7800859

自定义漂亮的Android SeekBar样式


联系
我们