Vvivo仿原声Android主题,Android 仿vivo的SeekBar样式

本篇其实是有点水的，目的是为了记录一下SeekBar的样式自定义步骤，SeekBar使用并不是特别多，但一需要用的时候就东找西找，实在不好，也耗时间，刚好看到vivo系统设备里面的SeekBar样式，就想借此做一下，再做一下记录。

最终效果

先来看下最终的效果，基本和vivo的一致了。

需要自定义的部分

从上图可以看出，有3个地方需要自定义：

已有进度颜色 - 蓝色

未有的进度颜色 - 灰色

圆形滑块

那么就开始吧，步骤不是很多

进度颜色

已有进度和未有进度的定义是在同一个xml文件里定义的。我们在res-drawable文件夹下，新建一个xml文件，类型是layer-list。

背景颜色为灰色，新建一个item，id是@android:id/background，这个是固定死的，不能改。

进度颜色为蓝色，同样新建一个item，id是@android:id/progress，也是不可以改的。

item内嵌一个shap，形状是矩形圆角，圆角半径是2dp。

复制代码

圆形滑块

圆形滑块，同样在res-drawable文件夹下，新建一个xml文件，类型是shape，形状为oval椭圆，后面会定义size，设置为圆形。

滑块的填充颜色为白色，使用solid标签定义。

滑块的边有一圈灰色，使用stroke标签定义，颜色灰色。

定义滑块的大小，使用size标签定义，大小为26dp。

android:shape="oval">

android:width="1dp"

android:color="#BBBBBB" />

android:width="26dp"

android:height="26dp" />

复制代码

背景和滑块配置

进度、背景使用progressDrawable属性配置。

滑块，使用thumb属性配置。如果需要去掉滑块，则设置为android:thumb="@null"即可。

注意：

maxHeight和minHeight必须要设置，否则滑块的高度会不能超过SeekBar的高度，少配置一个都不行！

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginStart="20dp"

android:layout_marginTop="20dp"

android:layout_marginEnd="20dp"

android:max="100"

android:maxHeight="2dp"

android:minHeight="2dp"

android:progress="0"

android:progressDrawable="@drawable/app_vivo_seek_bar_bg"

android:thumb="@drawable/app_vivo_seek_bar_thumb"

tools:progress="40" />

复制代码

处理滑块被截断的问题

5.0以下，使用上面的定义是没有问题的，但是在5.0却出现滑块和背景之间有截断的现象，处理这个问题，我们需要加以下属性来处理。

android:thumbOffset="0dp"

复制代码

左右两边有一定距离的padding

默认2边会有一定距离的padding，我们都配置为0dp即可。

android:paddingStart="0dp"

android:paddingLeft="0dp"

android:paddingEnd="0dp"

android:paddingRight="0dp"

复制代码

去掉拖拉滑块时，默认阴影效果

默认拽托滑块时，会有一圆阴影浮现在滑块上，如果需要去掉这个效果，需要加一个属性。

android:duplicateParentState="true"

复制代码

最终配置

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginStart="20dp"

android:layout_marginTop="20dp"

android:layout_marginEnd="20dp"

android:duplicateParentState="true"

android:max="100"

android:maxHeight="2dp"

android:minHeight="2dp"

android:paddingStart="0dp"

android:paddingLeft="0dp"

android:paddingEnd="0dp"

android:paddingRight="0dp"

android:progress="0"

android:progressDrawable="@drawable/app_vivo_seek_bar_bg"

android:thumb="@drawable/app_vivo_seek_bar_thumb"

android:thumbOffset="0dp"

tools:progress="40" />

复制代码