CoordinatorLayout学习

浅显易懂：《CoordinatorLayout 学习(一) - CoordinatorLayout的基本使用》

主要介绍CoordinatorLayout的基本使用，主要是介绍CoordinatorLayout与AppBarLayout的搭配使用。

1、CoordinatorLayout协调者布局，协调child之间的联动，它是根据behavior进行协调的。

2、AppBarLayout是个LinearLayout，可以在CoordinatorLayout中实现折叠的ActionBar效果。

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <View
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#5FF"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed" />
        <View
            android:background="#FF00FF"
            android:layout_width="match_parent"
            android:layout_height="50dp"/>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

 

① 在AppBarLayout里面放了两个View，其中一个设置scrollFlags，一个没有设置。没有设置的是不会折叠的。

② 在这里，AppBarLayout并没有设置Behavior,而RecyclerView却设置了的。我统一的解释一下，在CoordinatorLayout内部，理论上每个View必须携带一个Behavior,而这里AppBarLayout没有携带是因为它本身就有，所以不需要声明

 

3、CollapsingToolbarLayout 主要是实现折叠布局的。如何使用：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainContentFragment">

    // 实现折叠ActionBar
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="300dp">

　　　　  // 实现折叠布局
        <com.google.android.material.appbar.CollapsingToolbarLayout
　　　　　　　 android:layout_width="match_parent"
            android:layout_height="240dp"
            android:background="@android:color/holo_green_light"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed">

            <androidx.appcompat.widget.AppCompatImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/bg_home"
                app:layout_collapseMode="parallax" /> // off|pin|parallax

　　　　　　　　// 模拟顶部搜索栏
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="55dp"
                android:layout_margin="15dp"
                android:background="#5000"
                app:layout_collapseMode="pin" // 写与不写，效果不一样
                >

                <androidx.appcompat.widget.AppCompatImageView
                    android:layout_width="55dp"
                    android:layout_height="match_parent"
                    android:src="@mipmap/ic_launcher" />
            </RelativeLayout>

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

　　　　　　// 模拟tabLayout
        <TextView
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="@android:color/holo_blue_light"
            android:gravity="center"
            android:text="tabLayout" />

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

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

注意：CollapsingToolbarLayout需要作为AppBarLayout的子View才会有效。

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainContentFragment">

    <!--实现折叠ActionBar-->
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="300dp">

        <!--CollapsingToolbarLayout或者其它-->
        <!--实现折叠布局-->
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="240dp"
            android:background="@android:color/holo_green_light"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed">

            <androidx.appcompat.widget.AppCompatImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/bg_home"
                app:layout_collapseMode="parallax" />

            <!--顶部搜索栏-->
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="55dp"
                android:layout_margin="15dp"
                android:background="#5000"
                app:layout_collapseMode="pin"
                >

                <androidx.appcompat.widget.AppCompatImageView
                    android:layout_width="55dp"
                    android:layout_height="match_parent"
                    android:src="@mipmap/ic_launcher" />
            </RelativeLayout>

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

        <!--tabLayout-->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="@android:color/holo_blue_light"
            android:gravity="center"
            android:text="tabLayout" />

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

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>