Material Design 是 Google 推出的一种基于扁平化设计的 UI 设计风格，旨在为用户提供优美、简洁、统一的视觉体验。在 Material Design 中，TabLayout 是一个非常常见的 UI 控件，用于切换不同的页面或者视图。
TabLayout 自定义样式的实现方法非常重要，它可以帮助我们更好的适应不同的场景和需求，提高用户体验度。本文将介绍 Material Design 中 TabLayout 自定义样式的实现方法，帮助读者更好地理解和使用 Material Design。
1. TabLayout 的基本使用
在使用 TabLayout 之前，我们需要先添加相关的依赖库，在 build.gradle 中加入以下代码：
implementation 'com.google.android.material:material:1.4.0'
然后就可以在布局文件中添加 TabLayout 控件了：
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>接下来在代码中初始化 TabLayout，并为其添加选项卡：
TabLayout tabLayout = findViewById(R.id.tab_layout);
tabLayout.addTab(tabLayout.newTab().setText("选项卡1"));
tabLayout.addTab(tabLayout.newTab().setText("选项卡2"));
tabLayout.addTab(tabLayout.newTab().setText("选项卡3"));
...这样，我们就完成了 TabLayout 基本的使用。
2. TabLayout 样式的自定义
TabLayout 提供了一些默认的样式，但如果我们想要在 TabLayout 中使用其他自定义的样式，就需要了解 TabLayout 的自定义属性。下面是一些常用的自定义属性以及对应的说明：
| 属性 | 说明 |
|---|---|
| tabMaxWidth | 指定选项卡的最大宽度 |
| tabMinWidth | 指定选项卡的最小宽度 |
| tabPadding | 指定选项卡的左右内边距 |
| tabPaddingStart | 指定选项卡的左内边距 |
| tabPaddingEnd | 指定选项卡的右内边距 |
| tabBackground | 指定选项卡的背景色 |
| tabGravity | 指定选项卡的位置，支持 left、center、right |
| tabIndicatorColor | 指定选项卡底部指示器的颜色 |
| tabIndicatorHeight | 指定选项卡底部指示器的高度 |
| tabTextAppearance | 指定选项卡文字的样式 |
我们可以通过设置这些属性，来为 TabLayout 添加自定义样式，其中 tabBackground、tabIndicatorHeight、tabTextAppearance 都对应着一个样式：
<style name="TabStyle" parent="Widget.Design.TabLayout">
<item name="tabBackground">@drawable/tab_indicator_selector</item>
<item name="tabIndicatorHeight">2dp</item>
<item name="tabTextAppearance">@style/TabTextStyle</item>
</style>上面的示例代码中，我们定义了三个属性，tabBackground 指定了选项卡的背景样式为 tab_indicator_selector（可以自己定义），tabIndicatorHeight 指定了选项卡底部指示器的高度为 2dp，tabTextAppearance 指定了选项卡文字的样式为 TabTextStyle（可以自己定义）。
接下来我们要定义这两个样式：
-- -------------------- ---- -------
------ ------------------- -----------------------------------
----- -----------------------------------------------------
----- ------------------------------------------------
--------
--------- -----------------------------------------------------------
----- ------------------------------------------ -------------------------------
----- -----------------------------------------------
-----------上面的代码中，我们定义了 TabTextStyle 样式指定选项卡文字颜色为 tab_text_color（可以自己定义），选项卡文字字体为 open_sans 字体。同时，我们还定义了一个 selector，指定选中状态下选项卡底部指示器的颜色为 colorPrimaryDark，未选中状态下透明。
3. 示例代码
最后，下面是一个完整的示例代码，供读者参考：
-- -------------------- ---- -------
-------------------------------------------
----------------------------
-----------------------------------
------------------------------------
---------------------------------
---------------------
---------------------
-------------------
----------------------------------------------------
----------------------------
----------------------------------------
--------------------------------------------------
----------------------------------------------- -------------------- ---- -------
--------- --------- - ------------------------------
-----------------------------------------------------
-----------------------------------------------------
-----------------------------------------------------
-------------------------------------- --------------------------------- -
---------
------ ---- --------------------------- ---- -
-- ------
-
---------
------ ---- ----------------------------- ---- -
-- ------
-
---------
------ ---- ----------------------------- ---- -
-- --------
-
----- -------------------- ---- -------
------ --------------- ---------------------------------
----- ------------------------------------------------------------
----- ------------------------------------
----- ---------------------------------------------------
--------
------ ------------------- -----------------------------------
----- -----------------------------------------------------
----- ------------------------------------------------
--------
--------- -----------------------------------------------------------
----- ------------------------------------------ -------------------------------
----- -----------------------------------------------
-----------4. 总结
本文介绍了 Material Design 中 TabLayout 自定义样式的实现方法，首先详细介绍了 TabLayout 的基本使用方法，然后针对 TabLayout 的自定义属性介绍了一些常用的属性以及对应的样式定义，最后给出了完整的示例代码供读者参考。希望本文对读者理解和使用 Material Design 提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647b1b57968c7c53b06ac018