CoorDinatorLayout+AppBarLayout+TabLayout实现界面

在上一个项目的开发中，遇到了一个比较复杂的界面。之后研究之后采用5.0之后的design包下的控件实现。
首先上效果图。

在这个简单的demo中，我把这个View分为两个部分。
1、常驻部分。定义在Activity中
2、内容显示部分。定义在Activity的Fragment中。
常驻部分的布局非常简单，就不再赘述。重要的是内容显示部分的实现。

在内容显示部分就要用到design包下的内容了，以下是内容部分的布局

.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">

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

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

            "match_parent"
                android:layout_height="100dp"
                android:background="@android:color/holo_orange_dark"
                android:text="我是头部需要隐藏View"
                android:textColor="@android:color/black"
                android:textSize="20sp" />
        

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

    .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" />

.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 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);
    }
}