SeekBar自定义样式

网上的SeekBar自定义样式的资料很多，大多是抄来抄去。我最近用到这个，也从网上抄了一个，但是遇到不少问题，其中一个就是SeekBar的背景条不显示，最后才找到解决方法。

1. 使用自定义SeekBar

    <SeekBar
        android:id="@+id/ctrl_seekBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:progressDrawable="@drawable/custom_seekbar"
        android:thumb="@drawable/cust_seekbar_thumb"
        android:maxHeight="4dp"
        android:minHeight="4dp" />

其中最重要的就是

android:progressDrawable="@drawable/custom_seekbar"

android:thumb="@drawable/cust_seekbar_thumb"

android:progressDrawable指定了seekbar的样式

android:thumb指定了seekbar的按钮

SeekBar效果图:

2. 自定义SeekBar： custom_seekbar

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape>
            <solid android:color="#ff58595c" />
            <size android:height="5dp" />
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <solid android:color="#ff58595c"/>
                <size android:height="5dp" />
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <solid android:color="#ff5292fb"/>
                <size android:height="5dp" />
            </shape>
        </clip>
    </item>

</layer-list>

seekbar共有3个状态条：background, progress, secondarProgress.

<layer-list>将多个图片或上面两种效果按照顺序层叠起来.

Android的文档中就专门提到了layer-list多用progressbar

关于shape，selector，layer-list参见：

Android: shape，selector，layer-list辨析

<clip>的功能就是裁剪

其它标签不说了.

我之前碰到的SeekBar的background条显示不出来就是因为把background也用clip包起来了,这是很多其它文章也是这么干的.真是害得我折腾了很久才找出原因.

3. Thumb 自定义cust_seekbar_thumb

<?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/ic_seekbar" />
    <item android:state_focused="true" android:state_pressed="true"
        android:drawable="@drawable/ic_seekbar_down" />
    <item android:state_focused="false" android:state_pressed="true"
        android:drawable="@drawable/ic_seekbar_down" />
    <item android:drawable="@drawable/ic_seekbar" />
</selector>

4. 参考文献

[1] 自定义漂亮的Android SeekBar样式

[2] Android API Guids

注:文献1的background使用clip包起来的