Android Material Design 是 Google 在 2014 年 I/O 大会上发布的新设计语言，是一种更现代，更美观，更有层次感的设计语言，极受开发者欢迎。在 Material Design 中，TabLayout 是一种非常常用的组件，可以实现标签页的效果，非常适合在移动应用程序中使用。本文将详细介绍在 Material Design 中使用 TabLayout 实现标签页效果，包含示例代码。
什么是 TabLayout？
TabLayout 是 Android 上经常使用的一种标签页组件，常常被用于在不同页面之间切换。在 Material Design 中，TabLayout 的样式特别别致，增加了更多的交互效果，非常适用于移动应用程序，提供更优秀的用户体验。
Material Design 中 TabLayout 的使用方法
TabLayout 的使用非常简单，只需要几步就可以实现标签页效果。
添加依赖库
在项目的 build.gradle 文件中添加以下依赖库：
dependencies {
implementation 'com.google.android.material:material:1.4.0'
}添加 TabLayout
在布局文件中添加 TabLayout 组件，比如：
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>添加 ViewPager 并设置 Adapter
在布局文件中添加 ViewPager 组件，并设置 Adapter，在 Adapter 中返回不同的 Fragment 页面，比如：
-- -------------------- ---- -------
------ ----- ---------------------- ------- -------------------- -
------ ------------------------------- --------------- --- -
----------
-
---------
------ -------- ----------- --------- -
------ ---------- -
---- --
------ --- ----------------
---- --
------ --- -----------------
---- --
------ --- ----------------
--------
------ -----
-
-
---------
------ --- ---------- -
------ --
-
-将 TabLayout 和 ViewPager 绑定
在 Activity 或 Fragment 中，将 TabLayout 和 ViewPager 绑定，比如：
TabLayout tabLayout = findViewById(R.id.tabLayout); ViewPager viewPager = findViewById(R.id.viewPager); MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager()); viewPager.setAdapter(adapter); tabLayout.setupWithViewPager(viewPager);
至此，TabLayout 的使用就完成了，效果如下图所示：
使用 TabLayout 自定义样式
TabLayout 的样式非常多样化，可以通过修改 TabLayout 的属性或者自定义 TabLayout 的样式来实现不同的效果。
修改 TabLayout 属性
TabLayout 可以通过修改属性来实现不同的样式，比如：
-- -------------------- ---- -------
-------------------------------------------
---------------------------
-----------------------------------
------------------------------------
-----------------------------------------------------
-----------------------
------------------------------------------
----------------------------
-------------------
----------------------------------------------
---------------------------------------------------app:tabBackground：设置 Tab 标签的背景，可以是 drawable 或者 color。app:tabGravity：设置 Tab 标签的对齐方式，可以是 center、start 或者 end。app:tabIndicatorColor：设置 Tab 标签的指示器颜色。app:tabIndicatorHeight：设置 Tab 标签的指示器高度。app:tabMode：设置 Tab 标签的模式，可以是 fixed 或者 scrollable。app:tabSelectedTextColor：设置 Tab 标签选中时的文本颜色。app:tabTextColor：设置 Tab 标签未选中时的文本颜色。
自定义 TabLayout 样式
TabLayout 的样式非常丰富，如果以上属性不能满足需求，还可以自定义 TabLayout 的样式。比如，可以改变 Tab 标签的大小、间距、字体样式等等。
在 res/values/ 文件夹下新建一个名为 tab_custom_style.xml 的文件，将需要自定义的样式复制到该文件中，比如：
-- -------------------- ---- -------
------ --------------------- ---------------------------------
----- -----------------------------------------------------------------
----- -------------------------------------------------------------
----- --------------------------------------------------
----- ------------------------------------
----- ----------------------------------
----- --------------------------------
----- -----------------------------
--------
------ --------------------------------- -----------------------------------
----- --------------------------------------------------------------
----- -----------------------------------
----- ------------------------------------
----- -------------------------------
--------在 res/drawable/ 文件夹下新建一个名为 tab_background_selector.xml 的文件，将需要自定义的样式复制到该文件中，比如：
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="@drawable/selected_tab_background"/>
<item android:state_focused="true" android:drawable="@drawable/focus_tab_background"/>
<item android:drawable="@drawable/default_tab_background"/>
</selector>在 res/layout/ 文件夹下的布局文件中，将 TabLayout 的 style 属性设置为 @style/TabCustomStyle，比如：
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/TabCustomStyle"/>至此，自定义 TabLayout 样式的操作就完成了，效果如下图所示：
总结
TabLayout 是 Material Design 中非常常用的一个组件，它不仅能够实现标签页的效果，还能非常简单地实现不同的样式，提供不同的交互效果。通过本文的学习，您可以在自己的移动应用程序中使用 TabLayout 组件，为用户带来更加优秀的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cd16491519ea946c0ef541