文章
39
标签
54
分类
11
首页
时间轴
标签
分类
友情链接
简介
目录
  1. 1. 效果图
  2. 2. 主要讲解的内容
  3. 3. 让按钮随手指移动
  4. 4. 处理越界问题的方法
  5. 5. 处理回弹
  6. 6. 怎样在滑动到指定位置后禁止滑动
  7. 7. 让文字跟随按钮移动
  8. 8. 自定义View添加阴影的方法
  9. 9. 结束语
撸一款“灵动”的滑动按钮
|Android
阅读量:

前言：为什么起这个标题呢？因为，这个滑动按钮看起来不是那么的僵硬，哈哈。限于篇幅原因，不会把所有的知识点都讲解一遍，只会挑选一些需要注意的点及不太好理解的地方进行讲解。

效果图

  先放张最后实现效果图，大家可以看着这个效果，思考一下怎么实现的。

主要讲解的内容

  文章将会选择以下内容进行讲解

  • 怎样让按钮随手指移动
  • 处理越界问题的方法
  • 怎样处理回弹（就是没有滑动到指定位置，返回到原点）
  • 怎样在滑动到指定位置后禁止滑动
  • 让文字跟随按钮移动的方法
  • 自定义View添加阴影的方法

这里会选择按钮初始位置在中间的这种情况来讲解，因为，按钮初始位置在左边的时候就是按钮位置在中间的时候一种状态。

让按钮随手指移动

  要想让按钮随着手指的移动而移动，就需要重写View的onTouchEvent方法，在这个方法中可以监听手指的几个动作，如手指的“按下”、“滑动”、“抬起”，

捕获到这些动作后，就可以针对每个动作做相应的处理，最终达到让按钮随手指移动的效果。具体的代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
override fun onTouchEvent(event: MotionEvent): Boolean {
      
        when (event.action) {
            //手指按下
            MotionEvent.ACTION_DOWN -> {
                val clickX = event.x
            }

			//手指移动
            MotionEvent.ACTION_MOVE -> {
                slideX = event.x
                //刷新view
                postInvalidate()

            }
			//手指抬起
            MotionEvent.ACTION_UP -> {
                
            }
        }
        return super.onTouchEvent(event)
    }

简单解释一下上面的代码，在手指按下的时候，获取手机按下位置的坐标，用clickX变量保存按下的X轴的位置(后面会用到)，在手指滑动的时候用全局变量slideX来保存滑动到的X的坐标，然后刷新view。手指抬起的动作这里不用处理。上面的代码只是获取到了手指移动的X轴的坐标，下面就要通过View的onDraw方法来绘制中间按钮，代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
private fun drawSnake(canvas: Canvas) {
    //计算圆的半径
        val circleRadius = mSnakeRadius.toFloat() - mShadowRadius / 2
		//计算中间按钮的X坐标，在初始的时候，slideX的值为0
        val circleCenter = if (slideX == 0f) {
            if (mSlideState == SlideState.INIT_LEFT) {
                //按钮位于左边的时候圆心的X坐标
                mSnakeRadius + mShadowRadius / 2
            } else {
                //按钮在中间的时候圆心的X坐标，mResultWidth为View的宽度
                mResultWidth / 2.toFloat()

            }
        } else {
            //手指滑动后
            slideX
        }
		//这里根据手指移动到的位置来确定圆形的X坐标
        canvas.drawCircle(circleCenter, mResultHeight / 2.toFloat(), circleRadius, mSnakePaint)

    }

上面的每行代码都进行了注释，这里就不再讲解每句代码的了。

处理越界问题的方法

  如果你是按上面的代码来让按钮跟随手指进行移动的话，当移动到边缘的时候你会发现移动的按钮超出背景了！那这是什么问题呢？因为，这里是把手指移动的位置的X坐标作为圆心的X坐标了，当手指移动到边缘的时候，圆心的X坐标也在边缘了，所以，就会出现按钮超出背景的问题了。那么该怎么解决这个问题呢？其实很简单，就是当手指移动的位置的X坐标大于View的总长度减去按钮半径长度的时候，将slideX变量重新赋值。代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
