Material Design 在 Android 应用中被广泛运用，TabLayout 作为其设计模式中的一部分，使得应用程序可以轻松地呈现标签式的 UI。然而，一些开发者在使用 TabLayout 时发现，其下划线的位置并不总是居中，这不仅影响了应用程序的视觉效果，也可能导致用户体验不佳。本文将详细介绍如何解决这个问题。
1. 问题原因
TabLayout 的下划线是通过自定义 Drawable 实现的，默认将下划线宽度设置为当前选中的 Tab 宽度。然而，由于 Tab 的宽度可能不一致，导致下划线的位置不居中。
2. 解决方案
解决这个问题的方法比较简单：自定义 TabLayout 的下划线 Drawable，通过计算每个 Tab 的宽度，动态调整下划线的位置，使其居中显示。具体步骤如下：
2.1 创建自定义 Drawable
创建一个继承自 LayerDrawable 的自定义 Drawable 类，该类需要实现一个带有参数的构造函数。这个参数是一个 Tab 数组，代表所有的 Tab。
public class TabLayoutUnderline extends LayerDrawable {
private TabLayout.Tab[] tabs;
public TabLayoutUnderline(TabLayout.Tab[] tabs) {
super(new Drawable[] {new ColorDrawable(), new ColorDrawable()});
this.tabs = tabs;
}
}该类使用 LayerDrawable 的构造函数创建一个 LayerDrawable，其中包含两个 Drawable：第一个是下划线的背景，第二个是下划线本身。
2.2 实现绘制方法
接下来实现绘制下划线的方法。这个方法需要计算每个 Tab 的宽度以及相对父容器的坐标位置。为了准确计算位置，我们需要引入 ViewTreeObserver。当布局变化时，ViewTreeObserver 触发 onViewGlobalLayout 事件，我们可以在该事件中获取 Tab 的宽度和位置。
-- -------------------- ---- -------
------ ----- ------------------ ------- ------------- -
------- --------------- -----
------- ----- ----------
------- ----- -------------
------- ---------------- ---------
------- ------------ --------------
------- --------- ----------
------ ---------------------------------- ----- --------- ---------- -
--------- ---------- ---- ---------------- --- ------------------
--------- - -----
-------------- - ----------
-- -- --------- - ------------
------------- - -------------- ------------------------
-------- - ------------------------------------
-------------------------------------- ----------------------------------------- -
---------
------ ---- ---------------- -
--- ------------ - ---------------------------
--- ------------ - -----------------------------------
--- --------- - ------------ -- ----------- - - -
------------ - ----------------- - -------------------
----- -------------- - ---------------------------------
-- -----------
--------- - -------- ------------ - ------- ---------- - - - ---------------
------------ - ------------------------------
- ------- ------------ - -
- --------- - --
-- -----
--------------- ------------- -- ----- ------------- - ----------- ----------------------
-----------------
-
---
-
---------
------ ---- ------------- ------ ------- -
-- -----
-------------------
-
-在 onViewGlobalLayout 事件中，我们首先获取当前选中的 Tab 的宽度。然后根据它和相邻的 Tab 的宽度计算下划线的宽度。最后获取当前选中的 Tab 的 x 坐标，并根据下划线的宽度居中显示。
2.3 在 TabLayout 中使用自定义 Drawable
完成自定义 Drawable 类后，我们在 TabLayout 中使用它。因为我们需要在 Tab 点击时更新下划线的位置，所以可以在 TabLayout 的 addOnTabSelectedListener 中更新 Drawable。具体实现如下：
-- -------------------- ---- -------
--------------- ---- - --- ---------------------------------------
--- ---- - - -- - - ------------ ---- -
------- - ----------------------
-
------------------------------------- ------------------------ ------------
-------------------------------------- --------------------------------- -
---------
------ ---- --------------------------- ---- -
-- -------
------------------------------------- ------------------------ ------------
-
---------
------ ---- ----------------------------- ---- --
---------
------ ---- ----------------------------- ---- --
---3. 示例代码
-- -------------------- ---- -------
------ ----- ------------ ------- ----------------- -
------- --------- ----------
------- --------- ----------
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
--------- - -----------------------------
--------- - -----------------------------
-------------- ------- - --- --------------------------------------------
------------------------------
----------------------------------------
--------------- ---- - --- ---------------------------------------
--- ---- - - -- - - ------------ ---- -
------- - ----------------------
-
------------------------------------- ------------------------ ------------
-------------------------------------- --------------------------------- -
---------
------ ---- --------------------------- ---- -
----------------------------------
--- ------------------------ ------------
-
---------
------ ---- ----------------------------- ---- --
---------
------ ---- ----------------------------- ---- --
---
-
------ ------ ----- -------------- ------- -------------------- -
------ ------------------------------ --- -
----------
-
---------
------ -------- ----------- --------- -
------ --- ----------------
-
---------
------ --- ---------- -
------ --
-
---------
---------
------ ------------ ---------------- --------- -
------ ---- - - --------- - ---
-
-
------ ------ ----- ------------- ------- -------- -
---------
---------
------ ---- --------------------- -------------- --------- --------- --------- ---------- --------- ------ ------------------- -
---- ---- - ----------------------------------------- ---------- -------
------ -----
-
-
------ ------ ----- ------------------ ------- ------------- -
------- --------------- -----
------- ----- ----------
------- ----- -------------
------- ---------------- ---------
------- ------------ --------------
------- --------- ----------
------ ---------------------------------- ----- --------- ---------- -
--------- ---------- ---- ---------------- --- ------------------
--------- - -----
-------------- - ----------
------------- - -------------- ------------------------
-------- - ------------------------------------
-------------------------------------- ----------------------------------------- -
---------
------ ---- ---------------- -
--- ------------ - ---------------------------
--- ------------ - -----------------------------------
--- --------- - ------------ -- ----------- - - -
------------ - ----------------- - -------------------
----- -------------- - ---------------------------------
--------- - -------- ------------ - ------- ---------- - - - ---------------
------------ - ------------------------------
- ------- ------------ - -
- --------- - --
--------------- ------------- -- ----- ------------- - ----------- ----------------------
-----------------
-
---
-
---------
------ ---- ------------- ------ ------- -
-------------------
-
-
-4. 总结
通过自定义 Drawable，我们可以轻松地解决 Material Design 中 TabLayout 下划线不居中的问题，使应用程序呈现更加美观的界面。本文介绍了详细的解决方案，并提供了示例代码。了解这个问题的解决方法，对于前端开发者来说非常有学习和指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e5aca8f6b2d6eab311e177