MaterialDesign之TabLayout使用方法

TabLayout使用

基本使用

1.基本布局

<!--选项卡-->
<android.support.design.widget.TabLayout
android:id="@+id/tab_detail_video"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:tabGravity="center"
app:tabIndicatorColor="@color/primary"
app:tabMode="scrollable"
app:tabSelectedTextColor="@color/primary"
app:tabTextColor="@color/fontlight"/>

<!--viewpager-->
<android.support.v4.view.ViewPager
android:id="@+id/vp_detail_video"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>

属性说明

app:tabIndicatorColor="@color/primary"

设置指示器的颜色

app:tabSelectedTextColor="@color/primary"

设置被选中Tab的文字颜色

app:tabTextColor="@color/fontlight"

设置Tab文字颜色

app:tabGravity="center"

设置Tab的Gravity.有center(居中)和fill(填满)两种效果.

app:tabMode="scrollable"

布局中Tab的行为模式有两种值：fixed和scrollable

fixed:固定tabs，并同时显示所有的tabs

scrollable：可滚动tabs，显示一部分tabs，在这个模式下能包含长标签和大量的tabs，最好用于用户不需要直接比较tabs

注意，GRAVITY_FILL需要和MODE_FIXED一起使用才有效果

动态设置

//1.MODE_SCROLLABLE模式
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

//2.MODE_FIXED模式
tabLayout.setTabMode(TabLayout.MODE_FIXED);

2.适配器

public class VideoFrgAdapter extends FragmentPagerAdapter {

private List<Fragment> list_fragment;//fragment列表
private List<String> list_Title;//tab名的列表

public VideoFrgAdapter(FragmentManager fm, List<Fragment> list_fragment, List<String> list_Title) {
super(fm);
this.list_fragment = list_fragment;
this.list_Title = list_Title;
}

@Override
public Fragment getItem(int position) {
return list_fragment.get(position);
}

@Override
public int getCount() {
return list_Title.size();
}

//此方法用来显示tab上的名字
@Override
public CharSequence getPageTitle(int position) {

return list_Title.get(position % list_Title.size());
}
}

3.Activity或Fragment中调用

第一步:声明

private TabLayout tab_FindFragment_title;//定义TabLayout
private ViewPager vp_FindFragment_pager;//定义viewPager
private FragmentPagerAdapter fAdapter;//定义adapter

private List<Fragment> list_fragment;//定义要装fragment的列表
private List<String> list_title;//tab名称列表

private VideoInfoFragment videoInfoFragment;//视频信息fragment
private VideoCommentFragment videoCommentFragment;//视频评论fragment

第二步:在onCreate里调用initFragment()

/**
* 初始化碎片
*/
private void initFragment() {

tab_FindFragment_title = (TabLayout) findViewById(R.id.tab_detail_video);
vp_FindFragment_pager = (ViewPager) findViewById(R.id.vp_detail_video);

//初始化各fragment
videoInfoFragment = new VideoInfoFragment();
videoCommentFragment = new VideoCommentFragment();

//将fragment装进列表中
list_fragment = new ArrayList<>();
list_fragment.add(videoInfoFragment);
list_fragment.add(videoCommentFragment);

//将名称加载tab名字列表，正常情况下，我们应该在values/arrays.xml中进行定义然后调用
list_title = new ArrayList<>();
list_title.add("简介");
list_title.add("其他");

//设置TabLayout的模式
//tab_FindFragment_title.setTabMode(TabLayout.MODE_FIXED);

//为TabLayout添加tab名称
tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(0)));
tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(1)));

fAdapter = new VideoFrgAdapter(getSupportFragmentManager(), list_fragment, list_title);

//viewpager加载adapter
vp_FindFragment_pager.setAdapter(fAdapter);

//TabLayout加载viewpager
tab_FindFragment_title.setupWithViewPager(vp_FindFragment_pager);
}

4.其他

让Tab在屏幕左侧的方法

1. 给TabLayout外部添加一个布局,宽度撑满屏幕吗match_parent

2. TabLayout的宽度包括内容wrap_content

3. TabLayout的tabGravity属性设置为center

<!--添加了一个TabLayout的外侧布局,实现选项卡在屏幕左边,并且背景白色的样式-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white">

<!--选项卡-->
<android.support.design.widget.TabLayout
android:id="@+id/tab_detail_video"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:tabGravity="center"
app:tabIndicatorColor="@color/primary"
app:tabMode="scrollable"
app:tabSelectedTextColor="@color/primary"
app:tabTextColor="@color/fontlight"/>

</RelativeLayout>