Android Tabs_小百科

viewPager 预加载所有 View 方式
viewPager2 懒加载方式

Android Studio 中提供的 TabHost 提示弃用了，官方推荐使用 TabLayout + ViewPager 来实现。

TabLayout 是一个用于显示标签的视图组件，通常用于标签导航。它可以展示多个标签，并提供点击切换标签的功能。

ViewPager 是一个容器视图，可以在其中展示多个子视图，并提供滑动或点击切换子视图。它通常用于实现分页效果，例如展示多个页面内容、图片轮播等。ViewPager 可以在水平方向或垂直方向滑动，具有平滑的滚动效果。

TabLayout 与 ViewPager 结合使用，可以在切换标签时自动切换 ViewPager 的子视图，实现标签导航和内容分页展示的功能。

viewPager 预加载所有 View 方式

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tablayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#21ECDA"
    app:layout_constraintTop_toBottomOf="@+id/info_card"
    app:tabIndicatorColor="#fff"
    app:tabMode="fixed"
    app:tabRippleColor="@null"
    app:tabTextColor="#000000" />
<androidx.viewpager.widget.ViewPager
    android:id="@+id/viewPager"
    app:layout_constraintTop_toBottomOf="@+id/tablayout"
    android:background="#f89"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

创建一个适配器

package com.xxx.xxx;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.viewpager.widget.PagerAdapter;
import java.util.List;
import javax.annotation.Nullable;
public class TabsPagerAdapter extends PagerAdapter {
    private List<View> listView;
    private List<String> listTab;
    public TabsPagerAdapter(List<View> listView, List<String> listTab) {
        this.listView = listView;
        this.listTab = listTab;
    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return listTab.get(position);
    @Override
    public int getCount() {
        return listView.size();
    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        container.addView(listView.get(position));
        return listView.get(position);
    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        container.removeView(listView.get(position));
    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
        return view == object;
在 activity 或 fragment 中
View page1,page2,page3;
void initView() {
    // 添加标签
    List<String> tab = new ArrayList<>();
    tab.add("作品");
    tab.add("喜欢");
    tab.add("收藏");
    // 添加布局
    LayoutInflater layoutInflater = getLayoutInflater();
    List<View> views = new ArrayList<>();
    page1 = layoutInflater.inflate(R.layout.user_home_tab_viewpager, null);
    page2 = layoutInflater.inflate(R.layout.user_home_tab_viewpager, null);
    page3 = layoutInflater.inflate(R.layout.user_home_tab_viewpager, null);
    views.add(page1);
    views.add(page2);
    views.add(page3);
    // 绑定布局到 viewPager
    TabsPagerAdapter adapter = new TabsPagerAdapter(views, tab);
    binding.viewPager.setAdapter(adapter);
    // 绑定 viewPager 到标签
    // 如果 xml 布局中将 TabLayout 嵌入到了 ViewPager 内，则这里就不用调用 setupWithViewPager() 进行绑定了
    binding.tablayout.setupWithViewPager(binding.viewPager);
viewpager.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">
    <TextView
        android:id="@+id/pagetext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="First View"
        android:textSize="50sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
void initData() {
    TextView tx1 = page1.findViewById(R.id.pagetext);
    tx1.setText("page 1");
    TextView tx2 = page2.findViewById(R.id.pagetext);
    tx2.setText("page 2");
    TextView tx3 = page3.findViewById(R.id.pagetext);
    tx3.setText("page 3");
viewPager2 懒加载方式
使用 Fragment 来布局容器，那么就可以通过 Fragment 的生命周期方法来实现懒加载。FragmentPagerAdapter 标识为已废弃，需要使用 viewpager2 来代替，ViewPager2 是对 ViewPager 的改进版本，提供了更好的性能、更灵活的适配器和更丰富的功能。

 implementation 'androidx.viewpager2:viewpager2:1.0.0'
布局
<com.google.android.material.tabs.TabLayout
    android:id="@+id/tablayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#21ECDA"
    app:layout_constraintTop_toBottomOf="@+id/info_card"
    app:tabIndicatorColor="#f90" <!-- 标签项下划线颜色 -->
    app:tabMode="fixed"
    app:tabRippleColor="@null"
    app:tabTextColor="#000000" />
<androidx.viewpager.widget.ViewPager
    android:id="@+id/viewPager"
    app:layout_constraintTop_toBottomOf="@+id/tablayout"
    android:background="#f89"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
<com.google.android.material.tabs.TabLayout
    android:id="@+id/tablayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toBottomOf="@+id/info_card"
    app:tabIndicatorColor="#f90" <!-- 标签项下划线颜色 -->
    app:tabMode="fixed"
    android:background="@color/white"
    app:tabRippleColor="@null"
    app:tabTextColor="#000000" />
<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager"
    app:layout_constraintTop_toBottomOf="@+id/tablayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />