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

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

d248a69bacf2f2fd06b1867679520c0b.png

最终效果

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

f842e59ebf0f68bca05edb99c5779f01.gif

需要自定义的部分

从上图可以看出,有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″ />

复制代码

原文链接:https://blog.csdn.net/weixin_32246721/article/details/117641158?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165277698216781683986812%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165277698216781683986812&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-8-117641158-null-null.nonecase&utm_term=vivo

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
文明发言,共建和谐米科社区
提交
头像

昵称

取消
昵称表情图片