override fun onTouchEvent(event: MotionEvent): Boolean {
      
        when (event.action) {
            //手指按下
            MotionEvent.ACTION_DOWN -> {
                val clickX = event.x
            }

			//手指移动
            MotionEvent.ACTION_MOVE -> {
                slideX = event.x
                
                if (slideX > mResultWidth - mSnakeRadius - mShadowRadius / 2) {
                    //防止超出右边界
                    slideX = mResultWidth - mSnakeRadius-mShadowRadius / 2
                } else if (slideX < mSnakeRadius + mShadowRadius / 2) {
                    //防止超出左边界
                    slideX = mSnakeRadius+mShadowRadius / 2
                }
                //刷新view
                postInvalidate()

            }
			//手指抬起
            MotionEvent.ACTION_UP -> {
                
            }
        }
        return super.onTouchEvent(event)
    }

从上面的代码中可以可看到，处理按钮超出边界的方法是，当圆心的X的坐标将要大于或小于要求的坐标的时候，不直接让手指的X的坐标作为圆心的坐标了，而是重新计算圆心X轴的坐标。

处理回弹

  这部分要处理的就是，当按钮没有移动到目标位置时，抬起手指，是让按钮返回到初始的位置，还是让按钮到达目标位置。处理这个问题其实也很简单，就是需要事先设定一个位置，当抬起手指的时候判断圆心的X的坐标大于这个位置还是小于这个位置，如果大于就直接将按钮移到目标位置，如果小于就将按钮移动到初始位置。如下图

这里规定的位置如上图，这个位置距离黑色背景边界的长度刚好等于按钮的半径。当往左边滑动时，手指抬起的时候，如果圆心的X坐标大于2倍的按钮的半径即直径的话，就回到初始位置，否则滑动到左边，往右边滑动时的判断同理。具体的代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
override fun onTouchEvent(event: MotionEvent): Boolean {
      
        when (event.action) {
            //手指按下
            MotionEvent.ACTION_DOWN -> {
                val clickX = event.x
            }

			//手指移动
            MotionEvent.ACTION_MOVE -> {
                slideX = event.x
                
                if (slideX > mResultWidth - mSnakeRadius - mShadowRadius / 2) {
                    //防止超出右边界
                    slideX = mResultWidth - mSnakeRadius-mShadowRadius / 2
                } else if (slideX < mSnakeRadius + mShadowRadius / 2) {
                    //防止超出左边界
                    slideX = mSnakeRadius+mShadowRadius / 2
                }
                //刷新view
                postInvalidate()

            }
			//手指抬起
            MotionEvent.ACTION_UP -> {
                //判断左滑还是右滑
                if (slideX > center) {
                    //按钮的边界超出右边规定的位置
                        if (slideX > mResultWidth - 2 * mSnakeRadius - mShadowRadius) {
                            //直接滑到目标点
                            slideAnimate(slideX.toInt(), (mResultWidth - mSnakeRadius - mShadowRadius / 2).toInt())
                            mSlideState = SlideState.RIGHT_FINISH
                            if (slideListener != null) {
                                slideListener!!.onSlideRightFinish()
                            }
                        } else {
                            setInitText()
                            slideAnimate(slideX.toInt(), center)
                        }

                    } else if (slideX < center) {
                        if (slideX < 2 * mSnakeRadius + mShadowRadius) {
                            //直接滑到目标点
                            slideAnimate(slideX.toInt(), (mSnakeRadius + mShadowRadius / 2).toInt())
                            mSlideState = SlideState.LEFT_FINISH
                            if (slideListener != null) {
                                slideListener!!.onSlideLiftFinish()
                            }

                        } else {
                            setInitText()
                            slideAnimate(slideX.toInt(), center)
                        }
                    } else {
                        //松手后回到原点
                        slideAnimate(slideX.toInt(), center)
                    }
            }
        }
        return super.onTouchEvent(event)
    }

上面的代码中slideAnimate这个方法是添加位移动画，代码如下

1
2
3
4
5
6
7
8
9
private fun slideAnimate(start: Int, end: Int) {
       val valueAnimator = ValueAnimator.ofInt(start, end)
       valueAnimator.addUpdateListener { animation ->
           val animatedValue = animation.animatedValue as Int
           slideX = animatedValue.toFloat()
           postInvalidate()
       }
       valueAnimator.start()
   }

