Material Design 是 Google 在设计语言上推出的一种框架，它提供了一套全新的视觉设计规范，旨在为制作应用程序提供更加一致、统一的用户体验。在 Material Design 的架构下，TabLayout 是其中的一种重要的组件，用于实现顶部标签栏，可以方便地在标签之间进行切换。
在本文中，我们将通过实例代码的演示，详细描述 TabLayout 的实现及变化方式，并为读者提供学习和指导意义。
TabLayout 的实现
TabLayout 的实现需要通过 TabLayout 和 ViewPager 两个控件实现，其中 TabLayout 用于显示标签栏，ViewPager 则用于实现标签内容的滑动与切换。
布局文件
我们先来看一下布局文件：
-- -------------------- ---- -------
----------------------------------
-------------------------
-----------------------------------
--------------------------------------------
-------------------------------------------
---------------------------
-----------------------------------
------------------------------------
------------------------------------------
--------------------------------------
---------------------------------------------
------------------------
------------------------------------------
------------------------------------
------------------------------------
---------------------------
-----------------------------------
------------------------------------ --在上述布局中，Toolbar 作为一个容器，用于包含 TabLayout。TabLayout 的高度为 wrap_content，使用 app:tabMode 指定了可以滚动的形式（scrollable），方便用户在固定的宽度中滑动 selects。同时控件的背景色使用了 @color/colorPrimary。
ViewPager 则作为标签内容的容器，充满整个屏幕。
Java 代码
接下来，我们需要在 Java 中配置 TabLayout 和 ViewPager 之间的关联关系，具体代码如下：
-- -------------------- ---- ------- -- -- ---- ------- ------- - --------------------------- ----------------------------- --------- --------- - ----------------------------- --------- --------- - ----------------------------- -------------- ------- - --- -------------------------------------------- ------------------------------ ----------------------------------------
在上面代码中，我们首先配置了 Toolbar 作为 Action 栏，然后获取了 TabLayout 和 ViewPager 的实例，利用 MyPagerAdapter 作为 ViewPager 的适配器，最后使用 TabLayout#setupWithViewPager 方法建立了两者之间的联动关系。
TabLayout 的变化方式
TabLayout 除了使用上述的滚动模式之外，还有许多其他的变化方式。
Fixed Tabs
Fixed Tabs 指定了 TabLayout 的 tabMode 为 fixed，使得标签栏中的标签固定在了屏幕中，标签数量比较多的话可以使用这种方式，最多支持 5 个选项。
// Fixed Tabs tabLayout.setTabMode(TabLayout.MODE_FIXED);
Scrollable Tabs
当屏幕宽度比较大的时候，Fixed Tabs 无法承载大量的选项，因此我们可以使用 Scrollable Tabs，TabLayout 的 tabMode 为 scrollable，这样即可展示出所有的选项，滑动时，选项也可以根据需要进行垂直或水平滑动。
// Scrollable Tabs tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
Icon Tabs
Icon Tabs 指的是在标签上添加图标，可以使用 setIcon() 方法将 Drawable 设置为标签。同时也可以使用图标及文本进行组合。在图标和文本组合的时候，TabLayout 初始的宽度可能会不够，我们可以通过为 TabLayout 设置宽度，使其滚动，来保证所有标签都能展示出来。
-- -------------------- ---- -------
-- ---- ----
-----------------------------------------------------------------
------------------------------------------------ -----
-----------------------------------------------------------------
------------------------------------------------ -----
------------- ---- - ----------------------
-- ----- -- -----
---------------------------------Custom View
有时候，我们需要更加灵活地进行标签的自定义，我们可以使用 setCustomView 方法将自定义的 View 设置为标签。
在使用 custom view 的时候，我们需要注意下，custom view 的使用方式是通过 layout_inflater 加载 xml 文件，并将 view 对象设置给 custom view 的成员变量即可。
// Custom View TabLayout.Tab customTab = tabLayout.newTab().setCustomView(R.layout.custom_tab_layout); ImageView icon = customTab.getCustomView().findViewById(R.id.icon); icon.setImageResource(R.drawable.ic_custom_tab); tabLayout.addTab(customTab);
在上述代码中，我们通过 setCustomView 方法指定了自定义标签的布局文件 custom_tab_layout.xml，然后通过 getCustomView 获取自定义视图的根布局，最后通过 ImageView.setImageResource() 方法设置了自定义标签的图标。
总结
通过本文的介绍，我们了解了 TabLayout 的实现方式和一些不同的变化效果。不同的 TabLayout 变化方式可以应对不同的设计需求，为用户提供舒适的使用体验。
希望本文能有所帮助，对于需要了解和掌握 Material Design 中的组件，有一定的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64efe7d0f6b2d6eab39d1826