我把 Android 10 手势导航的侧滑返回效果优化了一波 (mp.weixin.qq.com)

code小生 一个专注大前端领域的技术平台公众号回复Android加入安卓技术群

作者:makelove999
链接:https://www.jianshu.com/p/9b52538b49b8
声明:本文已获makelove999授权发表,转发等请联系原作者授权

稳住,这里是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绘制一个箭头即可,效果如下:

最后:本文简单记录了一下实现过程,大佬勿喷。

相关推荐

Glide 加载 Gif 的卡顿优化思路分析

不使用第三方库,Bitmap 的优化策略

探索 Android 内存优化方法

Flutter 应用性能优化最佳实践

APK体积优化的一些总结


我是code小生,喜欢可以随手点个在看、转发给你的朋友,谢谢~

如果你有写博客的好习惯

欢迎投稿

点个“在看”小生感恩❤️