怎样在滑动到指定位置后禁止滑动

  什么叫滑动到指定位置呢？这里拿按钮在中间时候的View举例，比如当按钮滑动到两头的时候，就是到指定位置了，这时抬起手指，在下次再滑动按钮的时候就不能滑动了。这个问题也很好解决，解决的方法也有很多，本文采用的方法就是初始化一个成员变量，每次进入onTouchEvent方法时，首先判断这个变量，条件成立则直接返回false。不成立就继续响应手指的动作，当按钮滑动到指定的位置的就改变这个变量的值，使下次再进入这个方法时条件成立。代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
override fun onTouchEvent(event: MotionEvent): Boolean {
       //滑动完成后禁止滑动
        if (mSlideState == SlideState.LEFT_FINISH || mSlideState == SlideState.RIGHT_FINISH) {
            return false
        }
        when (event.action) {
            //手指按下
            MotionEvent.ACTION_DOWN -> {
                val clickX = event.x
            }

			//手指移动
            MotionEvent.ACTION_MOVE -> {
                slideX = event.x
                
                if (slideX > mResultWidth - mSnakeRadius - mShadowRadius / 2) {
                    //防止超出右边界
                    slideX = mResultWidth - mSnakeRadius-mShadowRadius / 2
                } else if (slideX < mSnakeRadius + mShadowRadius / 2) {
                    //防止超出左边界
                    slideX = mSnakeRadius+mShadowRadius / 2
                }
                //刷新view
                postInvalidate()

            }
			//手指抬起
            MotionEvent.ACTION_UP -> {
                //判断左滑还是右滑
                if (slideX > center) {
                    //按钮的边界超出右边规定的位置
                        if (slideX > mResultWidth - 2 * mSnakeRadius - mShadowRadius) {
                            //直接滑到目标点
                            slideAnimate(slideX.toInt(), (mResultWidth - mSnakeRadius - mShadowRadius / 2).toInt())
                            //改变变量的状态
                            mSlideState = SlideState.RIGHT_FINISH
                            if (slideListener != null) {
                                slideListener!!.onSlideRightFinish()
                            }
                        } else {
                            setInitText()
                            slideAnimate(slideX.toInt(), center)
                        }

                    } else if (slideX < center) {
                        if (slideX < 2 * mSnakeRadius + mShadowRadius) {
                            //直接滑到目标点
                            slideAnimate(slideX.toInt(), (mSnakeRadius + mShadowRadius / 2).toInt())
                            //改变变量的状态
                            mSlideState = SlideState.LEFT_FINISH
                            if (slideListener != null) {
                                slideListener!!.onSlideLiftFinish()
                            }

                        } else {
                            setInitText()
                            slideAnimate(slideX.toInt(), center)
                        }
                    } else {
                        //松手后回到原点
                        slideAnimate(slideX.toInt(), center)
                    }
            }
        }
        return super.onTouchEvent(event)
    }

让文字跟随按钮移动

  这部分可能算是自定义这个View最复杂的部分了，其实只要想明白了，也不复杂。这里就拿按钮从中间往右滑来讲解，按钮从中间往左边滑计算方法和往右滑的差不多，先看图

好了，现在根据上面的图，就可以算出初始和最终的文字的X轴的位置了，

初始状态X = （mResultWidth / 2- mSnakeRadius）/2

最终状态X=mResultWidth / 2

mResultWidth为View的宽度，mSnakeRadius为按钮的半径

知道了初始和最终的X轴的位置，下面就是根据按钮移动的距离来改变文字的X作坐标了

val distance = end - start

val resultLeftX = start + distance * proportion

end和start就是最终状态X和初始状态X，resultLeftX就是要画的文字的X坐标，proportion就是百分比，根据公式可知这个proportion值的变化范围值从0到1的。

现在，最重要的一点就是怎么根据按钮的移动来改变上面公示中的proportion，应该怎么办呢？继续看图

