Android高级UI开发（十九）监听列表的滑动从而隐藏或显示Toolbar与Fab浮动按钮（二）
周末好， 今天我们来讲一个动画效果的实现，当上滑列表时让Toolbar（工具栏）与FAB浮动按钮（实质还是一个按钮）隐藏，当下滑时又显示回来。实现这个动画有两种方法，今天我们接着上一篇（Android高级进阶十八），用第二种方法来实现这个动画效果，它更符合Google Material Design的规范。 动画效果如下：
一、实现思路：
1. 步骤：
1.1. 根布局使用CoordinatorLayout
1.2.给FAB浮动按钮指定一个behavior（FloatingActionButton.Behavior），通过app:layout_behavior属性指定。
1.3. 重写FloatingActionButton.Behavior的onStartNestedScroll函数与onNestedScroll函数来监听列表的滑动事件，从而让FAB作出动画改变（隐藏与显示动画）。
2. 原理：
CoordinatorLayout 是什么？Behavior又起了什么作用？以下用一个通俗易懂的比喻让你1分钟弄清楚。
原理在于CoordinatorLayout 与 它的子布局以及Behavior的关系。CoordinatorLayout 作为根布局，它可以监测到它的子布局的事件变化，如列表的滑动事件，FAB及Toobar的触摸事件等。我们可以把列表（RecyclerView）、Toolbar、FAB按钮看作为普通职员，CoordinatorLayout 为技术总监，一般技术总监检测到问题后（监听到滑动事件等）不会直接去找普通职员，它会找负责这个普通职员的项目经理，并把这个问题告诉项目经理，然后项目经理再去对普通职员做出指示，完成或修复一些问题，这里的项目经理就是Behavior。用一句话来描述CoordinatorLayout与Behavior、列表控件、FAB的关系，那就是：CoordinatorLayout检测到列表的滑动事件，然后将滑动事件通知给负责FAB浮动按钮的Behavior，最后在Behavior类里写代码指挥FAB的隐藏或显示动画。
二、代码实现
1. 布局代码：
-
<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.v7.widget.RecyclerView
-
android:id="@+id/recyclerview"
-
android:layout_width="match_parent"
-
android:layout_height="match_parent"
-
android:clipToPadding="false"
-
android:clipChildren="false"
-
android:paddingTop="?attr/actionBarSize"
-
/>
-
<android.support.v7.widget.Toolbar
-
android:id="@+id/toolbar"
-
android:layout_width="match_parent"
-
android:layout_height="?attr/actionBarSize"
-
android:background="?attr/colorPrimary"/>
-
<android.support.design.widget.FloatingActionButton
-
app:layout_behavior="com.example.administrator.coordinatorlayout2.FabBehavior"
-
android:id="@+id/fab"
-
android:layout_width="58dp"
-
android:layout_height="58dp"
-
android:layout_margin="16dp"
-
android:layout_gravity="bottom|end"
-
android:src="@mipmap/ic_favorite_outline_white_24dp"
-
/>
-
-
</android.support.design.widget.CoordinatorLayout>
其中CoordinatorLayout作为根布局监测RecyclerView的滑动事件，然后通知给FloatingActionButton的项目经理：FabBehavior，它通过layout_behavior属性配置给FloatingActionButton。接下来我们就看一下FabBehavior的实现，它到底收到了什么事件，然后做出对FloatingActionButton的隐藏或显示动画。
2. FabBehavior源码：
该类用来监听CoordinatorLayout分派过来的事件，比如RecyclerView列表的滑动事件。我们主要在onNestedScroll函数里监听到了滑动事件，根据滑动的方向与距离对Toolbar与FAB按钮做出了相应的处理：显示或隐藏。
-
package com.example.administrator.coordinatorlayout2;
-
-
import android.content.Context;
-
import android.support.annotation.NonNull;
-
import android.support.design.widget.CoordinatorLayout;
-
import android.support.design.widget.FloatingActionButton;
-
import android.support.v4.view.ViewCompat;
-
import android.util.AttributeSet;
-
import android.util.Log;
-
import android.view.View;
-
-
import android.view.ViewGroup;
-
import android.view.animation.AccelerateInterpolator;
-
import android.view.animation.DecelerateInterpolator;
-
import android.widget.RelativeLayout.LayoutParams;
-
import android.support.v7.widget.Toolbar;
-
-
public class FabBehavior extends FloatingActionButton.Behavior {
-
private boolean visible = true;
-
Toolbar mainToolbar;
-
private int distance = 0;
-
String TAG = FabBehavior.class.getSimpleName();
-
-
public FabBehavior() {
-
}
-
-
public FabBehavior(Context context, AttributeSet attrs) {
-
super(context, attrs);
-
}
-
-
@Override
-
public void onNestedPreScroll(@NonNull CoordinatorLayout coordinatorLayout, @NonNull FloatingActionButton child, @NonNull View target, int dx, int dy, @NonNull int[] consumed, int type) {
-
if (mainToolbar == null)
-
mainToolbar = coordinatorLayout.findViewById(R.id.toolbar);
-
-
Log.i(TAG, "onNestedPreScroll");
-
super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed, type);
-
}
-
-
@Override
-
public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout,
-
FloatingActionButton child, View directTargetChild, View target,
-
int nestedScrollAxes) {
-
-
Log.i(TAG, "onStartNestedScroll ");
-
return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL || super.onStartNestedScroll(coordinatorLayout, child, directTargetChild,
-
target, nestedScrollAxes);
-
}
-
-
@Override
-
public void onNestedScroll(CoordinatorLayout coordinatorLayout,
-
FloatingActionButton child, View target, int dxConsumed,
-
int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
-
Log.i(TAG, "onNestedScroll dxConsumed=" + dxConsumed + ",dyConsumed=" + dyConsumed);
-
super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed,
-
dxUnconsumed, dyUnconsumed);
-
-
if (dyConsumed > 20 && visible) {
-
//隐藏动画
-
visible = false;
-
onHide(child);
-
distance = 0;
-
} else if (dyConsumed < -20 && !visible) {
-
//显示动画
-
visible = true;
-
onShow(child);
-
distance = 0;
-
}
-
if (visible && dyConsumed > 0 || (!visible && dyConsumed < 0)) {
-
distance += dyUnconsumed;
-
}
-
-
}
-
-
public void onHide(FloatingActionButton fab) {
-
-
mainToolbar.animate().translationY(-mainToolbar.getHeight()).setInterpolator(new AccelerateInterpolator(3));
-
CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) fab.getLayoutParams();
-
-
fab.animate().translationY(fab.getHeight() + ((CoordinatorLayout.LayoutParams) layoutParams).bottomMargin).setInterpolator(new AccelerateInterpolator(3));
-
//gxw- ViewCompat.animate(fab).scaleX(0f).scaleY(0f).start();
-
}
-
-
public void onShow(FloatingActionButton fab) {
-
-
mainToolbar.animate().translationY(0).setInterpolator(new DecelerateInterpolator(3));
-
-
LayoutParams layoutParams = (LayoutParams) fab.getLayoutParams();
-
fab.animate().translationY(0).setInterpolator(new DecelerateInterpolator(3));
-
//gxw+-ViewCompat.animate(fab).scaleX(1f).scaleY(1f).start();
-
}
-
-
}
我们重写了以下几个函数：
2.1 onNestedPreScroll：
在这里我们通过
mainToolbar = coordinatorLayout.findViewById(R.id.toolbar);
从根布局coordinatorLayout里获得了Toolbar控件，以便我们监听列表滑动的时候 隐藏或显示Toolbar。
2.2 onStartNestedScroll：
在这个函数里我们向系统指明我们要监听的是垂直方向上的滑动，所以最终返回如下：
-
return nestedScrollAxes==ViewCompat.SCROLL_AXIS_VERTICAL||super.onStartNestedScroll(coordinatorLayout, child, directTargetChild,
-
target, nestedScrollAxes);
SCROLL_AXIS_VERTICAL表示监听垂直方向上的滑动。如果正在滑动的是水平方向，那么onStartNestedScroll将调用super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes)，然而super.onStartNestedScroll函数默认返回false，如果这里返回false,后面的onNestedScroll函数将不会执行，因此我们的Toobar与Fab按钮也将不会执行隐藏和显示动画。
2.3 onNestedScroll函数：
用于监听滑动事件，这里因为只有RecyclerView可以滑动，所以滑动事件也就指的是RecyclerView的滑动。
-
onNestedScroll(CoordinatorLayout coordinatorLayout,
-
FloatingActionButton child, View target, int dxConsumed,
-
int dyConsumed, int dxUnconsumed, int dyUnconsumed)
我们在此监听滑动的距离，同Android高级进阶（十八）一样，根据dy>0 表示手指上滑，dy < 0表示手指下滑，然后还有一个滑动距离累积到20px时才执行隐藏或显示动画，更详细的分析请参考Android高级进阶（十八）。在这里我们发现并没有我们要的dy,而是换成了dyConsumed。我们可以判断dyConsumed>0表示上滑，同时我们需要隐藏Toolbar与Fab按钮，反之当dyConsumed < 0表示下滑，同时我们需要显示Toolbar与Fab按钮。这里的处理代码与Android高级进阶（十八）中MyScrollListener：onScrolled函数里一样，这里只是把原来的dy换成了dyConsumed，监听滑动的处理代码如下：
-
if(dyConsumed > 20&&visible){
-
//隐藏动画
-
visible = false;
-
onHide(child);
-
distance = 0;
-
}else if(dyConsumed < -20 && !visible){
-
//显示动画
-
visible = true;
-
onShow(child);
-
distance = 0;
-
}
-
if(visible&&dyConsumed>0||(!visible&&dyConsumed<0)){
-
distance += dyUnconsumed;
-
}
值得注意的是上述代码里的child指的就是FloatActionButton，即我们1中布局代码中的浮动按钮。为何child不是其他控件呢，比如Toolbar等呢，这是因为我们只给FloatActionButton配置了项目负责人FabBehavior，且
FabBehavior extends FloatingActionButton.Behavior
FabBehavior：自定义Behavior直接继承于FloatingActionButton.Behavior，它是专门用来管理FloatActionButton的Behavior，因此child指的是FloatActionButton也是顺理成章。
3. 动画代码
与Android高级进阶（十八）中的隐藏和显示动画一样。
3.1. onHide函数
（1）隐藏Toolbar
toolbar.animate().translationY(-toolbar.getHeight()).setInterpolator(new AccelerateInterpolator(3));
toolbar在垂直方向上，从当前顶部位置再往上 移动 一段距离（toolbar的高度），这样toobar就相当于从屏幕顶部移出去了。
其中AccelerateInterpolator是平移动画的速度模式，当前为加速模式，就是先慢后快。
（2）隐藏浮动按钮FAB
RelativeLayout.LayoutParams layoutParams = (LayoutParams) fab.getLayoutParams();
fab.animate().translationY(fab.getHeight()+layoutParams.bottomMargin).setInterpolator(new AccelerateInterpolator(3));
从FAB按钮顶部开始，在垂直正方向上移动（Y轴向下移动）一段距离。往下平移的距离是按钮自身的高度与距离屏幕底部的距离，这样就刚好把FAB浮动按钮从屏幕底端移出去了。
3.2 onShow函数
（1）显示Toolbar
toolbar.animate().translationY(0)
（2）显示浮动按钮FAB
fab.animate().translationY(0)
移动到初始位置，所以参数为0.
再回顾一下最终效果：
OK，使用CoordinatorLayout 与Behavior的协作来监听列表滑动，从而隐藏或显示Toolbar等UI元素，到这里已全部讲解完毕。按照惯例给出源码下载地址：https://download.csdn.net/download/gaoxiaoweiandy/10871215
文章来源: blog.csdn.net，作者：冉航--小虾米，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/gaoxiaoweiandy/article/details/85220694
- 点赞
- 收藏
- 关注作者
评论（0）