Android高仿Chrome侧滑返回效果

type

status

date

slug

summary

2016-08-10 更新

添加毛玻璃背景效果，模糊内存优化，详见 {% post_link 快速模糊效果快速模糊效果%}

在iOS上的chrome中有侧滑返回上一个页面的功能，感觉蛮好用的，刚好Android没有自带的侧滑返回效果，如果使用透明的Activity的话比较浪费性能，所以打算在实现一个简单的DragBackActivity，拖动的效果模仿iOS上的Chrome侧滑返回。

效果图如下:

使用方法:

继承自DragBackActivity就可以有侧滑返回效果。

如果想要禁用，重写isDisableDrag()函数返回true。定制返回动画的色彩：

粗略解析：

因为需要实现的目的是继承自这个DragBackActivity就可以实现拖动返回的效果，因为是靠近边缘的侧滑返回，所以要用到手势处理，需要获取到当前Activity的根视图，手势的处理是要放在视图层处理的。

每个Activity都有一个id为android.R.id.content的根视图，setContentView所设置的View就是该根视图的子View，本项目就是根据这个特性来移动整个Acivity的。

知道怎么移动Activity了，接下来就只剩拦截手势和绘制返回动画了。Android的事件传递是根据整棵视图树来传递的，所以视图越靠近树的根就越先收到触摸事件。所以我需要在android.R.id.content上或者同级的地方添加自定义的View，这时候就需要Window出场了，window有一个方法是获取到当前窗口的根视图:

获取到窗口的根视图之后就可以往上面添加自定义视图了，手势拦截处理写在自定义视图中。废话不多说下面来看源码。

###自定义视图为了可扩展性我把返回动画和手势处理分开来写

一、返回动画的编写（`DragBackHintView`）

为了节省内存提高性能，我决定继承自View使用Canvas绘图绘制。

大致的变量如上述代码，绘制图标（演示中的箭头）使用的起始是字体，好处就是占用资源少，可以变色，放大不会有失真，占用内存少。圆圈、阴影采用GradientDrawable绘制，圆圈的展现、消失动画使用ValueAnimator。不知道上述类的自行谷歌。

手势拦截处理是交给另外一个视图来处理的，所以在此处需要预留一个对外的接口来获知当前用户滑动到哪个位置了

上述代码就是在用户拖动的时候所经过的逻辑，绘制步骤主要分为三层，先绘制阴影背景，然后是圆圈，最后是图标。需要注意的是以下几点：

圆圈出现和消失的时候，图标会变色，需要根据圆圈消失、出现的动画数值来设置图标颜色数值。

图标是使用字体来绘制的，需要注意在Android中绘制文字的时候（drawText）内的参数

图标从无到有或者从有到无，会有一个旋转缩放渐变的动画，此时的旋转和缩放的操作对象是画布

此外还需要几个接口就是：

二、手势处理层（`EdgeDragLayer`）

关于侧滑返回的动画已经在上面的视图中处理了，在手势处理层中主要需要处理的就是手势，还有就是手指释放的时候，决定是回到最初的状态还是播放返回上一层的动画。

手势的检测 先看手势检测的代码

在检测到手指ACTION_DOWN的时候，我先判断是否小于一个给定的数值EDGE_WIDTH，当然这个数值不是固定的，和机器的dpi有关。如果条件成立，把状态设为DragState.DragStart，之后在ACTION_MOVE的时候再次判断移动的距离是否达到要求，当然MIN_DIS也不是固定值，同样和手机屏幕像素密度有关。如果移动的距离> MIN_DIS了，视图层就会拦截所有触摸事件，接下来的事情就交给onTouchEvent来处理。

在这里面我对多点触控优化了体验，只对第一个触控点起效mVelocityTracker是检测手指的移动速度用的，当用户快速移动的时候，就算没有超过屏幕的一般我也应该要触发返回的事件。其它的看代码应该能懂，代（wo）码（bu）是（xiang）最（zai）好（xie）的（xia）老（qu）师（le）。

接下去就是把这两个View添加到Activity中并简单链接一下即可。

源码地址: https://github.com/qgx446738721/DragBackActivity

2016-08-10 更新

一、返回动画的编写（DragBackHintView）

二、手势处理层（EdgeDragLayer）

一、返回动画的编写（`DragBackHintView`）

二、手势处理层（`EdgeDragLayer`）