自定义漂亮的Android SeekBar样式

时间：2014-12-30 16:30:45 阅读：262 评论：0 收藏：0 [点我收藏+]

标签：

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

技术分享

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

[html] view plain copy

drawable/po_seekbar.xml:

[html] view plain copy

drawable/seekbar_thumb.xml:

[html] view plain copy

<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="false" android:drawable="@drawable/seekbar_thumb_normal" />
<item android:state_focused="true" android:state_pressed="true" android:drawable="@drawable/seekbar_thumb_pressed" />
<item android:state_focused="false" android:state_pressed="true" android:drawable="@drawable/seekbar_thumb_pressed" />
<item android:drawable="@drawable/seekbar_thumb_normal" />
</selector>

seekbar_thumb_pressed.png:

技术分享

seekbar_thumb_normal.png:

技术分享

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

[html] view plain copy

drawable/progress_holo_light.xml:

[html] view plain copy

<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@*android:id/background" android:drawable="@drawable/volumn_bg" />
<item android:id="@*android:id/secondaryProgress">
<scale android:drawable="@drawable/volumn_front" android:scaleWidth="100%" />
</item>
<item android:id="@*android:id/progress">
<scale android:drawable="@drawable/volumn_primary" android:scaleWidth="100%" />
</item>
</layer-list>