在前两篇文章的学习中建立的项目之上，这里会继续学习TabLayout的使用
TabLayout与ViewPager一起使用
1.将<android.support.design.widget.TabLayout/>标签和之前的<android.support.v4.view.ViewPager/>标签放在<LinearLayout/>中，把<android.support.v4.view.ViewPager/>中的app:layout_behavior="@string/appbar_scrolling_view_behavior"属性放到其直接父控件中即这里的<LinearLayout/>中
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
app:tabBackground="@color/colorPrimary"
app:tabIndicatorColor="@color/colorAccent"
app:tabIndicatorHeight="2dp"
app:tabMode="fixed"
app:tabGravity="fill"
app:tabSelectedTextColor="@color/colorAccent"
app:tabTextColor="@color/colorPrimaryDark" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
app:tabBackground="@color/colorPrimary" //设置tab的背景颜色
app:tabIndicatorColor="@color/colorAccent" //设置tab指示线的颜色
app:tabIndicatorHeight="0dp" //设置tab指示线的高度
app:tabMode="fixed" //设置tab指示线的类型，fixed 固定的显示tab，scrollable 自适应超出屏幕滚动显示
app:tabGravity="fill" //设置tab的位置 ,有两个值可选， fill 是tab占满屏幕X方向，center 是tab居中显示
app:tabSelectedTextColor="@color/colorAccent" //设置选中tab的标题文字颜色
app:tabTextColor="@color/colorPrimaryDark" //设置未选中tab标题文字颜色
2.在Activity中通过tabLayout.setupWithViewPager(viewPager);将viewPager与tabLayout关联起来
在FragmentPagerAdapter中重写下面的方法获取设置tab的标题
@Override
public CharSequence getPageTitle(int position) {
return "Main " + position;
}
完成后的效果如图:
当tab的数量较多时，设置TabLayout控件的app:tabMode="scrollable "//设置tab指示线的类型，fixed 平分占满屏幕，scrollable 自适应超出屏幕滚动显示
显示效果如图所示：
为了实现更多的分级效果Activity中的Fragment里面可以继续用ViewPager+Fragment
新建一个类TabLayoutFragment，布局文件为frag_tab_layout.xm：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="@color/colorAccent"
app:tabIndicatorColor="#55fe33"
app:tabIndicatorHeight="2dp"
app:tabMode="scrollable"
app:tabSelectedTextColor="#55fe33"
app:tabTextColor="#ffffff" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
在TabLayoutFragment中实现为：
public class TabLayoutFragment extends Fragment{
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.frag_tab_layout,null);
}
@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
ViewPager viewPager = (ViewPager) view.findViewById(R.id.viewpager);
TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tab_layout);
viewPager.setAdapter(new FragmentPagerAdapter(getChildFragmentManager()) {
@Override
public Fragment getItem(int position) {
return new FruitFragment();
}
@Override
public int getCount() {
return 6;
}
@Override
public CharSequence getPageTitle(int position) {
return "sub " + position;
}
});
tabLayout.setupWithViewPager(viewPager);
}
}
这里ViewPager中还是放的FruitFragment类
修改MainActivity中的代码
/**
* add Fragment
*/
private void addFragment() {
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
if (position % 2 == 0) {
return new FruitFragment();
} else {
return new TabLayoutFragment();
}
}
@Override
public int getCount() {
return 3;
}
@Override
public CharSequence getPageTitle(int position) {
return "Main " + position;
}
});
tabLayout.setupWithViewPager(viewPager);
}
在poition 能被2整除时返回FruitFragment,不能被2整除时就返回TabLayoutFragment，效果如图所示：
3.tabLayout 还可以通过addTab添加Tab按钮
tabLayout.addTab(tabLayout.newTab().setText("test"));
通过addOnTabSelectedListener监听tab选择监听
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
//这里可以根据tab的选择更新内容
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
TabLayout的使用很简单，能和ViewPager配合使用或单独使用，非常的方便。下一篇中我们将会学习到CollapsingToolbar和NestedScrollView的使用。
