美文网首页
自定义 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 样式 详解

    关键属性: android:maxHeight 背景高度android:progressDrawable 进度...

  • android SeekBar

    概述 SeekBar,拖动条。主要的要点是自定义的样式,拖动条的值,拖动条值改变的监听器等等。 1.SeekBar...

  • android ProgressBar

    概述 progressBar,进度条,可以设置自定义的样式,其派生出很多控件,如SeekBar,RatingBar...

  • Notification详解

    Notification详解 Notification的使用步骤 自定义Notification样式 自定义Not...

  • SeekBar自定义样式

    1.使用 2.属性介绍 3.进度条样式修改 新建player_setting_bright_progressbar...

  • Android 仿vivo的SeekBar样式

    本篇其实是有点水的,目的是为了记录一下SeekBar的样式自定义步骤,SeekBar使用并不是特别多,但一需要用的...

  • seekbar的使用

    转载连接:seekBar自定义样式 1.xml文件: 可以发现属性:thumbOffset为0,是为了确保thum...

  • 自定义seekbar遇到的问题

    项目需要自定义seekbar样式,记录一下这个过程中的问题和解决方案。UI设计样式如图:宽度填满父view 在实现...

  • Android自定义的SeekBar

    TextView设置删除线 TextView设置文本格式 自定义带二级进度的seekbar样式效果图: seekb...

  • seekBar镂空,透明效果

    功能开发 需求 设计要求seekBar样式具体如下图所示: 解决过程 首先自定义seek,实现颜色以及大小的变化。...

网友评论

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

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