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：
-- -------------------- ---- ------- ------ ----- --------- ------- -------- - --------- ------ ---- --------------------------- --------- --------- ---------- ------ ------------------- - ---- ---- - ------------------------------------ ---------- ------- ------ ----- - - ------ ----- --------- ------- -------- - --------- ------ ---- --------------------------- --------- --------- ---------- ------ ------------------- - ---- ---- - ------------------------------------ ---------- ------- ------ ----- - - ------ ----- --------- ------- -------- - --------- ------ ---- --------------------------- --------- --------- ---------- ------ ------------------- - ---- ---- - ------------------------------------ ---------- ------- ------ ----- - -展开代码
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：
-- -------------------- ---- ------- --------- --------- - ----------------------------- ------------------------ ------------------------------------------------- - --------- ------ -------- ----------- --------- - ------ ---------- - ---- -- ------ --- ------------ ---- -- ------ --- ------------ ---- -- ------ --- ------------ -------- ------ ----- - - --------- ------ --- ---------- - ------ -- - --- ----------------------------------------展开代码
其中，getItem() 方法返回对应位置的 Fragment，getCount() 方法返回 Fragment 的数量。setupWithViewPager() 方法将 TabLayout 和 ViewPager 绑定在一起，实现 TabLayout 和 ViewPager 的联动。
6. 示例代码
完整的 MainActivity 代码如下：
-- -------------------- ---- ------- ------ ----- ------------ ------- ----------------- - --------- --------- ---- --------------- ------------------- - ----------------------------------- --------------------------------------- --------- --------- - ----------------------------- ------------------------------------------------------------------------------- ----------------------------------------------------------------------------------- -------------------------------------------------------------------------------- --------- --------- - ----------------------------- ------------------------ ------------------------------------------------- - --------- ------ -------- ----------- --------- - ------ ---------- - ---- -- ------ --- ------------ ---- -- ------ --- ------------ ---- -- ------ --- ------------ -------- ------ ----- - - --------- ------ --- ---------- - ------ -- - --- ---------------------------------------- - -展开代码
7. 总结
本文介绍了在 Material Design 中设置 TabLayout 的 icon 和文字的详细教程。通过使用 TabLayout 和 ViewPager，可以方便地实现多个标签页之间的切换。同时，通过设置 icon 和文字，可以让用户更好地理解每个标签页的功能和作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6582565ad2f5e1655dd77b31
