TabLayout+Fragment+ViewPager实现Tab页面效果

日常开发小功能时常会用到tab页的切换用法。每次都去翻看之前写的代码，再从业务中剥离出来，太麻烦了。遂将自己之前常用的方式抽象出来，便于下次直接复制取用。

基本目录结构

─main
  ├─java
  │  └─com
  │      └─example
  │          └─scoremanager
  │              │  MainActivity.java
  │              │  Fragment1.java
  │              │  Fragment2.java
  │
  └─res
      ├─layout
      │      activity_main.xml
      │      layout_main.xml
      │      layout_title_tab.xml
      │      layout_fragment_1.xml
      │      layout_fragment_2.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

要实现tab页效果需要如上基本的目录结构，MainActivity就是整体的载体，两个fragment寄宿在其上。

layout目录具体关系和java目录一致，多了一个layout_titile_tab.xml是为了对tab字体做一些定制化处理使用。

核心代码

首先上主页样式，很简单，就是TabLayout与ViewPager的一个拼接。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivityNew">
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tl_tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vp_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

两个fragment没啥新鲜的就是想做啥功能就画啥好了，不赘述。贴一下常用的Tab标题样式。

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tab_item"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:textSize="16dp" />
1
2
3
4
5
6
7

然后是TabLayout如何与ViewPager联动起来。先贴代码。

public class MainActivity extends AppCompatActivity {
    private List<Fragment> fragments = new ArrayList<>();
    private List<String> titles = new ArrayList<>();

    private ViewPager viewPager;
    private TabLayout tabLayout;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_main);
        DBManager.getInstance().init(this);

        tabLayout = findViewById(R.id.tl_tab);
        viewPager = findViewById(R.id.vp_content);

        titles.add("标题1");
        titles.add("标题2");
        fragments.add(new Fragment1());
        fragments.add(new Fragment2());

        viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager(),
                FragmentStatePagerAdapter.BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {
            @NonNull
            @Override
            public Fragment getItem(int position) {
                return fragments.get(position);
            }

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

            @Nullable
            @Override
            public CharSequence getPageTitle(int position) {
                return titles.get(position);
            }
        });

        for (int i = 0; i < tabLayout.getTabCount(); i++) {
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            if (tab != null) {
                tab.setCustomView(getTabView(i));
            }
        }
        tabLayout.setupWithViewPager(viewPager);
    }

    private View getTabView(int currentPosition) {
        View view = LayoutInflater.from(this).inflate(R.layout.layout_title_tab, null);
        TextView textView = view.findViewById(R.id.tab_item);
        textView.setText(titles.get(currentPosition));
        return textView;
    }
}
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

简单描述一下原理，用Fragment填充FragmentPagerAdapter，然后将其绑定给ViewPager持有，从而达到将Fragment和ViewPage绑定起来；然后在将ViewPager与TabLayout绑定，从而达到切换页面时顶部Tab标题也会跟着变。

私有方法getTabView就是为了Tab切换时做定制化处理准备的，没特殊需要不用更改。

遇到的坑

TabLayout对于Android版本有要求，我踩过的是5.1.1的手机不行。这块可以minSdk控制一下。

TODO

现在ViewPager2也有稳定版的包了，有空可以在学习扩展一下这块的内容。