CoordinatorLayout及高级菜单栏AppBarLayout、CollapsingBarLayout
1、协调布局CoordinatorLayout
安卓Material Design库中一个比较难的控件就是CoordinatorLayout协调布局。协调布局CoordinatorLayout继承自ViewGroup,类似于RelativeLayout。
1.1、协调布局属性
协调布局有两个重要的属性设置app:layout_anchor和app:layout_anchorGravity属性。
app:layout_anchor:设置控件的锚点,即以另一个控件为参照设置位置
app:layout_anchorGravity:控件相对于锚点的位置举个例子,FloatingButton在CoordinatorLayout布局中应用。这里并没有使用上面的两个属性
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/floating_button"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="bottom|end"
android:layout_margin="20dp"
android:background="@drawable/bg_default" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>1.2、注意
CoordinatorLayout协调布局使用app:layout_anchor和app:layout_anchorGravity属性时不能以父布局为锚点,否则会报错:
Shutting down VM
FATAL EXCEPTION: main
Process: com.example.androidstudio, PID: 6540
java.lang.IllegalStateException: View can not be anchored to the the parent CoordinatorLayout
at androidx.coordinatorlayout.widget.CoordinatorLayout$LayoutParams.resolveAnchorView(CoordinatorLayout.java:3055)
at androidx.coordinatorlayout.widget.CoordinatorLayout$LayoutParams.findAnchorView(CoordinatorLayout.java:3038)
at androidx.coordinatorlayout.widget.CoordinatorLayout.prepareChildren(CoordinatorLayout.java:669)
2、滚动应用栏AppBarLayout
Activity的工具栏从最开始的ActionBar到功能强大的Toolbar,后来又加入了AppBarLayout,借助协调布局能够使工具栏随着界面的滑动向上滚动。

2.1、演示布局
布局如下:
<?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:id="@+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appbarlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@drawable/tab_bg_selector"
app:layout_scrollFlags="scroll|enterAlways" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/floating_button"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="bottom|end"
android:layout_margin="20dp"
android:background="@drawable/bg_default" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>关键布局代码,用一个AppBarLayout包裹一个ToolBar,让给ToolBar加一个app:layout_scrollFlags属性,高度取自系统ActionBar高度?attr/actionBarSize。
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appbarlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@drawable/tab_bg_selector"
app:layout_scrollFlags="scroll|enterAlways" />
</com.google.android.material.appbar.AppBarLayout>2.2、AppBarLayout属性layout_scrollFalgs
AppBarLayout的滚动标志位app:layout_scrollFalgs,用来定义下级控件的滚动行为,下级控件中进行设置该属性。
①scroll
标志头部与主体一起滚动
②enterAlways
标志头部与主体一起滚动,头部滚到位后,主体继续向上或者向下滚动
③exitUntilCollapsed
保证页面上至少能看到最小化的工具栏,不会完全看不到工具栏。上滚动:先收缩头部,然后头部固定不动,主体继续向上滚动。下滚动:主体先滚动,头部不动。主体全部拉出去,头部向下展开。
④enterAlwaysCollapsed
与enterAlways标志位一起使用。该标志位有折叠操作,单独的enterAlways没有折叠操作。
⑤snap
用户松开手指,系统自行判断。接下来是全部向上滚到顶或者全部向下展开。
3、可折叠应用栏CollapsingToolBarLayout
类似支付宝主页的工具栏下拉展开效果

3.1、演示布局
布局比较麻烦,层层包裹,用AppBarLayout包裹CollapsingToolBarLayoout,再用CollapsingToolBarLayoout包裹ToolBar节点。
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appbarlayout"
android:layout_width="match_parent"
android:layout_height="160dp"
android:background="@color/colorAccent">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="@+id/collapsing_tool_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="@color/banner"
app:expandedTitleMarginStart="40dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:title="可折叠工具栏">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@drawable/tab_bg_selector"
app:layout_collapseMode="none" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>3.2、CollapsingBarLayout属性
有一些重要的属性需要了解,对于第二层包裹CollapsingBarLayout的属性有:
①ToolBar被折叠到顶部固定时候的背景
app:contentScrim="@color/ "②状态栏的背景
app:statusBarScrim="@color/ "③ToolBar的标题
app:title="ToolBar标题"④标题距离开头距离margin
app:expandedTitleMarginStart="40dp"⑤CollapsingToolbarLayout滚动标志
app:layout_scrollFlags="scroll|exitUntilCollapsed"3.3、Toolbar属性layout_collapseMode
第三层包裹Toolbar设置的属性最重要的一个是app:layout_collapseMode,它有三个值
①app:layout_collapseMode = “pin” 固定模式:ToolBar不动,不受CollapsingBarLayout折叠影响

②app:layout_collapseMode = “parallax”视差模式:随着CollapsingBarLayout的折叠展开,Toolbar也收缩展开。设置了这个还须要设置折叠系数collapseParallaxMultiplier。为0时就是后面的app:layout_collapseMode 为none的模式。
app:layout_collapseParallaxMultiplier="0.2"
③app:layout_collapseMode = “none”默认值:CollapsingBarLayout折叠多少距离,ToolBar也移动多少距离。

参考博客:
细说 AppbarLayout,如何理解可折叠 Toolbar 的定制

