如何在4.X版本实现Switch在5.X的效果

如何在4.X版本实现Switch在5.X的效果

前言

这个需求可能不多，不过本篇博客主旨是希望能通过记录实现这个需求的过程，给同学们一些解决问题的思路。

简单描述需求

首先应用是跑在4.4的系统上的，然后设计师大人设计了一个效果，如下图：

图片1

但是在4.X的版本是这样的，如图

图片2

我自定义的结果是介于两者之间，如图

图片3

---

然后我就开始各种百度。。。结果还真是让人悲伤，大家的文章基本上都是定义thumb和track来实现如下图的样式：

图片4

显然这不能满足我们的设计需求。百度无果，也不能说做不了（毕竟我也是脸皮薄（偷笑）），然后就想既然5.X可以实现，那就看看源码啦。

下面是重要源码分析

首先我这是宽度不够，就是设计图是一个圆形图标，但是我的是一个长条

    private int mThumbWidth;//这个是上面滑块的宽度，因为我的滑块是长条，所以我在这里入手，看看这个宽度是怎么计算来的
//然后一搜就到了这个菊花，mThumbWidth是取得maxTextWidth和thumbWidth中较大值
   mThumbWidth = Math.max(maxTextWidth, thumbWidth);
//再去找这两个宽度哪里来的，这里赋值，然后发现maxTextWidth是mOnLayout.getWidth()和mOffLayout.getWidth()中较大的值，还有mThumbTextPadding*2(就是左右两面的padding)
 final int maxTextWidth;
        if (mShowText) {
            maxTextWidth = Math.max(mOnLayout.getWidth(), mOffLayout.getWidth())
                    + mThumbTextPadding * 2;
        } else {
            maxTextWidth = 0;
        }
//下面继续找mOnLayout和mOffLayout了，这两个值来自于mTextOn和mTextOff
if (mShowText) {
            if (mOnLayout == null) {
                mOnLayout = makeLayout(mTextOn);
            }

            if (mOffLayout == null) {
                mOffLayout = makeLayout(mTextOff);
            }
        }
//mTextOn和mTextOff，终于到这里了，其实就是我们设置的文字了，通过如下两个属性 android:textOff=""和android:textOn=""
mTextOn = a.getText(com.android.internal.R.styleable.Switch_textOn);
        mTextOff = a.getText(com.android.internal.R.styleable.Switch_textOff);

解决方案1

既然这个文字可以影响的话，那就简单啦，多写几个空格不就好了，这里就得到解决方案了。

继续源码分析

上面我们还有一个参数也是可以影响到最终的mThumbWidth的，还记得么？没错就是mThumbTextPadding啦，字面意思很好理解吧，就是文字的padding值了，下面看看源码啦

//只是一个属性啊，这就简单了，其实对应的就是android:thumbTextPadding=""

mThumbTextPadding = a.getDimensionPixelSize(
                com.android.internal.R.styleable.Switch_thumbTextPadding, 0);

解决方案2

这就不多说了，简单设置一下就行了啊。

总结

这里主要是介绍一种解决问题的方式，问题滑块宽度不够—>去源码中看哪些值影响—>设置可影响的值—>达到目的

这也鼓励大家多看源码，难度大的看不懂，可以从简单的入手，无论如何，这也是进入高级开发的一个必经路，—–在此共勉