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

小编 2026-07-02 阅读:1953 评论:0

周末好，今天我们来讲一个动画效果的实现，当上滑列表时让Toolbar（工具栏）与FAB浮动按钮（实质还是一个按钮）隐藏，当下滑时又显示回来。实现这个动画有两种方法，今天我们接着上一篇（An...

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

我们重写了以上几个函数：

（1）onNestedPreScroll：在这里我们通过

mainToolbar = coordinatorLayout.findViewById(R.id.toolbar);

从根布局coordinatorLayout里获得了Toolbar控件，以便我们监听列表滑动的时候隐藏或显示Toolbar。

（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按钮也将不会执行隐藏和显示动画。

（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元素，到这里已全部讲解完毕。按照惯例给出源码下载地址：

版权声明

本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。

上一篇：c#$用法 下一篇：xamarin android menu的用法

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

版权声明

热门文章

Sequential Monte Carlo Methods (SMC) 序列蒙特卡洛/粒子滤波/Bootstrap Filtering

机房智能化温湿度解决方式之POE供电以太网温湿度传感器

Hive 系统函数及示例

CSRF的原理和防范措施

HTTP状态保持的原理

最近发表

标签列表

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

版权声明

相关阅读

leetcode_list 121.买卖股票的最佳时机

xamarin android listview的用法