Android自定义Seekbar来自drawable

时间:2016-02-25 09:23:30

标签: android user-interface seekbar android-seekbar

请你帮我画一下自定义的Seekbar,如图所示 -

enter image description here

这是我的代码:

<android.support.v7.widget.AppCompatSeekBar
            android:id="@+id/volume_seekbar"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:progressDrawable="@drawable/seekbar_drawable"/>

seekbar_drawable.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_background" />
    <item
        android:id="@android:id/progress"
        android:drawable="@drawable/seekbar_progress" />
</layer-list>

seekbar_background.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <gradient
                android:layout_height="20dp"
                android:centerY="0.5"/>
        </shape>
    </item>
    <item>
        <clip>
            <bitmap
                android:layout_height="10dp"
                android:src="@drawable/volume_empty"
                android:tileMode="repeat" />
        </clip>
    </item>
</layer-list>

seekbar_progress.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <clip>
            <shape>
                <gradient
                    android:centerY="0.5"
                    android:endColor="@color/colorWhite"
                    android:startColor="@color/colorWhite" />
            </shape>
        </clip>
    </item>
    <item>
        <bitmap
            android:src="@drawable/volume_empty"
            android:tileMode="repeat" />
    </item>
</layer-list>

其中@ drawable / volume_empty为volume_empty.png

1 个答案:

答案 0 :(得分:1)

我找到了解决方案。

seekbar_background.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <gradient
                android:centerY="0.5"/>
        </shape>
    </item>
    <item>
        <clip>
            <bitmap
                android:src="@drawable/ic_volume_empty"
                android:tileMode="repeat" />
        </clip>
    </item>
</layer-list>

seekbar_progress.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <clip>
            <bitmap
                android:src="@drawable/ic_volume_full"
                android:tileMode="repeat" />
        </clip>
    </item>
    <item>
        <bitmap
            android:src="@drawable/ic_volume_empty"
            android:tileMode="repeat" />
    </item>
</layer-list>

我在两张图片中都添加了类似的透明填充,例如ic_volume_empty - ic_volume_empty和ic_volume_full - ic_volume_full