參考資料

CoordinatorLayout簡介（一）CoordinatorLayout的簡單使用
CoordinatorLayout簡介（二）幾種系統(tǒng)默認(rèn)Behavior的使用
CoordinatorLayout簡介（三）手寫一個CoordinatorLayout怎么樣休吠？

簡介

CoordinatorLayout是Android用來解決各種復(fù)雜的折疊懸浮效果，結(jié)合AppBarLayout箕昭、CollapsingToolBarLayout可以實現(xiàn)各種復(fù)雜炫酷的頭部懸停效果

它的出現(xiàn)避免了我們實現(xiàn)類似效果時復(fù)雜的事件攔截判定和View操作捅厂，使得我們可以使用少量代碼即可實現(xiàn)非常炫酷的懸突罩埃或折疊效果。

類繼承關(guān)系：

image.png

AppBarLayout

image.png

AppBarLayout的一些重要屬性：

• app:contentScrim：指定CollapsingToolbarLayout折疊后的Toolbar顏色
• app:collapsedTitleTextAppearance：折疊狀態(tài)標(biāo)題文字的樣式
• app:expandedTitleTextAppearance：展開狀態(tài)標(biāo)題文字的樣式
• app:layout_scrollFlags:此屬性里面必須至少啟用scroll這個flag，這樣這個View才會滾動出屏幕昧谊，否則它將一直固定在頂部凤价。

子布局的折疊模式

• app:layout_collapseMode：子布局折疊模式

• app:layout_behavior：滑動的組件必須要設(shè)置此屬性

注意：
如果想讓View折疊寝志，必須設(shè)置layout_scrollFlags娇斑，且必須要設(shè)置scroll，否則View不會折疊也不會滾動

View需要定義在AppBarLayout的子View中材部，否則不會觸發(fā)

看一個具體的例子：

<?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

類結(jié)構(gòu)：

image.png

CollapsingToolbarLayout的作用是提供了一個可以折疊的Toolbar毫缆，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在響應(yīng)layout_behavior事件時作出相應(yīng)的scrollFlags滾動事件(移除屏幕或固定在屏幕頂端)乐导。

CollapsingToolBarLayout的一些重要屬性：

• app:contentScrim：指定CollapsingToolbarLayout折疊后的Toolbar顏色
• app:collapsedTitleTextAppearance：折疊狀態(tài)標(biāo)題文字的樣式
• app:expandedTitleTextAppearance：展開狀態(tài)標(biāo)題文字的樣式
• app:layout_scrollFlags:此屬性里面必須至少啟用scroll這個flag苦丁，這樣這個View才會滾動出屏幕，否則它將一直固定在頂部物臂。

子布局的折疊模式

• app:layout_collapseMode：子布局折疊模式

• app:layout_behavior：滑動的組件必須要設(shè)置此屬性

一個案例：

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