Material Design 是 Google 推出的一种全新的设计语言，旨在为用户提供更加直观、更加自然的视觉体验。选项卡是 Material Design 中常用的一种控件，可以让用户快速切换页面内容。本文将详细介绍如何在 Material Design 中使用选项卡控件实现页面选项卡效果，并提供示例代码。
选项卡控件的基本用法
选项卡控件可以通过 TabLayout 类来实现。在布局文件中添加如下代码：
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill" />其中，tabMode 属性用于设置选项卡的模式，可选值包括 fixed 和 scrollable。fixed 模式下，所有选项卡的宽度相同，可以在屏幕内全部显示；scrollable 模式下，选项卡的宽度根据内容自适应，可以通过滑动来查看所有选项卡。tabGravity 属性用于设置选项卡的对齐方式，可选值包括 fill 和 center。fill 模式下，选项卡填充整个 TabLayout 区域；center 模式下，选项卡居中显示。
在 Java 代码中，需要通过 TabLayout 对象来添加选项卡。可以通过 addTab() 方法来添加一个选项卡：
TabLayout tabLayout = findViewById(R.id.tab_layout);
tabLayout.addTab(tabLayout.newTab().setText("选项卡1"));
tabLayout.addTab(tabLayout.newTab().setText("选项卡2"));
tabLayout.addTab(tabLayout.newTab().setText("选项卡3"));其中，setText() 方法用于设置选项卡的文本内容。可以通过 setSelectedTabIndicatorColor() 方法来设置选中选项卡的指示器颜色：
tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FF0000"));选项卡控件的高级用法
除了基本用法外，选项卡控件还提供了许多高级用法，可以满足更加复杂的需求。下面介绍几种常用的高级用法。
自定义选项卡样式
选项卡控件支持自定义选项卡的样式，可以通过 TabLayout.Tab 类来实现。在 Java 代码中，可以通过 setCustomView() 方法来设置选项卡的自定义视图：
TabLayout.Tab tab = tabLayout.newTab(); tab.setCustomView(R.layout.custom_tab); tabLayout.addTab(tab);
其中，R.layout.custom_tab 是自定义视图的布局文件。在布局文件中，可以根据需求添加各种控件，例如图标、文字等。
选项卡的监听器
选项卡控件支持选项卡的监听器，可以在选项卡被选中或取消选中时执行相应的操作。在 Java 代码中，可以通过 addOnTabSelectedListener() 方法来添加选项卡的监听器：
-- -------------------- ---- -------
-------------------------------------- --------------------------------- -
---------
------ ---- --------------------------- ---- -
-- ------------
-
---------
------ ---- ----------------------------- ---- -
-- -------------
-
---------
------ ---- ----------------------------- ---- -
-- --------------
-
---ViewPager 与选项卡的结合使用
选项卡控件通常与 ViewPager 控件一起使用，可以通过滑动来切换页面内容。在 Java 代码中，需要先创建一个 ViewPager 对象，并设置对应的 PagerAdapter：
ViewPager viewPager = findViewById(R.id.view_pager); viewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));
其中，MyPagerAdapter 是一个自定义的 PagerAdapter 类，需要实现 getItem() 和 getCount() 方法。在 getItem() 方法中返回对应位置的 Fragment 对象，getCount() 方法返回 Fragment 的数量。
然后，需要将 ViewPager 控件与选项卡控件进行绑定，可以通过 setupWithViewPager() 方法来实现：
tabLayout.setupWithViewPager(viewPager);
示例代码
下面是一个完整的示例代码，实现了选项卡与 ViewPager 的结合使用：
-- -------------------- ---- -------
----------------------------------------------------
-----------------------------------
-------------------------------------
------------------------------------------------
-----------------------------------
-------------------------------------
-------------------------------------------
----------------------------
-----------------------------------
------------------------------------
-------------------
--------------------- --
--------------------------------------------------
------------------------------------
----------------------------
-----------------------------------
------------------------------------
------------------------------------------------------------ --
-------------------------------------------------------- -------------------- ---- -------
------ ----- ------------ ------- ----------------- -
------- --------- ----------
------- --------- ----------
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
--------- - ------------------------------
--------- - ------------------------------
------------------------ ---------------------------------------------
----------------------------------------
--------------------------------------------------
-------------------------------------------------------
-----------------------------------------------------------
-------------------------------------- --------------------------------- -
---------
------ ---- --------------------------- ---- -
--------------------------------------------
-
---------
------ ---- ----------------------------- ---- -
-
---------
------ ---- ----------------------------- ---- -
-
---
-
------- ------ ----- -------------- ------- -------------------- -
------ ------------------------------ --- -
----------
-
---------
------ -------- ----------- --------- -
------ ---------- -
---- --
------ --- ---------------
---- --
------ --- --------------------
---- --
------ --- ------------------------
--------
------ -----
-
-
---------
------ --- ---------- -
------ --
-
-
------ ------ ----- ------------ ------- -------- -
---------
------ ---- --------------------------- --------- --------- ---------- ------ ------------------- -
---- ---- - ---------------------------------------- ---------- -------
------ -----
-
-
------ ------ ----- ----------------- ------- -------- -
---------
------ ---- --------------------------- --------- --------- ---------- ------ ------------------- -
---- ---- - --------------------------------------------- ---------- -------
------ -----
-
-
------ ------ ----- --------------------- ------- -------- -
---------
------ ---- --------------------------- --------- --------- ---------- ------ ------------------- -
---- ---- - ------------------------------------------------- ---------- -------
------ -----
-
-
-其中，R.layout.fragment_home、R.layout.fragment_dashboard 和 R.layout.fragment_notifications 是自定义的 Fragment 布局文件，可以根据需求添加各种控件。R.drawable.ic_home、R.drawable.ic_dashboard 和 R.drawable.ic_notifications 是自定义的图标资源文件，可以根据需求替换。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67da4adda941bf7134230cd2
