本章介绍自定义SeekBar的两种方式:自定义图形 和 使用图片。
点击查看:SeekBar示例源码
1. 自定义图形
<SeekBar
android:id="@+id/seekbar_def"
android:layout_width="match_parent"
android:layout_height="16dp"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:progressDrawable="@drawable/seekbar_self"
android:thumb="@drawable/seekbar_self_thumb"
android:max="100"
android:progress="10" />
说明:
(01) 指定了SeekBar的android:progressDrawable为seekbar_def.xml。
(02) 制定了android:thumb为seekbar_self_thumb.xml。
seekbar_def.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"
android:drawable="@drawable/seekbar_self_bg_fill" />
<!-- 进度条 -->
<item android:id="@android:id/progress"
android:drawable="@drawable/seekbar_self_progress_fill" />
</layer-list>
seekbar_self_bg_fill.xml的内容如下:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ff397cbf" />
<corners android:radius="4dp" />
<!-- 上下边缘都是2dp,且颜色与背景色一样
保证了SeekBar中thumb的高度 > SeekBar的高度 -->
<stroke
android:width="2dp"
android:color="#ffffffff" />
</shape>
seekbar_self_progress_fill.xml的内容如下:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ff397cbf" />
<corners android:radius="4dp" />
<!-- 上下边缘都是2dp,且颜色与背景色一样
保证了SeekBar中thumb的高度 > SeekBar的高度 -->
<stroke
android:width="2dp"
android:color="#ffffffff" />
</shape>
seekbar_self_thumb.xml的内容如下:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/seekbar_self_thumb_fill" />
</selector>
seekbar_self_thumb_fill.xml的内容如下:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#ffffffff" />
<size
android:width="16dp"
android:height="16dp" />
<!-- thumb 边框 -->
<stroke
android:width="1dp"
android:color="#ff888888" />
</shape>
若要自定义的SeekBar的thumb的直径 > SeekBar的高度,要注意一下几点:
(01) SeekBar的background和progress的边缘(stroke)尺寸要大于0,且颜色要和背景色相同。
(02) SeekBar的thumb的边缘(stroke)要有渐变,即stroke颜色和solid颜色不同。
2. 使用图片
<SeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:max="100"
android:progress="20"
android:progressDrawable="@drawable/seekbar_pic"
android:thumb="@drawable/seekbar_pic_thumb" />
seekbar_pic.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" android:drawable="@drawable/bar_dn" />
<!-- 进度度 -->
<item android:id="@android:id/progress" android:drawable="@drawable/bar_up" />
</layer-list>
说明:bar_dn.png和bar_up.png是2张图片。
seekbar_pic_thumb.xml
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 按下状态 -->
<item android:state_pressed="true" android:drawable="@drawable/thumb_dn" />
<!-- 焦点状态 -->
<item android:state_focused="true" android:drawable="@drawable/thumb_up" />
<!-- 默认状态 -->
<item android:drawable="@drawable/thumb_up" />
</selector>
说明:thumb_up.png和thumb_dn.png是2张图片。