拖动条控件 seekbar 设置

 

原文：https://www.jianshu.com/p/5eb99931c266

最近博主遇到一个超级2B的产品经理。有多2呢？可以这么说，为了赶进度，不惜让UI把能用图片的都切图，加快移动端的进度。

在这里，我举一个最简单的例子，让各位开心一下。

如下图，是产品效果图：

 

然后让UI给了三个图。分别是seekbar的背景图，progress的图，thumb的图。三个图片。

我一看，差点没喷血。

这样的seekbar应该算是最初级的个性化设置的seekbar了吧。之前有过其他需求的seekbar，我只能自定义控件来完成。但是这个效果图，我连自定义控件都不必做，分分钟完成。

好了不扯淡了，我们说一下这种最简单的seekbar怎么做。同时给大家说明怎么做个性化的seekbar。今天不讲怎么自定义控件做seekbar，太简单了，网上一大堆，以后的日子，我会找一个有特点的例子跟大家分享怎么自定义控件。今天我们只分享怎么最简单的实现个性化seekbar。

首先，直接用源生的控件seekbar即可：

 

大家可以看到，有一个属性，我给的是一个样式（style），对样式属性用的好，可以省很多事（比如不用自定义控件，比如可以抽出来，其他地方都使用）。

android:progressDrawable="@drawable/seekbar_style"

我们看看这个属性里面怎么做：

 

 

Seekbar的ID只能有2个，background和progress，不能在这里设置thumb。因为seekbar的thumb可以单独设置，具体怎么设置，我可以给大家写一个例子。这里还可以更炫酷的设置，但是一般这几个大多数就够了。具体需求可以百度自行添加。

我们再看thumb。刚才我们说了，这个thumb，可以设置各种样式，可以是给定的图片，可以有各种状态。

如果想个性化thumb的样式，可以在这里设置样式：

android:thumb="@drawable/ic_seekbar_thumb"

（本文只用一张图片，为什么用图片，先埋一个伏笔）在这里，把@drawable/ic_seekbar_thumb改成 你要样式。比如drawable/thumb_style。

 

这里我们讲一下应用更多的，把thumb设置成指定的图片。

那么thumb这个属性这样设置：

android:thumb="@drawable/ic_seekbar_thumb"

直接设置成图片。这就可以了。是不是很意外？给大家看一下效果图：

 

大家发现问题了吗？还记得刚才埋的伏笔吗？直接使用图片是不行的。因为给的图片是png格式，是没有填充色的（background），他会默认填充黑色。但是这里又设置不成thumb背景为null，怎么办？

其实很简单，再加一个属性就够了。

android:splitTrack="false"

这个属性设置为false就可以了。效果就会像上图一样，没有背景色了。

好了，最简单的一个seekbar，希望对你有用。后面我会慢慢补充自定义seekbar。

作者：小饼干也有梦想
链接：https://www.jianshu.com/p/5eb99931c266
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。