某天，老哥正在悠闲地敲着代码
项目经理就悄咪咪的来我身边，拿着手机跟我说
照着这个效果咱也弄一个
嗯。。。瞅着挺好玩，之前在一些全面屏手机上见到过，不过我见过的都是死的，不像即刻的可以上下滑动
既然项目经理发话了，本着不重复造轮子的思想指导，我先去百度了一下，果然被我找到一个
https://blog.csdn.net/weixin_33890526/article/details/87263229
下了个demo，感觉效果不错，然后看了看代码。。。emmmmmm
然后决定自己手撸一个吧，因为最近项目使用kotlin重构，所以也是使用kotlin写的，水平不足，如果有大佬看到，欢迎提出问题。
不想看废话的可以直接查看Demo
https://github.com/Archer-qi/SlideBack#slideback
下面开始。。。。
好像git有点卡啊，对付看吧。。。。下面上代码
private fun init() {
val windowManager = context.getSystemService(Context.WINDOW_SERVICE) as WindowManager
val displayMetrics = DisplayMetrics()
windowManager.defaultDisplay.getMetrics(displayMetrics)
screenWidth = displayMetrics.widthPixels
screenHeight = displayMetrics.heightPixels
ratioWidth = screenWidth / 3
paint.run {
isAntiAlias = true
//描边并填充
style = Paint.Style.FILL_AND_STROKE
color = Color.parseColor(fillColor)
strokeWidth = 1f
}
arrowPaint.run {
isAntiAlias = true
style = Paint.Style.STROKE
color = Color.WHITE
strokeCap = Paint.Cap.ROUND
strokeWidth = 5f
}
alpha = 1f
}
init()初始化两个Paint对象，一个绘制背景，一个绘制箭头。以及两个Path对象
override fun onDraw(canvas: Canvas) {
//贝塞尔曲线
path.reset()
path.moveTo(0f, offsetY - viewHeight / 2)
path.quadTo(0f, anchorX - viewHeight / 2 + offsetY, lineX * offsetX, lineY - viewHeight / 2 + offsetY)
path.quadTo(maxWidth * offsetX, offsetY, lineX * offsetX, viewHeight - lineY - viewHeight / 2 + offsetY)
path.quadTo(0f, viewHeight / 2 - anchorX + offsetY, 0f, viewHeight / 2 + offsetY)
canvas.drawPath(path, paint)
//箭头
arrowPath.reset()
arrowPath.moveTo((maxWidth / 4 + arrowWidth) * offsetX, offsetY - arrowHeight / 2)
arrowPath.lineTo(maxWidth / 4 * offsetX, offsetY)
arrowPath.lineTo((maxWidth / 4 + arrowWidth) * offsetX, offsetY + arrowHeight / 2)
canvas.drawPath(arrowPath, arrowPaint)
//设置视图透明度
alpha = offsetX
}
onDraw（）绘制背景，以及箭头
override fun onTouchEvent(event: MotionEvent): Boolean {
val x = event.rawX
val y = event.rawY
when (event.action) {
MotionEvent.ACTION_DOWN -> { //手指按下
if (x < edgeYLength) {
isFromEdge = true
offsetY = event.rawY
return true
}
}
MotionEvent.ACTION_MOVE -> { //手指滑动
if (isFromEdge) {
offsetY = y
offsetX = x / ratioWidth
if (offsetX > 1.0) offsetX = 1.0f
invalidate(0, 0, maxWidth.toInt(), screenHeight)
return true
}
}
MotionEvent.ACTION_UP -> { //手指抬起
if (isFromEdge) {
isFromEdge = false
if (offsetX == 1.0f) {
offsetX = 0f
onSlideBackListener?.onBack()
} else {
cancelBack()
}
invalidate(0, 0, maxWidth.toInt(), screenHeight)
return true
}
}
}
return super.onTouchEvent(event)
}
重写onTouchEvent()方法，对触屏事件处理，基本就是这样了
代码都很简单，没啥难点
要说最麻烦的可能就是画贝塞尔曲线。数学不好是硬伤，没得办法-，-
首先了解一下什么是贝塞尔曲线：
贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。贝塞尔曲线是计算机图形图像造型的基本工具，是图形造型运用得最多的基本线条之一。它通过控制曲线上的四个点（起始点、终止点以及两个相互分离的中间点）来创造、编辑图形。以上来自百度百科。
一堆屁话，反正就是用来将两个点可以用曲线来平滑连接，就可以做出来很多酷炫的效果
本文使用的是二阶贝塞尔曲线
二阶曲线由两个数据点(A 和 C)，一个控制点(B)来描述曲线状态，大致如下
贝塞尔曲线示意
下面代码实现
Path.move(x,y) 移动到A(x,y)点
Path.quadTo(x1,y1,x2,y2) 以B(x1,y1)未控制点，C(x2,y2)为重点绘制二阶贝塞尔曲线
其他的就是算好三条曲线交接处的斜率就好了。完美。。。。
使用的时候也很简单，可以加在BaseActivity中，这样所有页面就都有返回手势了，也可以实现一个方法，用来判断是否需要手势操作
val container = activity.window.decorView as FrameLayout
val backView = SlideBackView(activity)
backView.setOnSlideBackListener(object : SlideBackView.OnSlideBackListener{
override fun onBack() {
activity.onBackPressed()
}
})
container.addView(backView)
返回的触发事件是通过OnSlideBackListener接口回调的方式进行注册，可以根据不同需求自己写逻辑处理
不注册的话，默认是没有任何事件的
欢迎大家提出使用上的问题（如果有人用的话。。。。。）
项目地址
关于贝塞尔曲线参考:
https://www.jianshu.com/p/3b2ac05ae3c7
网友评论