CoordinatorLayout、AppBarLayout、TableLayout、CollapsingToolbarLayout、NestedScrollView的使用

一、TableLayout：效果圖如下所示：

1.使用：

1)：添加依賴庫，該控件被谷歌官方納入了desigh庫中

2)：在xml布局檔案中引用：

<android.support.design.widget.TabLayout
       android:id="@+id/tl_tablayout"
       android:layout_width="match_parent"
       android:layout_height="?attr/actionBarSize"
       android:layout_gravity="bottom"
       android:background="#ffffff"
       android:fillViewport="false"
       app:layout_scrollFlags="scroll"
       app:tabIndicatorHeight="2dp"
       app:tabIndicatorColor="#0835f8"
       app:tabTextColor="#ced0d3"
       app:tabSelectedTextColor="#0835f8"/>
           

常用的幾個屬性：

a、app:tabIndicatorColor：Tab訓示器下标的顔色

b、app:tabTextColor：Tab訓示器預設顯示的字型顔色

c、app:tabSelectedTextColor：Tab訓示器選中時顯示的字型顔色（添加該屬性後預設會執行點選後的動畫效果）

TabLayout常用的方法：

a、setTabMode：Tab訓示器顯示的模式，Android官方提供了兩種模式：一種是填充模式，也是預設模式，表示TabLayout不可滾動，其寬度有一個最大值，所有的Tab都擠在這個寬度中，如下圖所示：

該模式的常量值為MODE_FIXED = 1，我們可以通過setTabMode方法設定其可滾動模式，mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); 則系統會自動适配其寬度，并且可滾動，效果如下：

b、addTab()：添加Tab頁籤

c、newTab()：建立一個新的Tab，因為Tab是TabLayout的一個内部靜态類，是以我們無法從外部直接建立對象，但是其構造方法在包内可通路，是以Tab類提供了一個newTab()方法擷取Tab執行個體

d、getTabAt(int index) 得到指定位置的頁籤

Tab常用的方法：

a、setIcon()：設定圖檔标題

b、setText()：設定文本标題

c、setCustomView()：設定自定義View标題

2.TabLayout和ViewPager搭配使用：

a、當TabLayout中的Tab中的樣式一樣時（全部是Text ），可以在ViewPager的擴充卡中重寫 getPageTitle(int position)方法去設定Tab頁籤的标題，在Activity中調用 mTabLayout.setupWithViewPager(mViewPager)方法與ViewPager進行相結合

b、當TabLayout中的Tab中的樣式不一樣時（有Icon、Text/CustomView），則調用newTab().setIcon/setText()/setCustomView()方法進行設定Tab頁籤标題，并且不能調用setupWithPager()方法與ViewPager進行結合，因為有圖檔時，調用該方法會覆寫圖檔的顯示，通過如下方法：分别

mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));
        mTabLayout.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(mViewPager));
           

則圖檔會正常顯示，不會被覆寫

二、CoordinatorLayout：是一個容器，繼承自ViewGroup，這個控件的目的就是協調它裡面View的行為；

三、AppBarLayout：繼承自LinearLayout線性布局，預設的AppBarLayout是垂直方向的，作用是管理它裡面的控件在内容滾動時的行為。

使用：首先定義AppBarLayout與滾動視圖之間的聯系：1)、在任意支援嵌套滾動的View(如：RecyclerView、scrollView、NestedScrollView等)中設定app:layout_behavior屬性，且系統自帶了@string/appbar_scrolling_view_behavior這個行為； 2)、在AppBarLayout裡面的View中設定 app:layout_scrollFlags 屬性，注意：app:layout_scrollFlags 至少使用 scroll 這個flag，這樣這個view才會滾動出螢幕。在可滾動的View的滾動事件發生時，AppBarLayout中設定有這個屬性的View就會被觸發(如果都沒有設定這個屬性，則都不會被觸發，也就是不會随着滾動)，如下代碼所示：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:fitsSystemWindows="true"
    >

    <android.support.design.widget.AppBarLayout
        android:id="@+id/layout_app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <android.support.v7.widget.Toolbar
            android:id="@+id/tb_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:layout_scrollFlags="scroll|enterAlways"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            />
        <android.support.design.widget.TabLayout
            android:id="@+id/tl_tablayout"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="bottom"
            android:background="#ffffff"
            android:fillViewport="false"
            app:tabIndicatorHeight="2dp"
            app:tabIndicatorColor="#0835f8"
            app:tabTextColor="#ced0d3"
            app:tabSelectedTextColor="#0835f8"
            />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none"
        android:fillViewport="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >
        <android.support.v4.view.ViewPager
            android:id="@+id/vp_content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
           

當CoordinatorLayout發現 NestedScrollView 中定義了 app:layout_behavior 這個屬性，它會搜尋自己所包含的其他view，看看是否有view與這個behavior相關聯。AppBarLayout.ScrollingViewBehavior描述了 NestedScrollView 與AppBarLayout之間的依賴關系。NestedScrollView 的任意滾動事件都将觸發AppBarLayout或者AppBarLayout裡面view的改變。

四、CollapsingToolbarLayout： FrameLayout幀布局的子類，實作ToolBar折疊效果。如果想制造toolbar的折疊效果，我們必須把Toolbar放在CollapsingToolbarLayout中；主要有以下屬性：

app:collapsedTitleTextAppearance="@style/ToolBarTitleText"

：設定折疊後字型屬性

app:expandedTitleTextAppearance="@style/transparentText"

：設定展開後字型屬性

app:contentScrim

：當折疊完畢，ToolBar 固定在頂端時，設定ToolBar的背景顔色

app:layout_collapseMode="pin"

：子視圖的折疊模式，且該屬性必須在CoolpasingToolbarLayout裡面的View中設定。有兩種：1、“pin”：固定模式，

在折疊的時候最後固定在頂端； 2、“parallax”：視差模式，在折疊的時候會有個視差折疊的效果。

mCollapsing.setTitle

：設定ToolBar的标題，使用該控件，則ToolBar的标題由該控件設定。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:fitsSystemWindows="true"
    >

    <android.support.design.widget.AppBarLayout
        android:id="@+id/layout_app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/layout_collapse_tb"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:fitsSystemWindows="true"
            app:expandedTitleMarginEnd="48dp"
            app:expandedTitleMarginStart="48dp"
            app:collapsedTitleTextAppearance="@style/ToolBarTitleText"
            app:expandedTitleTextAppearance="@style/transparentText"
            app:contentScrim="#46a8ba"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
                <TextView
                    android:id="@+id/tv_setting"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:layout_centerVertical="true"
                    android:background="@drawable/bg_setting"
                    android:textColor="#ffffff"
                    android:paddingBottom="3dp"
                    android:paddingTop="3dp"
                    android:paddingLeft="10dp"
                    android:paddingRight="10dp"
                    android:text="設定"
                    />
        <android.support.v7.widget.Toolbar
            android:id="@+id/tb_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            />
        </android.support.design.widget.CollapsingToolbarLayout>

        <android.support.design.widget.TabLayout
            android:id="@+id/tl_tablayout"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="bottom"
            android:background="#ffffff"
            android:fillViewport="false"
            app:tabIndicatorHeight="2dp"
            app:tabIndicatorColor="#0835f8"
            app:tabTextColor="#ced0d3"
            app:tabSelectedTextColor="#0835f8"
            />
    </android.support.design.widget.AppBarLayout>
    </android.support.design.widget.CoordinatorLayout>