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

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

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

能够从图中看出，特色是：

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

Github地址：github.com/mCyp/Orient…

1、思路

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

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

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

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

2、核心代码

在这里，我假设你们已经对基本的自定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行，处理好触摸事件和使用好属性动画便可。

3、使用

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

开始

implementation 'com.orient:Orient-Ui:2.1.1'
复制代码

第一步 添加进xml布局文件

<com.orient.me.widget.sw.MultiSwitch android:id="@+id/ms_weak" android:layout_width="match_parent" android:layout_marginStart="@dimen/len_10" android:layout_marginEnd="@dimen/len_10" android:layout_height="60dp" android:layout_gravity="center" android:layout_marginTop="@dimen/len_20" app:msBackgroundColor="@color/teal_300" app:msTextSize="@dimen/font_18" app:msNormalTextColor="@color/white_alpha_192" app:msShape="rect" app:msThumbColor="@color/white" app:msThumbMargin="@dimen/len_6" app:msThumbTextColor="@color/teal_300" app:msType="text" />
复制代码

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

属性	说明	类型
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);
复制代码

4、总结

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

我的说明

本人最近打算换工做了，在上海或者无锡，若是有好的公司推荐或者内推，能够联系我哈，微信：Jw_19951030，感激涕零~

若是你们对Oreint-Ui系列的其余控件感兴趣，能够查看：

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