Android - Toolbar事件穿透和背景渐变

摘要：

最近公司的App作了一次改版，对UI页面作了一些用户体验上的优化。

(本文是对本次工做的踩坑总结)

页面效果：

本次App改版，笔者这牵扯到两个功能点的实现：

1. 点击“眼睛图标”，实现显示/隐藏各种资金 (老版有此功能，本次作些调整)

2. 实现导航栏背景图渐变

app.gif

实现策略：

功能一：点击“眼睛图标”，实现显示/隐藏各种资金

第1个功能点很简单，其实就是监听“眼睛图标”的点击事件，将须要显示的“数字”显示成固定文本“ **** ”并将“开眼图标”设置成“闭眼图标”。点击“闭眼图标”时，对以前的操做进行还原。

理论上是这样没有错，但实际操做起来就会发现有坑了/(ㄒoㄒ)/~

当笔者在点击“眼睛图标”时，发现Toolbar将点击事件拦截了，事件没法传递到下层布局......

那么怎样才能穿透Toolbar将点击事件分发到下面的布局呢？

Toolbar是一个悬浮在最上层的、独立的ViewGroup，里面没有包含下层的内容布局。并且Toolbar源码中onTouchEvent方法的返回值为true，意味着事件最多传递到这就会被消费掉。

Toolbar.png

难道要自定义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_bug.gif

能够看到，在华为手机上，笔者的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

让 lcs_actionbar_bg2.png 这张图片独立为这个导航栏渐变的页面服务，不会影响到其余界面。

最后，华为手机导航栏透明度的Bug终于解决了。

题外话

有朋友问：搞个标题栏特效为何不用 AppBarLayout + CollapsingToolbarLayou + Toolbar 作个折叠效果？这个应该很简单吧？

答：产品说咱们的App不少页面都有这种效果，仍是换种方式实现吧...

最后发表一下感慨：

做者：梦想编织者灬小楠 连接：https://www.jianshu.com/p/65591a718cdc 来源：简书 著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。