前言
CoordinatorLayout是Material Design的重要組件，協(xié)調(diào)其它組件實(shí)現(xiàn)聯(lián)動，在實(shí)際使用過程中CoordinatorLayout通過協(xié)調(diào)調(diào)度子布局的形式實(shí)現(xiàn)觸摸動畫效果；AppBarLayout繼承LinearLayout，布局為垂直方法，所以你可以將其當(dāng)做LinearLayout使用；CollapsingToolbarLayout的作用是提供了一個可以折疊ToolBar。三者的結(jié)合讓界面更加的美觀和簡潔。
效果~
Part 1、CoordinatorLayout的使用
在使用FloatingActionButton+SnackBar的時候經(jīng)常遇到SnackBar覆蓋掉FloatingActionButton的情況，如下
當(dāng)加上CoordinatorLayout之后
通過查看SnackBar的源碼findSuitableParent()方法
PRivate static ViewGroup findSuitableParent(View view) { ViewGroup fallback = null; do { if (view instanceof CoordinatorLayout) { // We've found a CoordinatorLayout, use it return (ViewGroup) view; } else if (view instanceof FrameLayout) { if (view.getId() == android.R.id.content) { // If we've hit the decor content view, then we didn't find a CoL in the // hierarchy, so use it. return (ViewGroup) view; } else { // It's not the content view but we'll use it as our fallback fallback = (ViewGroup) view; } } if (view != null) { // Else, we will loop and crawl up the view hierarchy and try to find a parent final ViewParent parent = view.getParent(); view = parent instanceof View ? (View) parent : null; } } while (view != null); // If we reach here then we didn't find a CoL or a suitable content view so we'll fallback return fallback; }可知，當(dāng)你使用了CoordinatorLayout，此方法循環(huán)調(diào)用view.getParent()當(dāng)檢測到CoordinatorLayout之后將view返回并將SnackBar添加到該View中，這也是為什么SnackBar不會覆蓋FloatingActionButton的原因。SnackBar源碼分析：http://blog.csdn.net/weiwozhiyi/article/details/54600150
CoordinatorLayout還具有監(jiān)聽滑動控件的滑動通過Behavior反饋到其他子控件并執(zhí)行一些動畫的功能，這里所說的滑動控件包括RecyclerView、NestScrollView和ViewPager，ListView和ScrollView不可以。
Part 2、AppBarLayout的使用
布局代碼
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerview" android:layout_width="match_parent" android:layout_height="match_parent" android:clipChildren="false" android:clipToPadding="false" app:layout_behavior="@string/appbar_scrolling_view_behavior"/> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways"/> </android.support.design.widget.AppBarLayout> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:layout_margin="16dp" android:clickable="true" android:src="@android:drawable/ic_dialog_email" app:elevation="10dp" app:fabSize="normal" app:layout_behavior=".FabBehavior" app:pressedTranslationZ="12dp" app:rippleColor="#ff0"/></android.support.design.widget.CoordinatorLayout>tips:1、 app:layout_behavior="@string/appbar_scrolling_view_behavior" ： 為RecyclerView設(shè)置Behavior
2、 app:layout_scrollFlags="scroll|enterAlways" ： 將Toolbar與設(shè)置的Behavior進(jìn)行綁定
scroll: 里面所有的子控件想要當(dāng)滑出屏幕的時候view都必須設(shè)置這個flag，沒有設(shè)置flag的view將被固定在屏幕頂部。 enterAlways ： 不管滑動到了什么位置只要向下滑動則顯示在頂部 enterAlwaysCollapsed：當(dāng)你的視圖設(shè)置了minHeight屬性的時候，那么視圖只能以最小高度進(jìn)入，只有當(dāng)滾動視圖到達(dá)頂部時才擴(kuò)大到完整高度。 exitUntilCollapsed：滾動退出屏幕，最后折疊在頂端。 snap：
效果~
當(dāng)然你也可以使用android.support.v4.widget.NestedScrollView
<android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center_horizontal" android:orientation="vertical"> ...... <android.support.v7.widget.CardView android:layout_width="300dp" android:layout_height="100dp" android:layout_margin="16dp" app:cardCornerRadius="9dp" app:cardElevation="10dp" app:contentPadding="5dp"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/pic8"/> </android.support.v7.widget.CardView> </LinearLayout> </android.support.v4.widget.NestedScrollView>效果~
Part 3、TabLayout+ViewPager的使用
布局代碼
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_tab_layout" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.andly.administrator.andly_md10.TabLayoutActivity"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_scrollFlags="scroll|enterAlways" app:logo="@android:drawable/ic_dialog_email" app:title="夢幻"/> <android.support.design.widget.TabLayout android:id="@+id/tablayout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabBackground="@color/tabBackground" app:tabGravity="fill" app:tabIndicatorColor="@color/colorAccent" app:tabMode="scrollable" app:tabSelectedTextColor="@color/colorAccent"/> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/vp" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"/></android.support.design.widget.CoordinatorLayout>tips:1、讓ToolBar進(jìn)行滑動隱藏需要設(shè)置app:layout_scrollFlags="scroll|enterAlways"，TabLayout滑動不隱藏則不需要設(shè)置
2、為ViewPager、NestedScrollView、RecyclerView出現(xiàn)滑動控件就要設(shè)置app:layout_behavior="@string/appbar_scrolling_view_behavior"
3、app:tabMode="scrollable" ： 可滾動的
效果~
Part 4、CollapsingToolbarLayout的使用
<android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="260dp"> <android.support.design.widget.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="match_parent" app:layout_scrollFlags="scroll|exitUntilCollapsed" app:title="夢幻世界" app:contentScrim="@color/colorPrimary" app:statusBarScrim="@color/colorPrimary"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@drawable/mm" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="1" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:layout_collapseMode="pin" app:layout_scrollFlags="scroll|enterAlways" app:logo="@android:drawable/ic_dialog_map"/> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout>tips:1、AppBarLayout設(shè)置固定的高度，并且要實(shí)現(xiàn)折疊效果必須比toolbar的高度要高
2、CollapsingToolbarLayout最好設(shè)置成match_parent
3、app:layout_collapseMode="parallax" ： parallax在折疊的時候會有折疊的視差效果，一般搭配layout_collapseParallaxMultiplier="0.5"視差的明顯成都；none沒有任何效果，網(wǎng)上滑動的時候會首先固定并推出去；pin固定模式，在折疊的時候最后固定在頂部
4、app:contentScrim="@color/colorPrimary_pink" ： 內(nèi)容部分的沉浸效果
5、app:statusBarScrim="@color/colorPrimary_pink" ： 和狀態(tài)欄的沉浸效果效果~
新聞熱點(diǎn)
疑難解答
