TabLayout联合Fragment使用

先上效果图

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>
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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);
    }
}
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

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

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