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才会有效。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<?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>