Android TabLayout + ViewPager 实现自定义选项卡：详细指南

本文将详细介绍如何在 Android 应用中使用 TabLayout 和 ViewPager 创建自定义选项卡。我们将通过代码示例逐步讲解如何自定义选项卡的外观和内容。

1. 添加 TabLayout 和 ViewPager 控件

首先，在您的布局文件中添加 TabLayout 和 ViewPager 控件：

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="scrollable"
    app:tabGravity="center"/>

<android.support.v4.view.ViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

2. 创建自定义选项卡布局文件

创建一个名为 custom_tab.xml 的布局文件，用于定义每个选项卡的外观。例如，您可以使用一个 ImageView 和一个 TextView 来显示图标和文本：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center">

    <ImageView
        android:id="@+id/tab_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:id="@+id/tab_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="14sp"
        android:textColor="@android:color/black"/>

</LinearLayout>

3. 创建自定义选项卡类

创建一个名为 CustomTab 的类，用于管理每个选项卡的图标和文本信息：

public class CustomTab {

    private int icon;
    private String text;

    public CustomTab(int icon, String text) {
        this.icon = icon;
        this.text = text;
    }

    public View getView(Context context) {
        View view = LayoutInflater.from(context).inflate(R.layout.custom_tab, null);
        ImageView tabIcon = (ImageView) view.findViewById(R.id.tab_icon);
        TextView tabText = (TextView) view.findViewById(R.id.tab_text);
        tabIcon.setImageResource(icon);
        tabText.setText(text);
        return view;
    }
}

4. 创建自定义 TabLayoutAdapter

创建一个名为 TabLayoutAdapter 的类，继承自 FragmentPagerAdapter，用于管理 ViewPager 和 TabLayout 之间的关联：

public class TabLayoutAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragments;
    private List<CustomTab> tabs;
    private Context context;

    public TabLayoutAdapter(Context context, FragmentManager fm, List<Fragment> fragments, List<CustomTab> tabs) {
        super(fm);
        this.context = context;
        this.fragments = fragments;
        this.tabs = tabs;
    }

    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

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

    @Override
    public CharSequence getPageTitle(int position) {
        return null;
    }

    public View getTabView(int position) {
        return tabs.get(position).getView(context);
    }
}

5. 在 Activity 中配置 TabLayout 和 ViewPager

在您的 Activity 中，创建一个 CustomTab 列表和 Fragment 列表，并将它们传递给 TabLayoutAdapter：

List<CustomTab> tabs = new ArrayList<>();
tabs.add(new CustomTab(R.drawable.tab1, 'Tab 1'));
tabs.add(new CustomTab(R.drawable.tab2, 'Tab 2'));
tabs.add(new CustomTab(R.drawable.tab3, 'Tab 3'));

List<Fragment> fragments = new ArrayList<>();
fragments.add(new Fragment1());
fragments.add(new Fragment2());
fragments.add(new Fragment3());

TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
TabLayoutAdapter adapter = new TabLayoutAdapter(this, getSupportFragmentManager(), fragments, tabs);
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);

for (int i = 0; i < tabs.size(); i++) {
    View tabView = adapter.getTabView(i);
    tabLayout.getTabAt(i).setCustomView(tabView);
}

6. 运行程序查看效果

运行您的应用程序，您将看到带有自定义图标和文本的选项卡。

注意：

请将 R.drawable.tab1、R.drawable.tab2 和 R.drawable.tab3 替换为您的实际图标资源 ID。
将 Fragment1、Fragment2 和 Fragment3 替换为您的实际 Fragment 类。
您可以根据自己的需求调整 custom_tab.xml 中的布局，以及 CustomTab 类的实现。

通过以上步骤，您就可以轻松地使用 TabLayout 和 ViewPager 创建带有自定义选项卡的界面了。