Behavior实现滑动隐藏ToolBar与BottomNavigation

多说无益，先上效果图img\material-design

这个效果其实是和SegmentFault的首页效果是一样的。

Demo github地址戳这里

来由

前几天有人问我这样的效果如何实现，有何思路，我的第一反应就是使用Behavior来实现这个效果，使用Behavior实现此效果比自定义View实现此效果绝对要简单很多，之后找时间了实现了这个效果。

思路

用过ToolBar + CoordinatorLayout + AppBarLayout的人应该知道这三者组合使用再设置合适的参数(没用过的人赶紧去看看吧，或者看我的Demo也可以哟)，就可以实现滑动隐藏显示ToolBar，因此这部分的效果Android使用Behavior已经替我们实现好了，没必要再去费神了，而且它的效果也蛮不错。

接下来我们要考虑的就是如何实现在滑动的时候也隐藏底部的BottomNavigation，既然前面我已经说过用Behavior来实现此效果，因此我们需要自定义一个Behavior来实现滑动隐藏BottomNavigation。

撸代码

在前面一篇文章自定义Behavior实现快速返回效果(没看过的请先看看)中我已经介绍了自定义Behavior的相关知识，这里就不再赘述了。

先来看看ToolBar滑动隐藏的代码

<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:id="@+id/appBarLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.v7.widget.Toolbar android:id="@+id/toolBar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@android:color/holo_blue_dark" app:title="ToolBar Title" app:titleTextColor="@android:color/white" app:layout_scrollFlags="scroll|enterAlways"/> </android.support.design.widget.AppBarLayout> </android.support.design.widget.CoordinatorLayout>

上面属性设置中app:layout_scrollFlags="scroll|enterAlways"这个是必须要有，否则话滑动的时候ToolBar是不会滑动的。

那滑动隐藏BottomNavigation的这个Behavior该如何实现呢？其实很简单，我们在滑动列表的时候可以看到当ToolBar往上滑的时候BottomNavigation会同时往下滑，因此这里我可以把ToolBar作为BottomNavigation的依赖，ToolBar往上滑动多少BottomNavigation就同时往下滑动多少(这里我实现时保证了两者高度一致)。

既然知道了依赖关系也知道了滑动方向和滑动距离，再实现Behavior就简单多了，代码如下：

public class BottomNavigationViewBehavior extends CoordinatorLayout.Behavior<View> { public BottomNavigationViewBehavior() { } public BottomNavigationViewBehavior(Context context, AttributeSet attrs) { super(context, attrs); } @Override public boolean onLayoutChild(CoordinatorLayout parent, View child, int layoutDirection) { ((CoordinatorLayout.LayoutParams) child.getLayoutParams()).topMargin = parent.getMeasuredHeight() - child.getMeasuredHeight(); return super.onLayoutChild(parent, child, layoutDirection); } @Override public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) { //因为Behavior只对CoordinatorLayout的直接子View生效，因此将依赖关系转移到AppBarLayout return dependency instanceof AppBarLayout; } @Override public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) { //得到依赖View的滑动距离 int top = ((AppBarLayout.Behavior)((CoordinatorLayout.LayoutParams)dependency.getLayoutParams()).getBehavior()).getTopAndBottomOffset(); //因为BottomNavigation的滑动与ToolBar是反向的，所以取-top值 ViewCompat.setTranslationY(child, -top); return false; } }

上面的代码中获取依赖视图AppBarLayout的滑动距离时需要注意几点： 1. 通过AppBarLayout.getTranslationY()无法获取到正确的滑动距离 2. 通过AppBarLayout.getTop()无法获取到正确的滑动距离 3. 最后查看源码后发现通过AppBarLayout.Behavior.getTopAndBottomOffset()可以获得正确的滑动距离值

现在Behavior实现了，我们再来看完整的布局文件

<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:id="@+id/appBarLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.v7.widget.Toolbar android:id="@+id/toolBar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@android:color/holo_blue_dark" app:title="ToolBar Title" app:titleTextColor="@android:color/white" app:layout_scrollFlags="scroll|enterAlways"/> <android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/holo_blue_light" app:tabTextColor="@android:color/white" app:tabGravity="center" app:tabIndicatorColor="@android:color/white" app:tabSelectedTextColor="@android:color/holo_red_dark"/> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white" app:layout_behavior="@string/appbar_scrolling_view_behavior"/> <android.support.design.widget.BottomNavigationView android:id="@+id/bottomNavigationView" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@android:color/holo_blue_dark" android:layout_gravity="bottom" app:menu="@menu/bottom_menus" app:layout_behavior="cn.ittiger.stickynavigation.behavior.BottomNavigationViewBehavior" /> </android.support.design.widget.CoordinatorLayout>

对于布局中的ToolBar和BottomNavigationView也可以换成其他任意View来实现滑动隐藏效果。

Demo的完整代码在这 github地址