Android高级UI开发（十九）监听列表的滑动从而隐藏或显示Toolbar与Fab浮动按钮（二）

最新推荐文章于 2022-01-19 18:59:35 发布

冉航--小虾米

最新推荐文章于 2022-01-19 18:59:35 发布

阅读量2.5k

点赞数

分类专栏： android高级UI

本文链接：https://blog.csdn.net/gaoxiaoweiandy/article/details/85220694

版权

android高级UI 专栏收录该内容

47 篇文章 15 订阅

订阅专栏

周末好，今天我们来讲一个动画效果的实现，当上滑列表时让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

冉航--小虾米

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Android高级UI开发（十九）监听列表的滑动从而隐藏或显示Toolbar与Fab浮动按钮（二）

周末好，今天我们来讲一个动画效果的实现，当上滑列表时让Toolbar（工具栏）与FAB浮动按钮（实质还是一个按钮）隐藏，当下滑时又显示回来。实现这个动画有两种方法，今天我们接着上一篇（Android高级进阶十八），用第二种方法来实现这个动画效果，它更符合Google Material Design的规范。动画效果如下：一、实现思路：1.步骤：1.1.根...
复制链接

扫一扫