Android学习之CoordinatorLayout+AppBarLayout

阅读原文时间：2023年07月12日阅读：1

•AppBarLayout

简介

　　AppbarLayout 是一种支持响应滚动手势的 app bar 布局；

基本使用

　　新建一个项目，命名为 TestAppBarLayout；

　　修改 activity_main.xml 中的代码；

activity_main.xml
<com.google.android.material.appbar.AppBarLayout  
    android:layout\_width="match\_parent"  
    android:layout\_height="wrap\_content">

    <androidx.appcompat.widget.Toolbar  
        android:layout\_width="match\_parent"  
        android:layout\_height="?attr/actionBarSize"  
        app:layout\_scrollFlags="scroll"  
        app:title="Title"  
        />

</com.google.android.material.appbar.AppBarLayout>

<androidx.core.widget.NestedScrollView  
    android:layout\_width="match\_parent"  
    android:layout\_height="match\_parent"  
    app:layout\_behavior="@string/appbar\_scrolling\_view\_behavior">

    <LinearLayout  
        android:layout\_width="match\_parent"  
        android:layout\_height="match\_parent"  
        android:orientation="vertical">

        <TextView  
            android:layout\_width="match\_parent"  
            android:layout\_height="wrap\_content"  
            android:padding="30dp"  
            android:text="测试数据1"  
            android:textSize="20sp" />

        <TextView  
            android:layout\_width="match\_parent"  
            android:layout\_height="wrap\_content"  
            android:padding="30dp"  
            android:text="测试数据2"  
            android:textSize="20sp" />

        <TextView  
            android:layout\_width="match\_parent"  
            android:layout\_height="wrap\_content"  
            android:padding="30dp"  
            android:text="测试数据3"  
            android:textSize="20sp" />

        <TextView  
            android:layout\_width="match\_parent"  
            android:layout\_height="wrap\_content"  
            android:padding="30dp"  
            android:text="测试数据4"  
            android:textSize="20sp" />

        <TextView  
            android:layout\_width="match\_parent"  
            android:layout\_height="wrap\_content"  
            android:padding="30dp"  
            android:text="测试数据5"  
            android:textSize="20sp" />

        <TextView  
            android:layout\_width="match\_parent"  
            android:layout\_height="wrap\_content"  
            android:padding="30dp"  
            android:text="测试数据6"  
            android:textSize="20sp" />

        <TextView  
            android:layout\_width="match\_parent"  
            android:layout\_height="wrap\_content"  
            android:padding="30dp"  
            android:text="测试数据7"  
            android:textSize="20sp" />

        <TextView  
            android:layout\_width="match\_parent"  
            android:layout\_height="wrap\_content"  
            android:padding="30dp"  
            android:text="测试数据8"  
            android:textSize="20sp" />

        <TextView  
            android:layout\_width="match\_parent"  
            android:layout\_height="wrap\_content"  
            android:padding="30dp"  
            android:text="测试数据9"  
            android:textSize="20sp" />

        <TextView  
            android:layout\_width="match\_parent"  
            android:layout\_height="wrap\_content"  
            android:padding="30dp"  
            android:text="测试数据10"  
            android:textSize="20sp" />  
    </LinearLayout>  
</androidx.core.widget.NestedScrollView>
　　AppbarLayout 继承了 LinearLayout（默认的 AppBarLayout 是垂直方向），它的作用是把 AppBarLayout 包裹的内容都作为 AppBar；

　　说白了它的出现就是为了和 CoordinatorLayout 搭配使用，实现一些炫酷的效果的；

　　没有CoordinatorLayout，它和Linearlayout没区别；

　　细心的你会发现，Toolbar 多了一个属性 app:layout_scrollFlags="scroll" ，

　　该属性是 AppBarLayout 的直接子控件可以设置，有多个取值：

app:layout_scrollFlags="scroll"

值设为 scroll 的 View 会跟随滚动事件一起发生移动

就是当指定的 NestedScrollView 发生滚动时，该 View 也跟随一起滚动

就好像这个 View 也是属于这个 NestedScrollView 一样

app:layout_scrollFlags="scroll|enterAlways"

当任何时候 NestedScrollView 往下滚动时，Toolbar 会直接往下滚动

而不用考虑 NestedScrollView 是否滚动到最顶部

也就是说只要向下滚动 Toolbar 就会显示出来，只要向上滑动 Toolbar 就会向上收缩

app:layout_scrollFlags="scroll|enterAlwaysCollapsed"

向下滚动 NestedScrollView 到最底端时 Toolbar 才会显示出来

app:layout_scrollFlags="scroll|exitUntilCollapsed"

Toolbar 往上逐渐 “消失” 时，会一直往上滑动

直到剩下的的高度达到它的最小高度后，再响应 NestedScrollView 的内部滑动事件

修改 Toolbar 的 android:layout_height="100dp"

　　需要注意的是与 AppBarLayout 组合的滚动布局（RecyclerView, NestedScrollView等），

　　需要设置 app:layout_behavior="@string/appbar_scrolling_view_behavior" ；

　　 @string/appbar_scrolling_view_behavior 是一个系统字符串，

　　值为 android.support.design.widget.AppBarLayout$ScrollingViewBehavior ；

　　唯一的作用是把自己（使用者）放到 AppBarLayout 的下面，你可以尝试去掉这句话看看效果如何；

　　去掉该属性，并设置 app:layout_scrollFlags="scroll" ，android:layout_height="?attr/actionBarSize"

运行效果

　　　　　　

　　设置 $app:layout\_behavior$ 属性　　　　　　不设置 $app:layout\_behavior$ 属性

•扩展

　　我们可以在 AppBarLayout 中包含 Toolbar 和 ImageView；

　　然后只给 ImageView 设置 app:layout_scrollFlags=”scroll” 属性，Toolbar 不设置；　

　　修改 activity_main.xml 中的代码；

activity_main.xml

<com.google.android.material.appbar.AppBarLayout  
    android:layout\_width="match\_parent"  
    android:layout\_height="wrap\_content">

    <ImageView  
        android:layout\_width="match\_parent"  
        android:layout\_height="200dp"  
        app:layout\_scrollFlags="scroll"  
        android:src="@drawable/luffy"  
        android:scaleType="centerCrop"  
        />

    <androidx.appcompat.widget.Toolbar  
        android:layout\_width="match\_parent"  
        android:layout\_height="?attr/actionBarSize"  
        app:title="Title"  
        />

</com.google.android.material.appbar.AppBarLayout>

<androidx.core.widget.NestedScrollView  
    android:layout\_width="match\_parent"  
    android:layout\_height="match\_parent"  
    app:layout\_behavior="@string/appbar\_scrolling\_view\_behavior">  
    <LinearLayout  
        ......  
    </LinearLayout>  
</androidx.core.widget.NestedScrollView>