我把Android 10手势导航的侧滑返回效果优化了一波
作者：
giswangsj, 地址：https://juejin.cn/post/6964557989181128740
稳住，这里是ROM开发！
Android 10 中引入了手势导航功能，向IOS看齐了一步，但是默认的这个侧滑返回效果实在是差强人意，效果如下：
国内各大厂商也都对此做了优化，那么我们也来优化一下吧，效果如下：
1，找到地方
说的够通俗易懂了吧，要改它，就要先找到它在哪里实现的。说实话这个还真不好找，网上有说：Android 10中手势导航为了xxx放到了Launcher中，然后通过AIDL和System UI交互。。。在Launcher中找了半天也没找到。
如果不是在Launcher中那就肯定在System UI中，一开始没有头绪，只能一（瞎）点（几）点（把）找。后来考虑到这个是拖拽效果，那就肯定跟触摸事件相关，本来想着在System UI的所有 MotionEvent.ACTION_MOVE 处打断点，没想到在一个个添加断点的时候发现了EdgeBackGesturehandler.java这个类，在其中打断了，调试果然命中了。
不过这个类是做控制用的，真正的绘制实现是在src/com/android/systemui/statusbar/phone/NavigationBarEdgePanel里面。
NavigationBarEdgePanel是一个自定义view，如下：
public class NavigationBarEdgePanel extends View implements NavigationEdgeBackPlugin {
...
}
既然找到了地方，那就实现一下上下滑动吧。
2，实现上下移动
默认的那个箭头显示出来以后不会跟着手势上下移动，要实现上下移动就要先知道这个视图是怎么添加上去的。
首先看一下EdgeBackGesturehandler，在其中初始化了NavigationBarEdgePanel并且设置了WindowManager.LayoutParams
// 第一步：创建Panel
// Add a nav bar panel window
setEdgeBackPlugin(new NavigationBarEdgePanel(mContext));
// 第二步：设置LayoutParams
private void setEdgeBackPlugin(NavigationEdgeBackPlugin edgeBackPlugin) {
...
mEdgeBackPlugin = edgeBackPlugin;
// 设置返回回调
mEdgeBackPlugin.setBackCallback(mBackCallback);
// 设置LayoutParams
mEdgeBackPlugin.setLayoutParams(createLayoutParams());
updateDisplaySize();
}
这个类中并没有看到视图如何添加到屏幕上的。
那么再来看看NavigationBarEdgePanel。
// 1，构造方法中获取WindowManager
public NavigationBarEdgePanel(Context context) {
mWindowManager = context.getSystemService(WindowManager.class);
...
}
@Override
public void setLayoutParams(WindowManager.LayoutParams layoutParams) {
mLayoutParams = layoutParams;
// 2，把当前view添加到WindowManager中
mWindowManager.addView(this, mLayoutParams);
}
在构造方法中获取了WindowManager，然后在setLayoutParams() 中将当前view添加到WindowManager中。大致了解了它是怎么显示出来的之后，就可以修改它的位置了。
既然是想让他跟着手指上下滑动，那可定跟触摸事件相关，但是在NavigationBarEdgePanel的触摸滑动事件中没有对视图位置的更新，因此只需要在滑动时更新位置就好了：
private void handleMoveEvent(MotionEvent event) {
float y = event.getY();
...
// 当前位置-上次的位置就是移动的偏移量，将偏移量累加到mLayoutParams当前的y上即可
mLayoutParams.y += y - mLastY;
// 更新位置
mWindowManager.updateViewLayout(this, mLayoutParams);
}
计算出每次移动的偏移量，然后将偏移量累加到mLayoutParams当前的y上即可，最后通过WindowManager更新一下视图位置即可。
这里就不贴图了，看最终效果图就可以了。
3，实现拖拽时凸起效果
由于修改System UI的代码时没有代码补全提示，并且难以调试，那就先搞个demo实现一下拖拽凸起效果，然后再集成到System UI中。
这个是自定义view相关的姿势，假设你对自定义view有一定了解。
2.1 自定义view
首先新建一个demo，创建一个自定义的View。重写onMeasure()，onDraw() 吧啦吧啦。。。
2.2 事件处理
主要逻辑为：按下屏幕时判断是否在边界，在的话消费掉该事件；然后在滑动时记录当前的位置，用于绘制时的处理；最后在离开屏幕时释放掉相关的资源。
2.3 绘制
要绘制这么一个区域，需要用到贝塞尔曲线，这里可以分为两个三阶贝塞尔曲线。如下，P0和P6是屏幕边界上的两个点，P1和P2分别是上半部分的控制点，P4和P5是下半部分的控制点。
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 每次绘制重置path
mPath.reset();
int factor = isLeft ? 1 : -1;
// 凸起上部Y
int topY = currentY - 150;
// 凸起下部Y
int bottomY = currentY + 150;
// 凸起底部X
int footX = isLeft ? 0 : mWidth;
// 凸起顶部X
int peekX = footX + factor * mOffset;
// 控制点p1
p1.x = footX;
p1.y = topY + 75;
// 控制点p2
p2.x = peekX;
p2.y = topY + 100;
// 控制点p4
p4.x = peekX;
p4.y = bottomY - 100;
// 控制点p5
p5.x = footX;
p5.y = bottomY - 75;
mPath.moveTo(footX, topY);
// 上半部分贝塞尔曲线
mPath.cubicTo(p1.x, p1.y, p2.x, p2.y, peekX, currentY);
// 下半部分贝塞尔曲线
mPath.cubicTo(p4.x, p4.y, p5.x, p5.y, footX, bottomY);
mPath.close();
// 绘制path
canvas.drawPath(mPath, mPaint);
}
经过一波简单的操作，效果如下：
效果还行吧，那么怎么把它弄到System UI中呢？
4，集成拖拽时凸起效果
回到NavigationBarEdgePanel中，在onDraw()中只需将demo中的代码稍微修改一下即可：
@Override
protected void onDraw(Canvas canvas) {
// 箭头所在位置
float pointerPosition = mCurrentTranslation - mArrowThickness / 2.0f;
...
// draw wave
mPath.reset();
int factor = mIsLeftPanel ? 1 : -1;
int currentY = getHeight() / 2;
// 凸起上部Y
int topY = 0;
// 凸起下部Y
int bottomY = getHeight();
// 凸起底部X
int footX = mIsLeftPanel ? 0 : getWidth();
// 凸起顶部X
int peekX = (int) (footX + factor * (mIsLeftPanel ? pointerPosition : pointerPosition - getStaticArrowWidth()) / 2);
p1.x = footX;
p1.y = topY + 75;
p2.x = peekX;
p2.y = topY + 100;
p4.x = peekX;
p4.y = bottomY - 100;
p5.x = footX;
p5.y = bottomY - 75;
mPath.moveTo(footX, topY);
mPath.cubicTo(p1.x, p1.y, p2.x, p2.y, peekX, currentY);
mPath.cubicTo(p4.x, p4.y, p5.x, p5.y, footX, bottomY);
mPath.close();
canvas.drawPath(mPath, mWavePaint);
}
效果如下：
5，优化箭头
默认的箭头太丑了，接下来把箭头优化一下。
首先找到默认绘制箭头的地方，给他咔嚓掉，然后只需要绘制一个圆形并在上面绘制一个箭头即可。
@Override
protected void onDraw(Canvas canvas) {
// (circleX, centerY)是圆形的中心店
// 绘制圆形
canvas.drawCircle(circleX, centerY, dp(10), mWavePaint);
// 绘制返回
mArrowPath.reset();
mArrowPath.moveTo(circleX + dp(2.5f), centerY - dp(5.5f));
mArrowPath.lineTo(circleX - dp(3f), centerY);
mArrowPath.lineTo(circleX + dp(2.5f), centerY + dp(5.5f));
canvas.drawPath(mArrowPath, mArrowPaint);
}
这个没啥说的，就是绘制一个circle，然后通过path绘制一个箭头即可，效果如下：
最后：本文简单记录了一下实现过程。欢迎分享转发~
---END---
推荐阅读： Google I/O 2021，Flutter 2.2中的新功能一览！
Google I/O 2021来了，Android 12重磅登场！重点新功能一览~
炫酷的3D球体文字云效果！
AndroidStudio 4.2正式版升级记~
JetBrains宣布Jetpack Compose for Web，使用Kotlin开发适配多端的Web UI
不需要权限的悬浮窗方案了解一下~
更文不易，点个“在看”支持一下👇