Material Design 是 Google 推出的一种设计语言，它带来了一种全新的体验和视觉效果。其中，TabLayout 是 Material Design 中最常用和流行的组件之一。它可以让用户快速地浏览不同类型的信息，并且可以通过滑动手势实现切换。
在本篇文章中，我们将详细讲解如何使用 Material Design 实现可滑动的 TabLayout，同时提供一些示例代码和指导意义，帮助读者更好地理解和使用这个常用的组件。
实现步骤
1. 添加依赖库
在项目的 build.gradle 文件中添加以下依赖库。
implementation 'com.google.android.material:material:1.2.0'
2. 布局文件中添加 TabLayout
在需要使用 TabLayout 的布局文件中添加 TabLayout 组件。以下是一个示例布局文件。
-- -------------------- ---- -------
----- ------------- ------------------
--------------------------------------------------
----------------------------------------------------------
-----------------------------------
-------------------------------------
-------------------------------------------
----------------------------
-----------------------------------
----------------------------
----------------------------------------
-----------------------
----------------------------
----------------------------------------------------
-------------------------------------
-
----------------------------------------------------3. 配置 TabLayout
在 Activity 或 Fragment 中，在 onCreate() 方法中获取 TabLayout 对象并进行配置。以下是一个示例代码。
-- -------------------- ---- -------
-- -- --------- --
--------- --------- - ------------------------------
-- -- ---------
------------------------------------------------ -----
------------------------------------------------ -----
------------------------------------------------ -----
------------------------------------------------ -----
------------------------------------------------ -----
-------------------------------------- --------------------------------- -
---------
------ ---- --------------------------- ---- -
-- -- --- ---
-
---------
------ ---- ----------------------------- ---- -
-- ---- --- ---
-
---------
------ ---- ----------------------------- ---- -
-- -------- --- ---
-
---这段代码中，我们首先获取了 TabLayout 对象，并配置了 TabLayout 的样式和文本。接着，我们通过 addOnTabSelectedListener() 方法设置了选中、未选中和重复选中时的回调函数。
4. 将 TabLayout 与 ViewPager 关联
在 Activity 或 Fragment 中创建 ViewPager，并将其与 TabLayout 关联。以下是一个示例代码。
-- -------------------- ---- ------- -- -- --------- -- --------- --------- - ------------------------------ -- -- --------- -- --------- --------- - ------------------------------ -- -- ------------ ------------ ------------ - --- ----------------------------------------- ------------------------------------------------------------ ---------------------------- ------------ --------- ---- ---------------------------- ------------ --------- ---- ---------------------------- ------------ --------- ---- ---------------------------- ------------ --------- ---- ---------------------------- ------------ --------- ---- -- -- --------- - ------------ ----------------------------------- -- - --------- - --------- -- ----------------------------------------
在这段代码中，我们首先获取了 TabLayout 和 ViewPager 对象，并创建了一个 PagerAdapter。接着，我们将创建的 Fragment 添加到 PagerAdapter 中，并将其与 ViewPager 关联。最后，我们调用了 TabLayout 的 setupWithViewPager() 方法，将其与 ViewPager 关联起来。
至此，我们已经成功实现了可滑动的 TabLayout。
深度解析
TabLayout 组件
TabLayout 是一个支持可滑动 Tab 和固定 Tab 的 Android 组件。在使用它之前，我们需要先添加 Material Design 的依赖库。TabLayout 的一些重要属性和方法如下。
属性
| 属性名 | 属性值 | 描述 |
|---|---|---|
| app:tabMode | scrollable/fixed | Tab 的模式。scrollable 表示 Tab 可以左右滑动，fixed 表示 Tab 固定在屏幕上方，并只显示一部分。 |
| app:tabGravity | fill/center | Tab 的对齐方式。fill 表示 Tab 均匀分布，并填充满宽度；center 表示 Tab 居中。 |
| app:tabIndicatorColor | color | 选中 Tab 时的指示器颜色。 |
| app:tabIndicatorHeight | dimension | 选中 Tab 时的指示器高度。 |
| app:tabSelectedTextColor | color | 选中 Tab 时的文本颜色。 |
方法
| 方法名 | 描述 |
|---|---|
| void addTab(TabLayout.Tab tab) | 添加一个 Tab |
| void addTab(TabLayout.Tab tab, int position) | 在指定位置插入一个 Tab |
| void removeTab(TabLayout.Tab tab) | 移除一个 Tab |
| void removeTabAt(int position) | 移除指定位置的 Tab |
| void removeAllTabs() | 移除所有的 Tab |
| void setOnTabSelectedListener(TabLayout.OnTabSelectedListener listener) | 设置选中、未选中和重复选中时的回调函数 |
| void setScrollPosition(int position, float positionOffset, boolean updateSelectedText) | 设置 TabLayout 的滚动位置 |
ViewPager 组件
ViewPager 是一个可以左右滑动的组件，通常用于展示多个碎片或页面。在使用 ViewPager 之前，我们需要先添加 Androidx 的依赖库。ViewPager 的一些常用属性和方法如下。
属性
| 属性名 | 属性值 | 描述 |
|---|---|---|
| android:layout_width | match_parent/fill | ViewPager 的宽度。match_parent/fill 表示 ViewPager 宽度与父容器相同。 |
| android:layout_height | match_parent/fill | ViewPager 的高度。match_parent/fill 表示 ViewPager 高度与父容器相同。 |
| android:id | id | ViewPager 的唯一标识。 |
| app:adapter | PagerAdapter | ViewPager 的数据源。 |
方法
| 方法名 | 描述 |
|---|---|
| void setAdapter(PagerAdapter adapter) | 设置数据源。 |
| void setCurrentItem(int item) | 设置当前选中的页码。 |
| void setCurrentItem(int item, boolean smoothScroll) | 设置当前选中的页码，并且平滑过渡。 |
| int getCurrentItem() | 获取当前选中的页码。 |
| void setPageTransformer(boolean reverseDrawingOrder, ViewPager.PageTransformer transformer) | ViewPager 页码切换时的动画。 |
| void addOnPageChangeListener(ViewPager.OnPageChangeListener listener) | 添加页码切换的回调函数。 |
PagerAdapter 数据适配器
PagerAdapter 是一个抽象类，用于提供 ViewPager 的数据源。它的作用类似于 ListView 和 RecyclerView 中的 Adapter。我们需要继承 PagerAdapter 类，实现其中的一些抽象方法，包括 getCount() 和 getItem() 等。以下是一个示例代码。
-- -------------------- ---- -------
------ ----- -------------- ------- -------------------- -
------- -------------- ---------- - --- --------------
------- ------------ --------------- - --- --------------
------ ------------------------------ --- -
--------- ------------------------------------------------------------
-
------ ---- -------------------- --------- ------ ------ -
-------------------------
---------------------------
-
---------
------ -------- ----------- --------- -
------ -------------------------
-
---------
------ --- ---------- -
------ ------------------
-
---------
---------
------ ------------ ---------------- --------- -
------ ------------------------------
-
-在这段代码中，我们继承了 FragmentPagerAdapter 类，并且重写了其中的 getItem()、getCount() 和 getPageTitle() 等方法。其中，getItem() 方法用于返回每个侧滑页面的 Fragment，getCount() 方法用于返回侧滑页面的数量，getPageTitle() 方法用于返回每个侧滑页面对应的标签。
示例代码
最后，我们提供一个完整的示例代码，用于展示如何使用 Material Design 实现可滑动的 TabLayout。完整示例代码可以从 GitHub 上下载。
该示例代码中，我们使用了 ViewPager 和 FragmentPagerAdapter 实现了可滑动 Tab，并使用了 Material Design 中的一些属性和样式。
以下是 MainActivity 的示例代码。
-- -------------------- ---- -------
------ ----- ------------ ------- ----------------- -
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
-- -- --------- --
--------- --------- - ------------------------------
-- -- --------- --
--------- --------- - ------------------------------
-- -- ------------
------------ ------------ - --- ----------------------------------------- ------------------------------------------------------------
---------------------------- ------------ --------- ----
---------------------------- ------------ --------- ----
---------------------------- ------------ --------- ----
---------------------------- ------------ --------- ----
---------------------------- ------------ --------- ----
-- -- --------- - ------------
-----------------------------------
-- - --------- - --------- --
----------------------------------------
-- -- --------- ------
------------------------------------------------
--------------------------------------------------
------------------------------------------------------- --------------------- -------------
----------------------------------------------------
-
-总结
在本篇文章中，我们详细地讲解了如何使用 Material Design 实现可滑动的 TabLayout，并提供了一些示例代码和指导意义。TabLayout 是一个非常常用的 Android 组件，它可以帮助我们快速地浏览不同类型的信息，并且可以通过滑动手势实现切换。希望本篇文章可以对读者带来一些帮助和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647839c2968c7c53b047a8b3