源生Switch控件在Android4.4无法显示？

首先，layout.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context="com.example.ning.myapplication.MainActivity">

    <Switch
        android:layout_marginTop="10dp"
        android:layout_width="50dp"
        android:layout_height="30dp"
        android:thumb="@drawable/nw_switch_custom_thumb_on"
        android:track="@drawable/nw_switch_custom_track_selector"
        />
</LinearLayout>

在Android4.4系统上无法渲染出 Switch控件，使用了 Layout Inspector 查看页面布局元素结果如下：

Layout Inspector

可以发现 Switch控件的宽高都是正常的，只是内容没有被绘制出来，所以怀疑 Switch的 onDraw( )中由于某种原因导致绘制出错，onDraw( ) 代码如下：

onDraw( )

从代码中得知能导致 mTrackDrawable 和 mThumbDrawable 展示不了的原因很可能是它们的 bounds 出了问题，但是目前只是从代码分析，没有确凿证据，如果能debug，看到这个值确实有问题，那么就可以确诊，但是目前AS中没有下载Android4.4的源码，使用当前的源码去调试很有可能会代码不匹配，所以需要先下载好Android4.4的源码，然后再切换编译源码版本为Android4.4的源码，再使用一个Android4.4的手机才能调试：

下载源码：

下载Android4.4源码

使用Android4.4编译：

使用Android4.4编译

debug信息：

debug信息

从debug信息来看，switchLeft成了负数，并且switchBottom - switchTop = -1,这很明显有问题，因为 Canvas 中坐标是当前View的相对坐标，因此出现负值显然会导致绘制不到正确的位置上，进一步追查 mSwitchLeft、switchTop 的赋值，发现分别与其 mSwitchWidth 、mSwitchHeight 有关，而 mSwitchWidth 的取值与 TextWidth 和 mThumbTextPadding 有关、mSwitchHeight 的取值等于mTrackDrawable 的高度，如下图：

debug信息

那么，mTrackDrawable 的高度好修正，只需要在定义 Drawable 资源的时候加上 <size android:height = "xx"> 即可，例如：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FFB6B6B6" />
    <corners android:radius="30dp" />
    <size android:height="30dp"/>
</shape>

也许你已经想到了，既然加上 height 就可以，那么再给它加上 width 不就可以修正宽度了么？到底行不行呢，这得看代码，上图中已经明确的告诉你了，宽的计算是和属性：switchMinWidth、thumbTextPadding、以及文本内容宽度有关，你在drawable中加上 width 当然是没有用的，那就给它加上这些属性，再看看效果：

效果图

怎么还是有问题，为啥前面的一部分没有绘制出来？这还得继续回去看源码：

 @Override
    public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        ...
        final int maxTextWidth = Math.max(mOnLayout.getWidth(), mOffLayout.getWidth());
        final int switchWidth = Math.max(mSwitchMinWidth,
                maxTextWidth * 2 + mThumbTextPadding * 4 + mTempRect.left + mTempRect.right);
        final int switchHeight = mTrackDrawable.getIntrinsicHeight();

        mThumbWidth = maxTextWidth + mThumbTextPadding * 2;

        mSwitchWidth = switchWidth;
        ...
    }

原来在计算 mSwitchWidth 的宽度的时候是取你在xml中配置的 mSwitchMinWidth 和（maxTextWidth * 2 + mThumbTextPadding * 4 + mTempRect.left + mTempRect.right）中最大的一个，但是你又把 “android:layout_width” 的值给指定了，那么如果实际计算出来的 Switch 宽度就不够用了，当然就绘制不全了，那我们再接着看为啥绘制不全的时候是左半部分有缺失呢？一般情况下不都是从左向右绘制，那么缺失的不应该是右半部分么？这就要去看看 mSwitchLeft 的取值是怎么做的呢，因为从onDraw（）中得知 mSwitchLeft 是绘制的起始点。

 @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);

        setThumbPosition(isChecked());

        int switchRight;
        int switchLeft;

        if (isLayoutRtl()) {
            switchLeft = getPaddingLeft();
            switchRight = switchLeft + mSwitchWidth;
        } else {
            switchRight = getWidth() - getPaddingRight();
            switchLeft = switchRight - mSwitchWidth;
        }
        ...
        mSwitchLeft = switchLeft;
    }

从 onLayout（）方法中可知计算左边起始点的时候它是用右边终点减去的宽度，但是我们上面说了，由于宽度计算逻辑的问题，它计算出来的宽度比实际可用的宽度大，所以这么一减之后就出了左边可绘制区域外了，因为便有了上面左边部分缺失的问题，想要修改也很简单:

 <Switch
        android:layout_marginTop="10dp"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:switchMinWidth="50dp"
        android:textOff="  "
        android:textOn="  "
        android:thumb="@drawable/nw_switch_custom_thumb_on"
        android:track="@drawable/nw_switch_custom_track_selector"
        />

将控件宽度设为自适应即可。

效果图

总结一下：
1、 在Android4.4上，由于 track 宽度的计算问题，因此不能指定控件的宽度(除非你能保证你指定的宽度一定会比按照 “maxTextWidth * 2 + mThumbTextPadding * 4 + mTempRect.left + mTempRect.right” 计算出来的宽度要大)；
2、 由于 track 高度的计算问题，你必须在定义 drawable 资源的时候加入 <size android:height="xx"> 属性；
3、 最后别忘了设置 android：textOn 和 android:textOff 属性的值，因为 thumb的宽度使用了它们文本的宽度作为计算因子之一。

结论：别用这玩意儿

那总得有个可替代的才行吧，总不能自己去实现一个 Switch 吧？朋友，你听说过 v7包么，推荐你试试：android.support.v7.widget.SwitchCompat ，这个东西能完美解决上面的问题（就是属性怪了点儿）

由于v7包中的控件都是后加进去的，所以它们的命名空间不一定是 "android" ，具体可以去查文档：

https://developer.android.com/reference/android/support/v7/widget/SwitchCompat.html#xml-attributes_1

所以上面的控件，用 SwitchCompat 替代之后属性配置如下：

<android.support.v7.widget.SwitchCompat
                            android:layout_width="50dp"
                            android:layout_height="30dp"
                            android:thumb="@drawable/nw_switch_custom_thumb_on"
                            app:track="@drawable/nw_switch_custom_track_selector"
                            />

没有了那些乱七八糟不靠谱的属性，这下感觉舒服多了（特别注意：track 的命名空间不再是 "android" 了，而是 "app"）。