View - AppBarLayout（二）自定义 Behavior

2023-12-11 03:35:12

View - AppBarLayout（二）自定义 Behavior

在上一篇文章 View - AppBarLayout（一）使用中介绍了 Behavior 是 CoordinatorLayout 实现子 View 间交互的一种方式。通过属性 app:layout_behavior 设置。根据属性 app:layout_behavior="…" ，不同的 behavior 会在不同的事件下触发不同的操作。

Behavior 可以通过接口的形式进行实现，也可以通过继承 View 中的 Behavior 类进行实现，继承 Behavior 类是最常用的实现方式。

下面以修改 AppBarLayout 为例，实现当 AppBarLayout 完全展开时，显示一个浮动按钮，当 AppBarLayout 隐藏时，浮动按钮也随之消失。

首先，创建一个继承 Behavior 类的类：

public class MyBehavior extends AppBarLayout.Behavior {

    //这里提供一个公开的设置按钮的接口
    public void setFab(FloatingActionButton fab) {
        this.fab = fab;
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, AppBarLayout child, View dependency) {
        //拿到 AppBarLayout 现在的 verticalOffset 
        int offset = child.getTopAndBottomOffset();
        //拿到 AppBarLayout 的最大便宜量，这个值应该是负数
        int maxScroll = child.getTotalScrollRange();
        //当前 AppBarLayout 已经滚动到了最上面，即 offset == 0
        if (offset == 0) {
            //这里判断了我们的 FloatingActionButton 是否已经被设置了
            if (fab != null) {
                //因为 AppBarLayout 已经完全展开，我们可以将 FloatingActionButton 隐藏
                fab.hide();
            }
        } else if (Math.abs(offset) >= Math.abs(maxScroll)) {
            //同上，这里判断了我们的 FloatingActionButton 是否已经被设置了
            if (fab != null) {
                //因为 AppBarLayout 已经完全隐藏，我们可以将 FloatingActionButton 显示
                fab.show();
            }
        }
        return super.onDependentViewChanged(parent, child, dependency);
    }

    private FloatingActionButton fab;
}

然后在布局文件里定义 AppBarLayout 和 FloatingActionButton，并在 AppBarLayout 中设置 app:layout_behavior 属性，值为上面实现的 Behavior 类。

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="标题" />

        </android.support.v7.widget.Toolbar>

    </android.support.design.widget.AppBarLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_add" />

</android.support.design.widget.CoordinatorLayout>

最后，在 Activity 中找到 FloatingActionButton，并通过 MyBehavior 类提供的 setFab() 方法将它设置进去。

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbar);

((MyBehavior) appBarLayout.getLayoutParams().getBehavior()).setFab(fab);

这样，当 AppBarLayout 完全展开时，浮动按钮就会隐藏，当 AppBarLayout 隐藏时，浮动按钮就会显示。