[Android]CoordinatorLayout简介（一）C

简介

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地址：

coordinator demo