TabLayout 和 ViewPager 是 Android 开发中常用的控件，TabLayout 可以方便地实现 Tab 的切换效果，而 ViewPager 则可以实现页面的左右滑动切换效果。在 Material Design 中，让这两个控件联动，既可以提高用户体验，又可以实现更加直观的 UI 效果。在本文中，将介绍如何实现 TabLayout 与 ViewPager 的联动，并提供例子代码供大家参考。
实现步骤
- 添加依赖库
在项目的 build.gradle 文件中添加以下依赖库：
implementation 'com.google.android.material:material:1.4.0'
- 添加布局文件
在布局文件中添加 TabLayout 和 ViewPager：
-- -------------------- ---- -------
-------------------------------------------
----------------------------
-----------------------------------
------------------------------------
-------------------
-----------------------
------------------------------------
----------------------------
-----------------------------------
--------------------------------------其中，TabLayout 的 tabMode 属性可以决定 Tab 的显示模式，fixed 表示 Tab 显示在屏幕上的数量不变，scrollable 表示 Tab 可以左右滑动。tabGravity 属性可以决定 Tab 的对齐方式，fill 表示 Tab 填充整个 TabLayout。
- 添加 Tab 和 Fragment
创建 Tab 和对应的 Fragment，并将它们添加到 TabLayout 和 ViewPager 中：
-- -------------------- ---- ------- -- -- --- ------------- ---- - ----------------------------------- ------------- ---- - ----------------------------------- ------------- ---- - ----------------------------------- -- -- --- - --------- ----------------------- ----------------------- ----------------------- -- -- -------- --------- --------- - --- ------------ --------- --------- - --- ------------ --------- --------- - --- ------------ -- -- -------- - --------- -------------- ------------ - --- -------------- ---------------------------- ---------------------------- ---------------------------- -------------- -------------- - --- ------------------------------------------- -------------- ------------------------------------- -- - --------- - --------- -- ----------------------------------------
其中，MyPagerAdapter 继承自 FragmentPagerAdapter，用于管理 ViewPager 中的 Fragment。
- 在 Fragment 中处理数据
在 Fragment 中处理数据，并根据需要刷新界面。例如，在 Fragment1 中显示一个 TextView：
-- -------------------- ---- -------
------ ----- --------- ------- -------- -
------- -------- ---------
---------
---------
------ ---- --------------------- -------------- --------- --------- --------- ---------- --------- ------ ------------------- -
---- ---- - ------------------------------------ ---------- -------
-------- - ----------------------------------
------ -----
-
---------
------ ---- ---------- -
-----------------
-- ------- --
---------------------- -- -------- ----
-
-至此，TabLayout 和 ViewPager 的联动就已经实现了。
示例代码
以下为完整的示例代码，供大家参考。
-- -------------------- ---- -------
------ ----- ------------ ------- ----------------- -
------- --------- ----------
------- --------- ----------
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
-- -----
--------- - ------------------------------
--------- - ------------------------------
-- -- ---
------------- ---- - -----------------------------------
------------- ---- - -----------------------------------
------------- ---- - -----------------------------------
-- -- --- - ---------
-----------------------
-----------------------
-----------------------
-- -- --------
--------- --------- - --- ------------
--------- --------- - --- ------------
--------- --------- - --- ------------
-- -- -------- - ---------
-------------- ------------ - --- --------------
----------------------------
----------------------------
----------------------------
-------------- -------------- - --- ------------------------------------------- --------------
-------------------------------------
-- - --------- - --------- --
----------------------------------------
-
------- ------ ----- -------------- ------- -------------------- -
------- -------------- -------------
------ ----------------------- --------------- --- -------------- ------------- -
----------
----------------- - -------------
-
--------
---------
------ -------- ----------- --------- -
------ ---------------------------
-
---------
------ --- ---------- -
------ --------------------
-
---------
---------
------ ------------ ---------------- --------- -
------ ---- - - --------- - ---
-
-
------ ------ ----- --------- ------- -------- -
------- -------- ---------
---------
---------
------ ---- --------------------- -------------- --------- --------- --------- ---------- --------- ------ ------------------- -
---- ---- - ------------------------------------ ---------- -------
-------- - ----------------------------------
------ -----
-
---------
------ ---- ---------- -
-----------------
-- ------- --
---------------------- -- -------- ----
-
-
------ ------ ----- --------- ------- -------- -
------- -------- ---------
---------
---------
------ ---- --------------------- -------------- --------- --------- --------- ---------- --------- ------ ------------------- -
---- ---- - ------------------------------------ ---------- -------
-------- - ----------------------------------
------ -----
-
---------
------ ---- ---------- -
-----------------
-- ------- --
---------------------- -- -------- ----
-
-
------ ------ ----- --------- ------- -------- -
------- ------ -------
---------
---------
------ ---- --------------------- -------------- --------- --------- --------- ---------- --------- ------ ------------------- -
---- ---- - ------------------------------------ ---------- -------
------ - -------------------------------
----------------------------- ---------------------- -
---------
------ ---- ------------ -- -
-- ------
---------------------------- ----- -- -------- --- ---------------------------
-
---
------ -----
-
-
-总结
本文介绍了在 Material Design 下如何实现 TabLayout 与 ViewPager 的联动，包括添加依赖库、添加布局文件、添加 Tab 和 Fragment、在 Fragment 中处理数据等步骤。希望对大家学习 Android 开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65928d72eb4cecbf2d750fa1