Android 10 手势导航的侧滑返回效果优化策略，2021 最新 Android 大厂面试真题大全

// 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.

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

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);

}

经过一波简单的操作，效果如下：

2.gif

效果还行吧，那么怎么把它弄到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;