前言
Material Design 是 Google 给出的一套以纸墨设计为基础的设计语言，被广泛应用于移动端和网页端的 UI 设计中。而 TabLayout 是 Material Design 中的一个组件，用于显示多个 tab，并且可以通过滑动或点击来切换 tab。然而，有时候在使用 TabLayout 的过程中会遇到一些问题，本文将介绍如何解决 Material Design 中 TabLayout 多 tab 问题。
问题描述
在使用 TabLayout 显示多个 tab（大于 3 个）时，TabLayout 的宽度会被平均分配给每个 tab，而且文字比较长的 tab 显示不全。当我们滑动到最后一个 tab 时，最后一个 tab 会被挤压到屏幕右侧，而前面的 tab 也无法完全显示。
解决方案
1. 改变 tab 的布局
默认情况下，TabLayout 的 tab 布局是采用 TextView 实现的，而要想让文字显示完全，我们可以将 tab 布局改成一个自定义的布局，采用 ImageView 和 TextView 来组合实现，这样就可以根据实际情况调整布局的大小，从而保证文字不被挤出屏幕。
示例代码：
-- -------------------- ---- -------
-------------------------------------------
----------------------------
-----------------------------------
-------------------------------------------
---------------------
----------------------------
-------------------
-----------------------------------------------
------------------------------------------------
-----------------------------------------
-----------------------------------------
-----------------------------------
------------------------------------
------------------------------------------
----------------------------------------------- -------------------- ---- -------
---- ------------------- ---
-------------
-----------------------------------
------------------------------------
-----------------------------------
-------------------------------
----------
--------------------------
-----------------------------------
------------------------------------
----------------------------------
---------
--------------------------
-----------------------------------
------------------------------------
---------------------------------
---------------2. 改变 TabLayout 的宽度
如果默认宽度不能满足要求，我们可以通过编写自定义的 TabLayout 来控制 TabLayout 的宽度，并且让每个 tab 的宽度根据文字的长度来计算。可以通过设置 tabGravity 为 fill 并且设置 tabMode 为 MODE_FIXED 来实现。
示例代码：
-- -------------------- ---- -------
--------------------------------------------
----------------------------
-----------------------------------
-------------------------------------------
---------------------
----------------------------
-------------------
-----------------------------------------------
------------------------------------------------
-------------------------------------------- -------------------- ---- -------
------ ----- --------------- ------- --------- -
------ ----------------------- -------- -
---------------
-
------ ----------------------- -------- ------------ ------ -
-------------- -------
-
------ ----------------------- -------- ------------ ------ --- ------------- -
-------------- ------ --------------
-
---------
--------- ---- ------------- ----------------- --- ------------------ -
--------------------------------- -------------------
-- -------------- -- -- -
-------
-
--------- --------- - ----------- --------------
--- ---------- - --------------------------
--- ----- - -------------------
--- -------- - ----- - -----------
--- ---- - - -- - - ----------- ---- -
---- ------- - ------------------------
--------------------- -- -- ---
---------------------- -- - --------------------------
-------- - ---------
----------------------------
-
-
-总结
本文介绍了如何解决 Material Design 中 TabLayout 多 tab 问题。我们可以选择改变 tab 的布局，采用自定义的布局来实现；或者通过编写自定义的 TabLayout 来控制 TabLayout 的宽度。无论采用哪种方式，都可以让 TabLayout 在显示多个 tab 的时候更加美观和实用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c0e28b83d39b4881539841