Orient-Ui | Canvas.clipRect打造的炫酷Switch

上周同事问有没有多个Item的Switch控件，我想这也不是什么难事，这么多第三方库，直接挑一个就行。找了半天，虽说大部分Switch都很炫，不过都只支持两个Item，唯一找到的支持多Item的，但是是用在ios的，如图：

ios demo

自定义Switch倒也不是什么难事，这个图里面唯一的难点也就是滑块悬浮在文字上方的时候文字会变色，不过一点难度都没有确实也没什么意思，这是我实现的版本：

MultiSwitch

可以从图中看出，特点是：

• 支持多个Item
• 支持文字和图标
• 形状可以多选择
• 滑块滑动的时候覆盖的文字和图标会变色

Github地址：https://github.com/mCyp/Orient-Ui

一、思路

制作这个Switch挺简单，过程是：

1. 绘制底层的背景
2. 绘制底层的文字或者Icon
3. 绘制滑块
4. 滑块如果覆盖到了文字或者Icon，就绘制滑块覆盖到的文字或者Icon

这也就是本Switch的难点了，如何绘制部分文字和图标呢，答案就见标题了，使用画布裁剪的方法Canvas.clipRect(Rect rect)，我如果将画布Canvas裁剪成一个滑块大小，这个时候，我再绘制滑块覆盖到的文字到原有的位置，超出滑块的部分就不会显示了。

聪明的同学这个时候可能会有这样的疑问？你现在将画布裁剪了，那岂不是只能显示滑块了，道理是这样的，可是我们还有Canvas.save()和Canvas.restore()方法，它们对应的作用分别是将当前的画布保存到对应的画布栈中和取出画布栈中顶层的画布，并进行恢复。

二、核心代码

在这里，我假设大家已经对基本的自定View已经很熟悉了，直接展示绘制滑块的代码：

   /**
     * 绘制Switch滑动块
     */
    private void drawThumb(Canvas canvas) {
        // 滑块的左右边界
        int left = mItemCoordinate[mThumbState.pos] + mThumbState.offset;
        int right = mItemCoordinate[mThumbState.pos + 1] + mThumbState.offset;
        // 1. 保存当前图层
        canvas.save();
        Rect rect = new Rect(left + mThumbMargin, top + mThumbMargin, right - mThumbMargin, bottom - mThumbMargin);
        // 2. 根据滑块的设定大小裁剪画布
        canvas.clipRect(rect);
        // 3. 绘制滑块
        int padding = mThumbMargin + mThumbBorderWidth;
        if (mShape == SwitchShape.RECT) {
            drawRoundRect(canvas, left + padding, top + padding
                    , right - padding, bottom - padding, CORNER_RADIUS, mThumbColorPaint);
            if (mThumbBorderWidth != 0)
                drawRoundRect(canvas, left + mThumbMargin, top + mThumbMargin
                        , right - mThumbMargin, bottom - mThumbMargin, CORNER_RADIUS, mThumbBorderPaint);

        } else {
            drawRoundRect(canvas, left + padding, top + padding
                    , right - padding, bottom - padding, (bottom - top) / 2 - padding, mThumbColorPaint);
            if (mThumbBorderWidth != 0)
                drawRoundRect(canvas, left + mThumbMargin, top + mThumbMargin
                        , right - mThumbMargin, bottom - mThumbMargin, (bottom - top) / 2 - mThumbMargin, mThumbBorderPaint);
        }

        int first, second;
        //... 省略 获取位置

        // 4. 绘制文字orIcon
        if (mType == SwitchType.TEXT) {
            drawText(canvas, mItems[first], mItemCoordinate[first], top, mItemCoordinate[first + 1], bottom, mThumbTextPaint);
            if (second != -1 && second <= mItemCount - 1) {
                drawText(canvas, mItems[second], mItemCoordinate[second], top, mItemCoordinate[second + 1], bottom, mThumbTextPaint);
            }
        } else {
            drawIcon(canvas, mIconRes[first], mItemCoordinate[first], top, mItemCoordinate[first + 1], bottom, mThumbTextPaint);
            if (second >= 0) {
                drawIcon(canvas, mIconRes[second], mItemCoordinate[second], top, mItemCoordinate[second + 1], bottom, mThumbTextPaint);
            }
        }
        
        // 5. 底层的画布恢复
        canvas.restore();
    }

注释也都在上面了，对源码感兴趣的同学可以直接看Github，这个控件的代码也就600行，处理好触摸事件和使用好属性动画即可。

三、使用

可能有的同学不想关注原理，只想知道如何使用。

开始

implementation 'com.orient:Orient-Ui:2.1.1'

第一步 添加进xml布局文件

解释一下各个属性的用法：

属性	说明	类型
msBackgroundColor	背景颜色	reference|color
msNormalTextColor	非选中状态文本或者Icon颜色	reference|color
msThumbTextColor	滑块中文本或者Icon颜色	reference|color
msTextSize	文本大小	reference|dimension
msIconSize	图标大小	reference|dimension
msThumbMargin	滑块的外边距	reference|dimension
msShape	选择的形状	rect or oval
msType	选择的类型	text or icon
msThumbColor	滑块背景色	reference

第二步 获取MultiSwitch

使用findViewById获取MultiSwitch对象

第三步 设置选项内容

设置字符串数组或者Icon数组

mHead.setItemsArray(new String[]{"Dark","Light"});
// or
mIconSwitch.setIconArray(new int[]{R.drawable.grid_ic_play,R.drawable.ic_camera,R.drawable.common_ic_back});

第四步 设置监听器

提供了位置选择的回调以及滑块移动百分比的回调，如我的效果图，设置背景的黑夜模式和白天模式的时候，利用百分比回调可以用来设置背景色的渐变效果。

mHead.setMultiSwitchListener(new MultiSwitchListener() {
    @Override
    public void onPositionSelected(int pos) {
        // when pos selected, it will call back
    }

    @Override
    public void onPositionOffsetPercent(int pos, float percent) {
        // current page move offset percent when drag
    }
});

除此以外，你还可以设置默认位置：

// 设置默认位置
mHead.setCurrentItem(2);

四、总结

进行自定View的时候，大家大可不必闻自定View色变，有的时候，某个自定义View的难点可能就是大家不常用到的那一到两个Api，这个时候，就需要大家熟悉官方提供的Api了。

个人说明

本人最近打算找工作了，在上海或者无锡，如果有好的公司推荐或者内推，可以联系我哈，微信：Jw_19951030，感激不尽~

如果大家对Oreint-Ui系列的其他控件感兴趣，可以查看：

表格： 《Orient-Ui | 单RecyclerView实现花式表格》
时间轴：《花式实现时间轴，样式由你来定！》