Android 从 drawable 自定义 Seekbar

Question

你能帮我画出如图所示的自定义Seekbar吗 -

这是我的代码：

<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

Answer 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 and ic_volume_full - ic_volume_full

Android 从 drawable 自定义 Seekbar

Android custom Seekbar from drawable

user-interface

android

seekbar

android-seekbar