CoordinatorLayout、Tablayout、Toolbar简单组合使用

比较偷懒的开始

开始



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



直接使用Android stuido创建Activity时，使用自带的自带的Basic Activity模板。这个模板直接创建的根布局就是CoordinatorLayout，连同AppBarLayout、Toolbar直接创建好了。

想要使用Tablayout，直接在AppBarLayout中创建一个TabLayout就可以了。AppBarLayout是使Toolbar和Tablayout能够响应滚动。

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

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

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

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

</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>

<android.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">
</android.support.v4.view.ViewPager>
</android.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<Fragment> 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。包含的东西还很多，阅读代码能力提升后，要记得把源码看看。