自定義 SeekBar 樣式 詳解

custom seekbar.png
    <SeekBar
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:max="100"
        android:maxHeight="10dp"
        android:progress="40"
        android:progressDrawable="@drawable/seekbar_bg"
        android:secondaryProgress="60"
        android:splitTrack="false"
        android:thumb="@drawable/seekbar_thumb"/>

關(guān)鍵屬性:

android:maxHeight 背景高度
android:progressDrawable 進(jìn)度條背景
android:thumb 進(jìn)度thumb(拖塊)
android:splitTrack thumb是否切割seekbar背景,默認(rèn)true,會看到thumb周圍區(qū)域被切割,效果如下(為了效果明顯,背景高度特意改高了)

image.png

seekbar_bg.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">
        <shape>
            <corners android:radius="5dp" />
            <solid android:color="#90A4AE" />
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dp" />
                <solid android:color="#FFEB3B" />
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dp" />
                <solid android:color="#2196F3" />
            </shape>
        </clip>
    </item>

</layer-list>

seekbar_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="oval">
            <solid android:color="#FF5722" />
            <size android:width="30dp" android:height="30dp" />
        </shape>
    </item>

    <item>
        <shape android:shape="oval">
            <solid android:color="#3F51B5" />
            <size android:width="30dp" android:height="30dp" />
        </shape>
    </item>
</selector>

android:thumbTint

可以不指定android:thumb 指定 android:thumbTint來改變thumb顏色,按下/點(diǎn)擊有系統(tǒng)默認(rèn)動效。

    <SeekBar
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:max="100"
        android:maxHeight="10dp"
        android:progress="40"
        android:progressDrawable="@drawable/seekbar_bg"
        android:secondaryProgress="60"
        android:splitTrack="false"
        android:thumbTint="#FF5722" />
android:thumbTint

前后間距問題:

android:paddingStart="0dp"
android:paddingEnd="0dp"

reference:
http://www.zoftino.com/android-seekbar-and-custom-seekbar-examples

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容