参考资料
CoordinatorLayout简介（一）CoordinatorLayout的简单使用
CoordinatorLayout简介（二）几种系统默认Behavior的使用
CoordinatorLayout简介（三）手写一个CoordinatorLayout怎么样？
简介
CoordinatorLayout是Android用来解决各种复杂的折叠悬浮效果，结合AppBarLayout、CollapsingToolBarLayout可以实现各种复杂炫酷的头部悬停效果
它的出现避免了我们实现类似效果时复杂的事件拦截判定和View操作，使得我们可以使用少量代码即可实现非常炫酷的悬停或折叠效果。
类继承关系：
image.png
AppBarLayout
image.png
AppBarLayout的一些重要属性：
- app:contentScrim：指定CollapsingToolbarLayout折叠后的Toolbar颜色
- app:collapsedTitleTextAppearance：折叠状态标题文字的样式
- app:expandedTitleTextAppearance：展开状态标题文字的样式
- app:layout_scrollFlags:此属性里面必须至少启用scroll这个flag，这样这个View才会滚动出屏幕，否则它将一直固定在顶部。
| 类型 | 说明 |
|---|---|
| scroll | 所有想滚动出屏幕的view都需要设置这个flag，没有设置这个flag的View将会被固定在屏幕顶部。 |
| enterAlways | 当滑动组件向下滚动时，标题栏会直接往下滚动。 |
| enterAlwaysCollapsed | 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。 |
| exitUntilCollapsed | 当标题栏向上逐渐“消逝”时，会一直往上滑动，直到剩下的的高度达到它的最小高度后，再响应滑动组件的内部滑动事件 |
子布局的折叠模式
- app:layout_collapseMode：子布局折叠模式
| 类型 | 说明 |
|---|---|
| pin | 固定模式，在折叠的时候最后固定在顶端 |
| parallax | 视差模式，在折叠的时候会有个视差折叠的效果 |
- app:layout_behavior：滑动的组件必须要设置此属性
注意：
如果想让View折叠，必须设置layout_scrollFlags，且必须要设置scroll，否则View不会折叠也不会滚动
View需要定义在AppBarLayout的子View中，否则不会触发
看一个具体的例子：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".activity.MainActivity">
<androidx.coordinatorlayout.widget.CoordinatorLayout
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">
<ImageView
android:layout_width="match_parent"
android:layout_height="230dp"
app:layout_scrollFlags="scroll|snap"
android:scaleType="fitXY"
android:src="@drawable/yellow_zero"/>
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="?attr/colorPrimary"
app:tabIndicatorColor="@color/teal_700"
app:tabIndicatorHeight="4dp"
app:tabSelectedTextColor="#000"
app:tabTextColor="#fff"/>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</RelativeLayout>
效果：
AppBarLayout[00_00_01--00_00_11].gif
CollapsingToolBarLayout
类结构：
image.png
CollapsingToolbarLayout的作用是提供了一个可以折叠的Toolbar，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)。
CollapsingToolBarLayout的一些重要属性：
- app:contentScrim：指定CollapsingToolbarLayout折叠后的Toolbar颜色
- app:collapsedTitleTextAppearance：折叠状态标题文字的样式
- app:expandedTitleTextAppearance：展开状态标题文字的样式
- app:layout_scrollFlags:此属性里面必须至少启用scroll这个flag，这样这个View才会滚动出屏幕，否则它将一直固定在顶部。
| 类型 | 说明 |
|---|---|
| scroll | 所有想滚动出屏幕的view都需要设置这个flag，没有设置这个flag的View将会被固定在屏幕顶部。 |
| enterAlways | 当滑动组件向下滚动时，标题栏会直接往下滚动。 |
| enterAlwaysCollapsed | 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。 |
| exitUntilCollapsed | 当标题栏向上逐渐“消逝”时，会一直往上滑动，直到剩下的的高度达到它的最小高度后，再响应滑动组件的内部滑动事件 |
子布局的折叠模式
- app:layout_collapseMode：子布局折叠模式
| 类型 | 说明 |
|---|---|
| pin | 固定模式，在折叠的时候最后固定在顶端 |
| parallax | 视差模式，在折叠的时候会有个视差折叠的效果 |
- app:layout_behavior：滑动的组件必须要设置此属性
一个案例：
XML文件：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".activity.MainActivity">
<androidx.coordinatorlayout.widget.CoordinatorLayout
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">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="@+id/collapsingToolBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="@color/design_default_color_secondary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="230dp"
app:layout_scrollFlags="scroll|snap"
android:scaleType="fitXY"
app:layout_collapseMode="parallax"
android:src="@drawable/yellow_zero"/>
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolBar"
android:layout_width="match_parent"
android:layout_height="40dp"
app:layout_collapseMode="pin">
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="?attr/colorPrimary"
app:tabIndicatorColor="@color/teal_700"
app:tabIndicatorHeight="4dp"
app:tabSelectedTextColor="#000"
app:tabTextColor="#fff"/>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</RelativeLayout>
Activity:
public class CollapsingActivity extends AppCompatActivity {
private TabLayout tabLayout;
private ViewPager viewPager;
private List<TestFragment> fragmentList;
private List<String> tabTitleList;
private CollapsingToolbarLayout collapsingToolbarLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_collapsing);
tabLayout = findViewById(R.id.tabLayout);
viewPager = findViewById(R.id.viewPager);
collapsingToolbarLayout = findViewById(R.id.collapsingToolBarLayout);
fragmentList = new ArrayList<>();
tabTitleList = new ArrayList<>();
for (int i = 0; i < 3; i++) {
fragmentList.add(new TestFragment());
tabTitleList.add(String.format("fragment%d", i));
}
viewPager.setAdapter(new MyAdapter(getSupportFragmentManager(), FragmentStatePagerAdapter.BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT));
tabLayout.setupWithViewPager(viewPager);
collapsingToolbarLayout.setTitle("yellow zero");
}
private class MyAdapter extends FragmentStatePagerAdapter {
public MyAdapter(@NonNull FragmentManager fm, int behavior) {
super(fm, behavior);
}
@NonNull
@Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return tabTitleList.get(position);
}
@Override
public int getCount() {
return fragmentList.size();
}
}
}
效果图：
CollapsingToolBarLayout[00_00_03--00_00_23].gif
demo地址：
