在移动端应用开发中，TabLayout 常用于展示多个页面或者模块，为用户提供快速切换的方式。在 Material Design 中，TabLayout 是一个十分重要的组件，并且使用起来还是比较简单的，今天我们就来看一看，如何在 Material Design 中使用 TabLayout。
1. 实现效果
我们将在本文中实现一个具有多页面切换及过渡动画的 TabLayout 应用，应用截图如下：
2. 实现思路
我们需要实现的应用最主要的就是 TabLayout 的功能实现，其它的如页面布局、动画等都不是太重要。实现思路如下：
- 创建多个 Fragment 作为页面内容，每个 Fragment 对应一个标签页。
- 使用 ViewPager 将 Fragment 绑定到 Activity 中，实现多页面切换。
- 将 ViewPager 与 TabLayout 绑定，创建所需的 Tab。
- 实现页面切换时的过渡动画效果。
3. 开始编码
3.1 布局文件
我们需要使用一个主 Activity，这个 Activity 内部包括一个 ViewPager 和一个 TabLayout，还有一个底部 Toolbar。具体代码如下：
-- -------------------- ---- -------
----- ------------- ------------------
----------------------------------------------------
----------------------------------------------------------
---------------------------------------------------
-----------------------------------
-------------------------------------
---- ------ ---
------------------------------------------------
-----------------------------------
-------------------------------------------
--------------------------------------------------------------------
----------------------------------
-------------------------
-----------------------------------
-------------------------------------------
---------------------------------------
-------------------------------------------
-------------------- ----- --
--------------------------------------------------
---- ------- ---
------------------------------------
---------------------------
-----------------------------------
------------------------------------
------------------------------------------------------------ --
---- --------- ---
-------------------------------------------
---------------------------
-----------------------------------
------------------------------------
---------------------------------------
--------------------------------------------
-----------------------------------------------
---------------------------------
---------------------------------
--------------------------
------------------------ --
------------------------------------------------------3.2 数据准备
我们需要为每个标签页预先准备好一个对应的 Fragment，这里共用一个 Fragment：PageFragment，并在 Fragment 中设置好对应的图片资源和标签名等数据。代码如下：
-- -------------------- ---- -------
------ ----- ------------ ------- -------- -
------- --- ----------
------- ------ -------
------ ------ ------------ --------------- --------- ------ ------ -
------ ---- - --- ---------
----------------------- ----------
----------------------- -------
------------ -------- - --- ---------------
----------------------------
------ ---------
-
---------
------ ---- --------------- ------------------- -
-----------------------------------
-- --------------- -- ----- -
--------- - ----------------------------------
------- ----------------------------------
-
-
---------
------ ---- --------------------------- --------- --------- ---------------- ------------------- -
---- ---- - ---------------------------------------- ---------- -------
--------- --------- - ----------------------------------
--------------------------------------
-------- -------- - ---------------------------------
-------------------------
------ -----
-
-接着，在 MainActivity 中准备好需要展示的数据，并使用 ViewPager 将数据与 Fragment 绑定。代码如下：
-- -------------------- ---- -------
------ ----- ------------ ------- ----------------- -
------- --------- -----------
------- --------- -----------
------- ------------------ ---------- - --- --------------------------
------- ----- ---------- - --- ---------------------- ---------------- ---------------- -----------------
------- -------- ------- - --- -------------- --- ----- --- ----- --- ----- ----
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
---------- - -----------------------------
---------- - -----------------------------
--- ---- - - -- - - --------------- ---- -
------------------------------------------------------ -------------
-
-------------------------------------------------
------------ ------- - --- ----------------------------------------- ----------- ---------
-------------------------------
------------------------------------------
-
------ ----- ------------ ------- -------------------- -
------- ------------------ -----------
------- -------- --------
------ ---------------------------- --- ------------------ ---------- -------- ------- -
--------- ------------------------------------------------------------
---------- - ----------
------- - -------
-
---------
------ -------- ----------- --------- -
------ -------------------------
-
---------
------ --- ---------- -
------ ------------------
-
---------
---------
------ ------------ ---------------- --------- -
------ ------------------
-
-
-这样就完成了页面数据的准备。
3.3 页面切换效果
在这里，我们将通过添加过渡动画实现页面切换效果。具体做法是在 PageFragment 中添加动画，代码如下：
-- -------------------- ---- -------
------ ----- ------------ ------- -------- -
------- --- ----------
------- ------ -------
---
---------
---------
------ -------- -------------------- -------- ------- ------ --- --------- -
-- ------- -
------ ---------------------------- --------------- ---- ---
- ---- -
------ ---------------------------- --------------- -- ------
-
-
-使用 ObjectAnimator 来设置页面的位移动画，这里使用的是 X 轴方向的平移动画，enter 参数表示 fragment 是被添加、展示的状态，还是被移除、隐藏的状态。
最后，我们也可以为 TabLayout 添加一些 Material Design 风格的自定义样式，代码如下：
-- -------------------- ---- -------
------ ---------------------- ---------------------------------
----- ----------------------------------------------------
----- ----------------------------------
----- -------------------------------------------------------
----- ------------------------------------
----- ----------------------------------------------------------
--------
------ -------------------------- -----------------------------------
----- -----------------------------------
----- ---------------------------------------
--------4. 总结
本文通过一个简单的应用实例，介绍了 TabLayout 的基本用法。如何在 Material Design 中使用 TabLayout，如何实现页面切换效果都被阐述了。希望读者们能够通过本文加深对 TabLayout 的理解，同时也提供了不少参考代码，给新手减少了一些探索成本。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e1e19ff6b2d6eab3d2729c