Material Design 中 TabLayout 设置 icon 和文字的详细教程

TabLayout 是 Android Material Design 中的一个重要组件，它可以让用户在不同的标签页之间切换。在 TabLayout 中，我们可以设置每个标签页的 icon 和文字，以便用户更好地理解每个标签页的功能和作用。本文将详细介绍如何在 Material Design 中设置 TabLayout 的 icon 和文字。

1. 添加依赖库

在项目的 build.gradle 文件中，添加以下依赖库：

implementation 'com.google.android.material:material:1.4.0'

这个库包含了 Material Design 中的所有组件，包括 TabLayout。

2. 在布局文件中添加 TabLayout

在布局文件中添加 TabLayout 组件：

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="fixed"
    app:tabGravity="fill"/>

其中，tabMode 属性设置为 fixed，表示 TabLayout 中的标签页数量是固定的；tabGravity 属性设置为 fill，表示标签页的宽度是平均分配的。

3. 创建 Fragment

在 MainActivity 中创建多个 Fragment，用于显示不同的标签页内容。例如，创建三个 Fragment：

// javascriptcn.com 代码示例
public class Fragment1 extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment1, container, false);
        return view;
    }
}

public class Fragment2 extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment2, container, false);
        return view;
    }
}

public class Fragment3 extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment3, container, false);
        return view;
    }
}

4. 设置 TabLayout 的 icon 和文字

在 MainActivity 中，使用以下代码设置 TabLayout 的 icon 和文字：

TabLayout tabLayout = findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.ic_home).setText("首页"));
tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.ic_category).setText("分类"));
tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.ic_cart).setText("购物车"));

其中，setIcon() 方法设置 icon，setText() 方法设置文字。

5. 设置 ViewPager

在 MainActivity 中，使用 ViewPager 来管理多个 Fragment：

// javascriptcn.com 代码示例
ViewPager viewPager = findViewById(R.id.viewPager);
viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0:
                return new Fragment1();
            case 1:
                return new Fragment2();
            case 2:
                return new Fragment3();
            default:
                return null;
        }
    }

    @Override
    public int getCount() {
        return 3;
    }
});

tabLayout.setupWithViewPager(viewPager);

其中，getItem() 方法返回对应位置的 Fragment，getCount() 方法返回 Fragment 的数量。setupWithViewPager() 方法将 TabLayout 和 ViewPager 绑定在一起，实现 TabLayout 和 ViewPager 的联动。

6. 示例代码

完整的 MainActivity 代码如下：

// javascriptcn.com 代码示例
public class MainActivity extends AppCompatActivity {

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

        TabLayout tabLayout = findViewById(R.id.tabLayout);
        tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.ic_home).setText("首页"));
        tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.ic_category).setText("分类"));
        tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.ic_cart).setText("购物车"));

        ViewPager viewPager = findViewById(R.id.viewPager);
        viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                switch (position) {
                    case 0:
                        return new Fragment1();
                    case 1:
                        return new Fragment2();
                    case 2:
                        return new Fragment3();
                    default:
                        return null;
                }
            }

            @Override
            public int getCount() {
                return 3;
            }
        });

        tabLayout.setupWithViewPager(viewPager);
    }
}

7. 总结

本文介绍了在 Material Design 中设置 TabLayout 的 icon 和文字的详细教程。通过使用 TabLayout 和 ViewPager，可以方便地实现多个标签页之间的切换。同时，通过设置 icon 和文字，可以让用户更好地理解每个标签页的功能和作用。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6582565ad2f5e1655dd77b31