自定义View实践 - 仿微信的滑动按钮

效果图

控件使用效果如下：

 

除了颜色，看起来和微信的还是挺像的。

准备

1、选择自定义View的方式

自定义View有3种途径实现：1、组合控件；2、继承现有控件(如Button)；3、继承View。下面分别介绍一下：

• 1、组合控件：我们并不需要自己去绘制视图上显示的内容，而是将几个系统原生的控件组合到一起，这样创建出的控件就被称为组合控件，比如标题栏就是个很常见的组合控件。
• 2、继承现有控件：我们并不需要自己重新去实现一个控件，只需要去继承一个现有的控件，然后在这个控件上增加一些新的功能。它的优点就是不仅能够按照我们的需求加入相应的功能，并且还可以继承现有控件已经封装好的属性，同时不用自己定义测量流程。
• 3、继承View：我们继承View，重写相应的方法，重新去实现一个控件。它的优点就是灵活性高，它给你一张白纸，你用画笔尽情发挥。

现实情况使用什么方式根据实际情况考虑，我这个控件的选择是方式3: 继承View，重写onMeasure方法定义它的测量流程，重写onDraw()方法定义它的绘制流程。

2、选择让控件内容滑动的方式

既然是滑动按钮，肯定有滑动，当我点击按钮时，如果是打开，按钮的小圆会滑向右边，如果是关闭，按钮的小圆会滑向左边。让控件的内容滑动起来我想到的有3种方式：

• 1、通过Scroller：调用Scroller的startScroll()方法，传入起始点坐标和终点坐标，然后重写View的computeScroll()方法，在这个方法里面调用Scroller的computeScrollOffset()方法开始滑动计算，然后调用View的scrollTo()或scrollBy()方法完成View的滑动距离的更新，然后调用View的invalidate()或postInvalidate()方法重绘View。
• 2、通过Handler不断的发送延时消息：通过Handler的 sendMessageDelayed(Message msg, long delayMillis)方法不断的发送延时消息，在Handler的handlerMessage()中收到消息后，完成滑动距离的更新，然后调用View的invalidate()或postInvalidate()方法重绘View。
• 3、通过动画：利用补间动画或属性动画的平移动画可以让View动起来，或者通过ValueAnimator，设定一个初始值和结点值，当调用ValueAnimator的start()方法后，就可以在回调中获取动画的进度，然后根据动画的进度更新滑动距离，然后调用View的invalidate()或postInvalidate()方法重绘View。

对于方法1，它更适用于自定义ViewGroup的情景，如果自定义ViewGroup中有许多子View需要滑动起来，就可以考虑使用Scroller，例如Android的ViewPager内部就是使用了Scroller；而对于自定义View，可能方法2和3更适用，我这个控件的选择是方式3: 通过ValueAnimator动画，在构造ValueAnimator时传入起点和终点，然后开启动画，根据动画进度计算滑动距离，让按钮的小圆滑动起来。

3、要不要考虑padding属性

如果你在自定义控件中没有考虑padding属性，那么用户定义控件的padding值就会失效，我的选择是不考虑用户的padding值，因为滑动按钮中的内容只有一个小圆，且只在一边，padding的意义不大，考虑padding会让很多地方的坐标计算复杂，我还不如让用户直接控制小圆的半径，这样也类似于padding的效果，也简化了计算。

所以现实情况要不要考虑padding属性需要根据实际情况考虑。而margin值是由父ViewGroup决定，不是由View控制的，我们不用考虑margin值。

实现

1、定义控件属性

在自定义滑动按钮之前，我们先思考可以让用户自定义这个控件的什么属性，如按钮颜色，打开状态和关闭状态的颜色等，在 res -> values 中，右键新建一个名为attrs的xml文件，在这个文件中定义控件属性，如下：

<resources>

    <declare-styleable name="SwitchButton" >
        <attr name="sb_openBackground" format="color"/>
        <attr name="sb_closeBackground" format="color"/>
        <attr name="sb_circleColor" format="color"/>
        <attr name="sb_circleRadius" format="dimension"/>