Android控件篇15之 SeekBar(二)自定义样式

本章介绍自定义SeekBar的两种方式:自定义图形 和 使用图片。

点击查看:SeekBar示例源码

目录
1. 自定义图形
2. 使用图片

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张图片。

by skywang
Previous     Next