这个proportion就是上图中的x比y的值，上图中中间的一条线就是slideX，它是根据按钮的滑动不断变化的，这样就能满足proportion的值从0到1的条件了。计算的公式如下

proportion = (slideX - halfResultWidth) / (mResultWidth - mSnakeRadius - halfResultWidth - mShadowRadius / 2)

这部分具体的代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
private fun drawInnerText(canvas: Canvas) {
		//这部分是裁剪画布，因为当viwe加阴影的时候，文字会越界，想看效果的话，可以把裁剪画布的代码注释掉
        canvas.save()
    //裁剪的大小是黑色背景的大小，形状是矩形
        canvas.clipRect(
            mShadowRadius,
            mShadowRadius,
            mResultWidth.toFloat() - mShadowRadius,
            mResultHeight.toFloat() - mShadowRadius
        )
        val fontMetrics = mInnerTextPaint.fontMetrics

        //画圆环内的文字
        val baseline = mResultHeight / 2 + (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom
        //文字的起始位置
        val halfResultWidth = mResultWidth / 2
        val start = (halfResultWidth - mSnakeRadius) / 2
        //文字的最终位置
//        val end = (mResultWidth - 2 * mSnakeRadius) / 2
        val end = mResultWidth / 2
        //距离
        val distance = end - start
    //根据状态不同设置按钮的初始位置
        var proportion = if (mSlideState == SlideState.INIT_LEFT) {
            -1f
        } else {
            0f

        }

        if (slideX != 0f) {
            //计算比例来移动文字的距离
            proportion = (slideX - halfResultWidth) / (mResultWidth - mSnakeRadius - halfResultWidth - mShadowRadius / 2)
        }

        val resultLeftX = start + distance * proportion
//画按钮左边的文字
        canvas.drawText(
            leftContent,
            resultLeftX,
            baseline,
            mInnerTextPaint
        )
        val resultRightX =
            halfResultWidth + (mSnakeRadius / 2) + (halfResultWidth / 2) + (distance * proportion)
    //画按钮右边的文字
        canvas.drawText(
            rightContent,
            resultRightX,
            baseline,
            mInnerTextPaint
        )
        canvas.restore()
    }

这里重点解释一下下面的一段代码

1
2
3
4
5
6
7
8
9
10
11
12
private fun drawInnerText(canvas: Canvas) {

        canvas.save()
        canvas.clipRect(
            mShadowRadius,
            mShadowRadius,
            mResultWidth.toFloat() - mShadowRadius,
            mResultHeight.toFloat() - mShadowRadius
        )
       //...省略部分代码
        canvas.restore()
    }

这段代码是为了解决给View画阴影的时候，文字移动超出背景仍然显示的问题。当view添加阴影时，可以把这段代码注释掉，看下有什么不同。还有一点就是在指定位置写文字的问题，大家可以参考我的这篇文章Android自定义View之定点写文字。

自定义View添加阴影的方法

  添加阴影的方法就是为画笔设置setShadowLayer，我们来看下这个方法

1
setShadowLayer(float radius, float dx, float dy, int shadowColor)

方法中有四个参数，四个参数的作用如下

  • radius:设置阴影的模糊半径，其实就是设置阴影的大小，当为0时没有阴影
  • dx:阴影在X轴上的偏移量
  • dy:阴影在Y轴上的偏移量
  • shadowColor:阴影的颜色

注：只为画笔设置这个是不起作用的，还需要关闭硬件加速。

结束语

  文章到这里，已经把需要解决的问题都解决了。其实除了文中说的这些，还有其他的一些需要注意的细节，如只有点击在按钮范围内才能滑动、状态改变时的回调等。这些细节都在代码中进行了处理，可以点击这里获取源码，觉得不错的话，就顺手点个star吧！

文章作者: wizardev
文章链接: http://pi.wizardev.com:88/blog/%E6%92%B8%E4%B8%80%E6%AC%BE%E2%80%9D%E7%81%B5%E5%8A%A8%E2%80%9C%E7%9A%84%E6%BB%91%E5%8A%A8%E6%8C%89%E9%92%AE/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 wizardev的博客！
自定义View Kotlin
相关推荐
Android自定义View之定点写文字
评论
繁