CoordinatorLayout、Tablayout、Toolbar简单组合使用

比较偷懒的开始

开始

向上滑动后将Toolbar隐藏收缩的效果：

直接使用Android stuido创建Activity时，使用自带的自带的Basic Activity模板。这个模板直接创建的根布局就是CoordinatorLayout，连同AppBarLayout、Toolbar直接创建好了。
想要使用Tablayout，直接在AppBarLayout中创建一个TabLayout就可以了。AppBarLayout是使Toolbar和Tablayout能够响应滚动。

.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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
  >

    .support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        .support.v7.widget.Toolbar
            android:id="@+id/toolbar_student_activity"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:title="班级学生"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:layout_scrollFlags="scroll|enterAlways"
            />

            .support.design.widget.TabLayout
                android:id="@+id/tablayout_student_activity"
                android:layout_width="match_parent"
                app:tabMode="fixed"
                app:tabGravity="fill"
                app:tabMaxWidth="250dp"
                app:tabMinWidth="250dp"
                app:tabSelectedTextColor="@color/colorAccent"
                app:tabTextColor="@android:color/white"
                android:layout_height="?actionBarSize">

            .support.design.widget.TabLayout>
    .support.design.widget.AppBarLayout>

    .support.v4.view.ViewPager
         app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:id="@+id/vp_student_activity"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    .support.v4.view.ViewPager>
.support.design.widget.CoordinatorLayout>

注意：
在Toolbar中有这样行app:title="班级学生"这是为Toolbar设置title的。这句如果不加的话，在Activity中，使用toolbar.setTiltle(“”)这个方法就会无效。

在Toolbar中，app:layout_scrollFlags="scroll|enterAlways"这行代码很重要。这是实现滑动屏幕时，Toolbar能够隐藏的关键。
layout_scrollFlags有5个值：

• scroll —所有想滚动隐藏的View都需要设置。将View滚出屏幕，也就是达到隐藏的效果
• enterAlways —只要向下滚动就会出现隐藏的View
• enterAlwaysCollapsed—这个属性和enterAlways的差别就在于，只有向下滚动不动后，才会出现隐藏的View
• exitUntilCollapsed–这个属性只有在设置minHeight时会生效，会保留一个最小的高度，同时，当向下滚动屏幕时，只有屏幕内可滚动的View都展示出来后，隐藏的View才会由设置最小的高度恢复
• snap—自动滑动动画, 定义CollapsingToolbarLayout的滑动属性.

啊，我擦，说的我自己都看不明白了，这几个属性，试试就知道了。

在Tablayout中，app:tabGravity="fill" app:tabMode="fixed"tabMode有两个属性。

• scrollable —可滚动，当tab超过屏幕时，可以滚动
• fixed —固定的

ViewPager中有一行很重要的代码：
app:layout_behavior="@string/appbar_scrolling_view_behavior"

app:layout_behavior这个属性可以为CoordinatorLayout子View设置。这里是个坑。目前了解不多。就知道这句可以使ViewPager设置match_parent不会遮盖布局。使ViewPager位于Tablayout下面。Behavior有很高的扩展性。需要以后继续了解。

注意，为了使Toolbar可以被隐藏，ViewPager的Fragment中必须要有可以滚动的View。ListView和ScrollView是无效的。要使用v4包下的NestedScrollView或者RecyclerView才会有效。

Actiivty的代码

public class TeacherStudentActivity extends BaseActivity {
    private Unbinder unbinder;
    @BindView(R.id.tablayout_student_activity)
    TabLayout tabLayout;
    @BindView(R.id.vp_student_activity)
    ViewPager vp;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_teacher_student);
        unbinder = ButterKnife.bind(this);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar_student_activity);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        getDataBean(toolbar);

    }

    private void getDataBean(Toolbar toolbar) {
        Intent i = getIntent();
        if (i != null){
            Bundle b = i.getExtras();
            ClassBean.DataBean dataBean = (ClassBean.DataBean) b.getSerializable(Text.CLASS_BEAN_NAME);
            if (dataBean != null){
                toolbar.setTitle(dataBean.getName());
                init();
            }
        }
    }

    private void init() {
        TeacherStudentVPAdapter vp_adapter = new TeacherStudentVPAdapter(getSupportFragmentManager());
        List list = new ArrayList<>();
        list.add(new TSVPFragment_Student());
        list.add(new TSVPFragment_Award());
        list.add(new TSVPFragment_Lock());
        list.add(new TSVPFragment_Group());
        vp_adapter.setFragmentData(list);
        vp.setAdapter(vp_adapter);

        tabLayout.setupWithViewPager(vp);
        tabLayout.getTabAt(0).setText(Text.TEACHER_STUDENT_TAB_0);
        tabLayout.getTabAt(1).setText(Text.TEACHER_STUDENT_TAB_1);
        tabLayout.getTabAt(2).setText(Text.TEACHER_STUDENT_TAB_2);
        tabLayout.getTabAt(3).setText(Text.TEACHER_STUDENT_TAB_3);


    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        unbinder.unbind();
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == android.R.id.home){
            onBackPressed();
            return  true;
        }
        return super.onOptionsItemSelected(item);
    }
}

忽视我起的名字以及代码的混乱。
在ViewPager创建好之后，tabLayout.setupWithViewPager(vp);将Tablayout和ViewPager联系起来。
接下来的addTab，我没有使用网上经常看到的下面的这种方式：
tabLayout.addTab(tabLayout.newTab().setText(""));
因为这种方式以前遇到过一次bug，可能会造成设置的tab文字不显示。
我使用的是tabLayout.getTabAt(0).setText("")因为此时已经和ViewPager绑定了，已经可以拿到tab的数量了。

最后

CoordinatorLayout和CollapsingToolbarLayout是material design中很重要的两个控件，尤其是CoordinatorLayout。包含的东西还很多，阅读代码能力提升后，要记得把源码看看。