摘要：
最近公司的App做了一次改版，对UI页面做了一些用户体验上的优化。
(本文是对本次工作的踩坑总结)
页面效果：
本次App改版，笔者这牵扯到两个功能点的实现：
点击“眼睛图标”，实现显示/隐藏各类资金 (老版有此功能，本次做些调整)
实现导航栏背景图渐变
实现策略：
功能一：点击“眼睛图标”，实现显示/隐藏各类资金
第1个功能点很简单，其实就是监听“眼睛图标”的点击事件，将需要显示的“数字”显示成固定文本“ **** ”并将“开眼图标”设置成“闭眼图标”。点击“闭眼图标”时，对之前的操作进行还原。
理论上是这样没有错，但实际操作起来就会发现有坑了/(ㄒoㄒ)/~
当笔者在点击“眼睛图标”时，发现Toolbar将点击事件拦截了，事件无法传递到下层布局......
那么怎样才能穿透Toolbar将点击事件分发到下面的布局呢？
Toolbar是一个悬浮在最上层的、独立的ViewGroup，里面没有包含下层的内容布局。而且Toolbar源码中onTouchEvent方法的返回值为true，意味着事件最多传递到这就会被消费掉。
难道要自定义Toolbar，重写onTouchEvent方法？这是笔者最初的想法，但是后来想了想，这种修改源码的方式有点作死（因为笔者没有详细看过Toolbar的源码，而且就算看过Toolbar的源码，源码后期发生变更时还要维护）。
笔者的XML布局层次（简化版）：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout >
<!-- 内容部分 -->
<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/swipe_refresh_layout">
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view" />
</android.support.v4.widget.SwipeRefreshLayout>
<!-- 标题栏 -->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
</android.support.v7.widget.Toolbar>
</RelativeLayout>
我们可以看到“标题栏”和“内容部分”在布局上是“平行关系”，但实际在视图上“标题栏”是在“内容部分”的上方。
寻找解决办法：
笔者思考了很长时间，想出了一个相对靠谱的解决办法：Toolbar执行到onTouchEvent之后，事件就被消费了。我们可以在这之前搞点事情，比如改变事件流的传递方向，将事件流向下层布局分发。
实现事件穿透的代码（仅包含触摸监听器的实现）：
// 穿透Toolbar的点击事件,向下层分发处理
mToolbarOnTouchListener = new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
return findViewById(R.id.swipe_refresh_layout).dispatchTouchEvent(event);
}
};
略懂事件传递机制的Android程序员应该都知道，View触摸监听器的onTouch方法会在onTouchEvent方法执行完成之前执行，那么我们可以在onTouch方法里再进行1次事件分发，调用“内容部分”的最外层布局SwipeRefreshLayout的分发方法dispatchTouchEvent(MotionEvent event)，并将正在Toolbar中进行传递的event事件作为参数传递进去，让SwipeRefreshLayout继续处理该事件，从而实现事件穿透。
解决办法终于找到了，那么直接上来就给Toolbar设置完这个触摸监听器就万事大吉了吗？
我们还做了一个背景图片渐变的功能，Toolbar背景不可见或半透明时响应下层布局的点击事件很正常，很容易理解。但是背景图片如果完全可见，点击Toolbar还响应下层布局的点击事件，是不是用户体验上有点别扭呢？（全都是细节）
最终的解决方案 (动态给Toolbar设置监听器)：
-
当背景图片完全可见之前，给Toolbar设置触摸监听器mToolbarOnTouchListener。
mToolbar.setOnTouchListener(mToolbarOnTouchListener); -
当背景图片完全可见之后，将Toolbar的触摸监听器设置为null。
mToolbar.setOnTouchListener(null);
至此，第一个问题就描述完了。
功能二：实现导航栏背景图渐变
之前笔者做过Toolbar背景颜色渐变的效果，但笔者的App基本上每个页面的Toolbar背景用的都是图片，不是颜色。仔细想了想，图片的渐变也只能用透明度来搞了。
在网上百度&谷歌了一下，终于找到了设置图片透明度的方法（大致3步）
// 获取Drawable对象
Drawable mDrawable = ContextCompat.getDrawable(mActivity, R.drawable.lcs_actionbar_bg2);
// 设置Drawable的透明度
mDrawable.setAlpha(255);
// 给Toolbar设置背景图
mToolbar.setBackgroundDrawable(mDrawable);
有了解决方案终于可以开工了:
recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
// 获取背景图片
Drawable mDrawable = ContextCompat.getDrawable(mActivity, R.drawable.lcs_actionbar_bg2);
@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
}
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
// 省略了与渐变背景图无关的代码
......
int toolBarHeight = mToolbar.getMeasuredHeight();
if ((recyclerView.computeVerticalScrollOffset()) >= (toolBarHeight * 2.5)) { // >=Toolbar高度的2.5倍时全显背景图
mDrawable.setAlpha(255);
mToolbar.setBackgroundDrawable(mDrawable);
mToolbar.setOnTouchListener(null);
} else if((recyclerView.computeVerticalScrollOffset()) >= toolBarHeight){ // >=Toolbar高度&&<Toolbar高度的2.5倍时开始渐变背景图
mDrawable.setAlpha((int) (255 * ((recyclerView.computeVerticalScrollOffset() - toolBarHeight)/(toolBarHeight * 1.5F))));
mToolbar.setBackgroundDrawable(mDrawable);
mToolbar.setOnTouchListener(mToolbarOnTouchListener);
} else { // 小于Toolbar高度时不设置背景图
mToolbar.setBackgroundDrawable(null);
mToolbar.setOnTouchListener(mToolbarOnTouchListener);
}
}
});
RecyclerView.computeVerticalScrollOffset() 可以返回给我们recyclerView竖直滚动的距离。
笔者给RecyclerView添加了一个滚动监听器，根据RecyclerView竖直滚动的距离动态决定背景图片的透明度，具体细节如下：
当RecyclerView竖直滚动距离<Toolbar的高度时，不设置背景图（Toolbar背景透明），并设置上触摸监听器（穿透Toolbar点击事件）。
当RecyclerView竖直滚动距离>=Toolbar的高度且<2.5倍的Toolbar高度时，渐变背景图，并设置上触摸监听器（穿透Toolbar点击事件）。
RecyclerView竖直滚动距离>=2.5倍的Toolbar高度时，全显背景图，触摸监听器设置为null。
接着运行了一下，发现已经实现了文章开始时的动态图效果。
之后，放心的打包完App提交给测试MM测试了。但好景不长，测试MM那测试机类型很多，在很多华为手机上测出了一个Bug，如下图所示：
可以看到，在华为手机上，笔者的APP中所有用到该背景图的地方都会受到透明度影响。
后来从网上查阅了一些资料，才知道原来华为手机是做了一些优化处理的。同一张图片（比如R.drawable.lcs_actionbar_bg）在被转化成Drawable对象并在内存中使用时会被“共享”，意味着笔者App中所有对这个Drawable（R.drawable.lcs_actionbar_bg）的操作全都是在对同一个对象进行操作。
华为手机的这种处理方式减少多余对象的生成，减少了内存暂用，减少了GC，仔细想想还是挺赞的。(好像扯远了，该回归正题想想怎么处理了o(╯□╰)o....)
一开始想了想，觉得可以这样处理：在离开这个页面时，记录一下透明度，把Drawable背景图设置为完全可见的；回到这个页面时，根据记录值还原Drawable的透明度。
理想是美好的，现实是残酷的。这个页面的管理器是一个Fragment，笔者在onStop方法里做了上述这种处理，但还是会偶发出现这种透明度的Bug，看来笔者还有很多细节没有考虑到（怎么感觉这细节越陷越深了/(ㄒoㄒ)/~~）。
最终的解决办法：
笔者无奈之下放弃了之前的处理方式，想了一个投机取巧的办法：
把资源文件 lcs_actionbar_bg.png 又复制了一份,命名为lcs_actionbar_bg2.png
让 lcs_actionbar_bg2.png 这张图片独立为这个导航栏渐变的页面服务，不会影响到其他界面。
最后，华为手机导航栏透明度的Bug终于解决了。
题外话
有朋友问：搞个标题栏特效为什么不用 AppBarLayout + CollapsingToolbarLayou + Toolbar 做个折叠效果？这个应该很简单吧？
答：产品说我们的App很多页面都有这种效果，还是换种方式实现吧...
最后发表一下感慨：
