在移动应用开发中，TabLayout 是一种非常常见的交互组件，可以使应用程序的导航更加直观和便捷。而 Material Design 则是一种被广泛应用的设计语言，提供了一些常见组件的设计样式和交互效果。本文将介绍如何使用 Material Design 的 TabLayout 实现动态的标签页效果。
准备工作
在开始之前，需要确保以下库已经添加到项目的 build.gradle 文件中：
implementation 'com.google.android.material:material:1.0.0'
实现动态 TabLayout
首先，在你的 XML 布局文件中添加以下代码：
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
app:tabGravity="fill"/>tabMode属性指定了 TabLayout 的模式，这里设置成了scrollable，表示可以滚动；tabGravity属性指定了 TabLayout 的重心，这里设置成了fill，表示标签平均填充整个宽度。
接着，在 Java 代码中获取 TabLayout 并根据需要添加标签页：
TabLayout tabLayout = findViewById(R.id.tab_layout);
for (int i = 0; i < tabNames.length; i++) {
tabLayout.addTab(tabLayout.newTab().setText(tabNames[i]));
}这里 tabNames 是一个字符串数组，包含了需要添加的标签名称。可以通过循环遍历数组来添加标签页。
完整的 Java 代码示例：
-- -------------------- ---- -------
------ ----- ------------ ------- ----------------- -
------- ------ ----- -------- -------- - ----- --- ---- --- ---- ----
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
--------- --------- - ------------------------------
--- ---- - - -- - - ---------------- ---- -
----------------------------------------------------------
-
-
-自定义标签页样式
在使用 TabLayout 时，可以通过自定义标签页样式来实现更个性化的展示效果。通常，自定义的样式包括以下部分：
- 标签页选中时的颜色和背景；
- 标签页未选中时的颜色和背景；
- 标签页的文本颜色和字体大小；
- 标签页的图标和位置。
自定义选中和未选中的颜色和背景
可以使用 app:tabSelectedTextColor 和 app:tabTextColor 属性来设置标签页选中和未选中时的文本颜色。还可以使用 app:tabSelectedBackground 和 app:tabBackground 属性来设置标签页选中和未选中时的背景颜色或者 drawable，比如：
-- -------------------- ---- -------
-------------------------------------------
----------------------------
-----------------------------------
------------------------------------
------------------------
---------------------
----------------------------------------
----------------------------------------------
-------------------------------------------------------
---------------------------------------------------------------自定义标签页文本颜色和字体大小
可以使用 app:tabTextAppearance 属性来设置标签页文本的样式，这个属性可以设置一个样式 Resource ID，比如：
-- -------------------- ---- -------
------ -------------------------
----- -----------------------------------------------------
----- -----------------------------------
--------
-------------------------------------------
----------------------------
-----------------------------------
------------------------------------
------------------------
---------------------
--------------------------------------------------自定义标签页的图标和位置
可以在添加标签页时，使用 newTab() 方法创建一个新的标签，并使用 setIcon() 方法设置标签的图标，如：
tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.tab_icon));
TabLayout 还支持多种标签位置的设置，包括：
setTabGravity()：设置标签的重力；setTabMode()：设置标签的模式。
例如，下面的代码将标签放在了页面顶部并且按照等宽模式进行布局：
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL); tabLayout.setTabMode(TabLayout.MODE_FIXED);
总结
本文介绍了如何使用 Material Design 的 TabLayout 实现动态的标签页效果，并提供了自定义样式的实现方法。使用标签页可以轻松实现 App 内导航，增强用户界面体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f179f7f6b2d6eab3b4aba0