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>

属性说明

1. app:tabIndicatorColor="@color/primary" 设置指示器的颜色
2. app:tabSelectedTextColor="@color/primary" 设置被选中Tab的文字颜色
3. app:tabTextColor="@color/fontlight" 设置Tab文字颜色

4. app:tabGravity="center" 设置Tab的Gravity.有center(居中)和fill(填满)两种效果.

5. app:tabMode="scrollable"布局中Tab的行为模式有两种值：fixed和scrollable

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

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

1. 注意，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>