[Android]CoordinatorLayout簡介（一）CoordinatorLayout的簡單使用

參考資料

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才會滾動出屏幕，否則它將一直固定在頂部。
類型 說明
scroll 所有想滾動出屏幕的view都需要設(shè)置這個flag，沒有設(shè)置這個flag的View將會被固定在屏幕頂部。
enterAlways 當(dāng)滑動組件向下滾動時，標(biāo)題欄會直接往下滾動。
enterAlwaysCollapsed 當(dāng)你的視圖已經(jīng)設(shè)置minHeight屬性又使用此標(biāo)志時，你的視圖只能以最小高度進(jìn)入，只有當(dāng)滾動視圖到達(dá)頂部時才擴(kuò)大到完整高度。
exitUntilCollapsed 當(dāng)標(biāo)題欄向上逐漸“消逝”時，會一直往上滑動，直到剩下的的高度達(dá)到它的最小高度后，再響應(yīng)滑動組件的內(nèi)部滑動事件
子布局的折疊模式
  • app:layout_collapseMode：子布局折疊模式
類型 說明
pin 固定模式，在折疊的時候最后固定在頂端
parallax 視差模式，在折疊的時候會有個視差折疊的效果
  • 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才會滾動出屏幕，否則它將一直固定在頂部。
類型 說明
scroll 所有想滾動出屏幕的view都需要設(shè)置這個flag，沒有設(shè)置這個flag的View將會被固定在屏幕頂部。
enterAlways 當(dāng)滑動組件向下滾動時，標(biāo)題欄會直接往下滾動。
enterAlwaysCollapsed 當(dāng)你的視圖已經(jīng)設(shè)置minHeight屬性又使用此標(biāo)志時，你的視圖只能以最小高度進(jìn)入，只有當(dāng)滾動視圖到達(dá)頂部時才擴(kuò)大到完整高度。
exitUntilCollapsed 當(dāng)標(biāo)題欄向上逐漸“消逝”時，會一直往上滑動，直到剩下的的高度達(dá)到它的最小高度后，再響應(yīng)滑動組件的內(nèi)部滑動事件
子布局的折疊模式
  • app:layout_collapseMode：子布局折疊模式
類型 說明
pin 固定模式，在折疊的時候最后固定在頂端
parallax 視差模式，在折疊的時候會有個視差折疊的效果
  • 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

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容