美文网首页
自定义 SeekBar 样式 详解

自定义 SeekBar 样式 详解

作者: 詹徐照 | 来源:发表于2018-09-07 15:34 被阅读22次
    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"/>
    

    关键属性:

    android:maxHeight 背景高度
    android:progressDrawable 进度条背景
    android:thumb 进度thumb(拖块)
    android:splitTrack thumb是否切割seekbar背景,默认true,会看到thumb周围区域被切割,效果如下(为了效果明显,背景高度特意改高了)

    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颜色,按下/点击有系统默认动效。

        <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

    相关文章

      网友评论

          本文标题:自定义 SeekBar 样式 详解

          本文链接:https://www.haomeiwen.com/subject/ztrxgftx.html