CoorDinatorLayout+AppBarLayout+TabLayout實現界面

在上一個項目的開發中，遇到了一個比較複雜的界面。之後研究之後採用5.0之後的design包下的控件實現。
首先上效果圖。

在這個簡單的demo中，我把這個View分爲兩個部分。
1、常駐部分。定義在Activity中
2、內容顯示部分。定義在Activity的Fragment中。
常駐部分的佈局非常簡單，就不再贅述。重要的是內容顯示部分的實現。

在內容顯示部分就要用到design包下的內容了，以下是內容部分的佈局

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_scrollFlags="scroll">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:background="@android:color/holo_orange_dark"
                android:text="我是頭部需要隱藏View"
                android:textColor="@android:color/black"
                android:textSize="20sp" />
        </LinearLayout>

        <android.support.design.widget.TabLayout
            android:id="@+id/tab"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

在佈局中使用了三個新的內容。
1、CoordinatorLayout
2、AppBarLayout
3、TabLayout

CoorDinatorLayout：官方文檔上是這樣描述：CoordinatorLayout is a super-powered FrameLayout，說明它是一個加強版的FrameLayout，這樣他就和Fragment有共同之處。在CoorDinatorLayout中共有一個特殊的內部類CoordinatorLayout.Behavior關於該類，官方文檔上大致是這樣描述的：（The Behavior will have the opportunity to parse specially defined layout parameters. These parameters will appear on the child view tag.）個人理解（英語12級）就相當該類實現了CoorDinatorLayout中多個子View之間滑動、拖拽等時間的交互，將CoorDinatorLayout子View的滑動等事件的執行的狀態和結果通知給其他的子View。這個類可以自定義，並實現一些特殊的效果，這也是有待研究的地方，這個Demo中用到的Behavior都是用系統定義好的。
app:layout_behavior="@string/appbar_scrolling_view_behavior"
注：此屬性只能直接或者間接的使用在RecyclerView和NestedScrollView上纔有效果（也許是官方還沒有完善）
單獨使用CoorDinatorLayout並沒有感到有什麼加強的地方（可能是自己沒有深入的學習它的原因），要實現開頭時的效果，就必須將CoordinationLayout和AppBarLayout結合用。
AppBarLayout官方文檔上描述爲：AppBarLayout十一個垂直（vertical）佈局的一個LinearLayout，它的子View可以定義一個特殊的屬性scrollFlags，該屬性有4中值，同一View可以定義多個該屬性：
app:layout_scrollFlags="scroll|exitUntilCollapsed"
AppBarLayout必須在CoorDinatorLayout中作爲 direct child使用，不然會沒有效果。
具體屬性和翻譯（英語12級）如下：
scroll: this flag should be set for all views that want to scroll off the screen - for views that do not use this flag, they’ll remain pinned to the top of the screen
這個flag是給那些滑動到頂部時需要滾出屏幕的View設置的，沒有設置這個flag的view滑動到頂部時將會被固定在屏幕的頂端。
enterAlways: this flag ensures that any downward scroll will cause this view to become visible, enabling the ‘quick return’ pattern
向下滑動時，設置這個屬性的View會變爲可見的。這個flag是給那些需要“快速返回”的view設置的，
enterAlwaysCollapsed: When your view has declared a minHeight and you use this flag, your View will only enter at its minimum height (i.e., ‘collapsed’), only re-expanding to its full height when the scrolling view has reached it’s top.
當view設置了這個屬性時，滑動顯示只會顯示他的最小高度。（需要結合Scroll使用）

exitUntilCollapsed: this flag causes the view to scroll off until it is ‘collapsed’ (its minHeight) before exiting
當view設置了這個屬性時，滑動隱藏只會隱藏他的最小高度。（需要結合Scroll使用）

TabLayout TabLayout provides a horizontal layout to display tabs 是一個橫向的標題顯示欄。
重要方法：

 tab.addTab(tab.newTab().setText("Tab1"));//添加一個Tab
 tab.setTabMode(TabLayout.MODE_SCROLLABLE);//設置Tab可以滾動
 tab.setTabMode(TabLayout.MODE_FIXED);//設置Tab佈滿TabLayout(默認)
 tab.setSelectedTabIndicatorColor(0xfff);//指示器顏色
 tab.setSelectedTabIndicatorHeight(10);//指示器高度
 viewpager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tab));//讓TabLayout成爲ViewPager的指示器

綜合以上的3個新控件就可以實現開頭的效果了。
下面是內容顯示部分Fragment的代碼

public class MainFragment extends Fragment {
    @Bind(R.id.tab)
    TabLayout tab;
    @Bind(R.id.viewpager)
    ViewPager viewpager;

    private List<Fragment> fragments;

    public static MainFragment newInstance() {
        MainFragment fragment = new MainFragment();
        return fragment;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_base, container, false);
        ButterKnife.bind(this, view);
        return view;
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        initView();
    }


    private void initView() {
        fragments = new ArrayList<>();
        fragments.add(AFragment.newInstance());
        fragments.add(BFragment.newInstance());
        fragments.add(CFragment.newInstance());
        fragments.add(AFragment.newInstance());
        fragments.add(BFragment.newInstance());
        fragments.add(CFragment.newInstance());
        tab.addTab(tab.newTab().setText("Tab1"));
        tab.addTab(tab.newTab().setText("Tab2"));
        tab.addTab(tab.newTab().setText("Tab3"));
        tab.addTab(tab.newTab().setText("Tab4"));
        tab.addTab(tab.newTab().setText("Tab5"));
        tab.addTab(tab.newTab().setText("Tab6"));
        tab.setTabMode(TabLayout.MODE_SCROLLABLE);

        //tab.setSelectedTabIndicatorColor(0xfff);
        //tab.setSelectedTabIndicatorHeight(10);

        viewpager.setAdapter(new MyFragmentPagerAdapter(getChildFragmentManager(), fragments));

        viewpager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tab));

    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        ButterKnife.unbind(this);
    }
}