系统自带的SeekBar组件的样式较为老土,已经不能满足广大开发者的需求了,这里给大家介绍一个简单快捷的定制自己的SeekBar样式的方法,不必重写哦!
1.准备几张个性化的图片,一张是拖动条背景图,一张是进度条图,一张是拖动条图。
这里给几张示范图:
:拖动条背景图
:进度条图
:拖动条图
2.在res/drawable 目录下新建一个xml文件 ,配置信息如下:
seekbar_progress.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/progress_background" /> // 背景图 // 这里使用9文件,因此这么配置如果使用的是普通图片可直接使用<drawable />标签,或者使用<shape />标签,自定义图形
- </item>
- <item android:id="@android:id/progress"> // 进度项
- <clip>
- <nine-patch android:src="@drawable/progress_progress" /> // 进度图
- </clip>
- </item>
- </layer-list>
<?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/progress_background" /> // 背景图 // 这里使用9文件,因此这么配置如果使用的是普通图片可直接使用<drawable />标签,或者使用<shape />标签,自定义图形
</item>
<item android:id="@android:id/progress"> // 进度项
<clip>
<nine-patch android:src="@drawable/progress_progress" /> // 进度图
</clip>
</item>
</layer-list>
3.接下来<SeekBar ... />标签中添加如下参数:
- android:progressDrawable="@drawable/seekbar_progress"
- android:thumb="@drawable/thumb_drawable"
android:progressDrawable="@drawable/seekbar_progress"
android:thumb="@drawable/thumb_drawable"
好了,经过上面的三个步骤,就可以轻松的实现自定义的SeekBar视图了。看下效果吧!
附:这里再贴一个使用<shape />标签为SeekBar设置背景和进度的xml配置文件,注意和上面的使用9文件的比对:
- <?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>