TabLayout两种添加tab方式，结合ViewPager+Fragment实现常见界面视图

2019年5月26日 240次阅读

今天一哥们问我是否使用过TabLayout，他的项目中用到了TabLayout，他之前没有使用过，对用法和一些属性不太熟悉……为此，总结一些它的基本用法和常用属性。

先上效果图

《TabLayout两种添加tab方式，结合ViewPager+Fragment实现常见界面视图》 tablayout第1种添加tab方式.gif
《TabLayout两种添加tab方式，结合ViewPager+Fragment实现常见界面视图》 tablayout第2种添加tab方式.gif

activity_main.xml

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:tabGravity="center"
        app:tabIndicatorColor="@android:color/holo_red_light"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="@android:color/holo_red_light" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@android:color/white" />
</LinearLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private TabLayout tabLayout;
    private List<String> tabList = new ArrayList<>(); // 第一种添加方式时使用

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //TabLayout
        tabLayout = (TabLayout) findViewById(R.id.tabLayout);

//        for (int i = 0; i < 5; i++) {
//            tabList.add("add方式添加 " + i);
//        }

        //为TabLayout添加tab名称
//        tabLayout.addTab(tabLayout.newTab().setText(tabList.get(0)));
//        tabLayout.addTab(tabLayout.newTab().setText(tabList.get(1)));
//        tabLayout.addTab(tabLayout.newTab().setText(tabList.get(2)));
//        tabLayout.addTab(tabLayout.newTab().setText(tabList.get(3)));

        viewPager = (ViewPager) findViewById(R.id.viewPager);
        // 第一种方式添加tab时使用
//        MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(),
//                tabList,this);
        // 第二种方式添加tab时使用
        MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(),
                this);
        viewPager.setAdapter(adapter);

        // 一站式管理方式：setupWithViewPager()方法底部会调用FragmentPagerAdapter中的getPageTitle()方法.
        tabLayout.setupWithViewPager(viewPager);
    }
}

其他的都比较简单，没有什么可看的，再介绍一下常用的属性。

tabIndicatorColor：Tab下面的横线颜色
tabTextColor：tab默认的文字颜色
tabSelectedTextColor：选中的tab的字体颜色
tabMode：模式(Scrollable fixed). 其中的fixed模式需要和tabGravity属性配合使用，此时tabGravity属性值为fill.
tabIndicatorHeight：设置tab底部的横线高度.为0dp时,不显示.

关注微信公众号，获取demo，欢迎交流

《TabLayout两种添加tab方式，结合ViewPager+Fragment实现常见界面视图》 个人微信公众号.jpg

注：个人创建了专题——《Android开发资源经验分享》，欢迎投稿，共同学习。

点赞