在移动端应用程序中，TabLayout 是一种非常常见的 UI 组件。它可以帮助用户快速地浏览和访问不同的功能模块，提高用户体验。而带有角标的 TabLayout 可以展示一些重要的数字或者标记，更加直观地提醒用户相关信息。在本文中，我们将介绍如何使用 Material Design 实现带有角标的 TabLayout。
什么是 Material Design
Material Design 是 Google 推出的一种全新的设计语言，旨在为移动端和 Web 界面提供一致的外观和用户体验。它具有简洁、明确、有层次感、有意义的动画效果等特点，可以帮助开发人员快速构建高质量的应用程序。
如何实现带有角标的 TabLayout
在 Android 平台上，我们可以使用 TabLayout 和 ViewPager 组合来实现带有角标的 TabLayout。其中，TabLayout 用于展示不同的标签页，ViewPager 用于展示每个标签页的内容。
1. 添加依赖
我们首先需要在项目的 build.gradle 文件中添加以下依赖：
implementation 'com.google.android.material:material:1.2.0-alpha03'
2. 布局文件
下面是一个简单的布局文件示例，其中包含一个 TabLayout 和一个 ViewPager：
-- -------------------- ---- -------
-------------------------------------------
----------------------------
-----------------------------------
------------------------------------
-------------------
-----------------------
------------------------------------
----------------------------
-----------------------------------
--------------------------------------3. 创建 TabLayout 和 ViewPager
在 Activity 或 Fragment 中，我们需要先创建 TabLayout 和 ViewPager：
TabLayout tabLayout = findViewById(R.id.tab_layout); ViewPager viewPager = findViewById(R.id.view_pager); // 设置 ViewPager 的适配器 viewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager())); // 将 TabLayout 和 ViewPager 关联起来 tabLayout.setupWithViewPager(viewPager);
其中，MyPagerAdapter 是一个继承自 FragmentPagerAdapter 的适配器类，用于管理每个标签页的内容。
4. 自定义 TabLayout 样式
接下来，我们需要自定义 TabLayout 的样式，以实现带有角标的效果。
首先，我们可以在 res/values 文件夹下创建一个名为 tab_layout.xml 的样式文件，定义 TabLayout 的颜色和字体大小等属性：
-- -------------------- ---- -------
------ ------------------ ---------------------------------------------
----- --------------------------------------------------
----- -----------------------------------------------------
----- ----------------------------------------------------------
--------
------ -------------------------- -----------------------------------
----- -----------------------------------
----- ---------------------------------------------------
----- ------------------------------
--------然后，在布局文件中将 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"
style="@style/MyTabLayout"/>5. 实现带有角标的效果
最后，我们需要实现带有角标的效果。在 TabLayout 中，我们可以通过 TabLayout.Tab.setCustomView() 方法设置每个标签页的自定义视图。我们可以在自定义视图中添加一个 TextView，用于展示角标的数字或标记。
TabLayout.Tab tab = tabLayout.newTab();
tab.setCustomView(R.layout.tab_layout_item);
TextView badgeView = tab.getCustomView().findViewById(R.id.badge_view);
badgeView.setText("3");
tabLayout.addTab(tab);其中，tab_layout_item.xml 是一个自定义视图的布局文件，包含一个 TextView 和一个 ImageView，用于展示标签页的图标和角标的数字或标记：
-- -------------------- ---- -------
------------- ----------------------------------------------------------
-----------------------------------
------------------------------------
------------------------------
-------------------------
----------
---------------------------
-----------------------------------
------------------------------------
---------------------------------
---------
----------------------------
-----------------------------------
------------------------------------
----------------------------------------
---------------------------------------
---------------------
-----------------------
--------------------------------
---------------------------------
---------------------------
---------------其中，badge_bg.xml 是一个自定义的背景文件，用于展示角标的背景颜色和形状：
-- -------------------- ---- -------
------ ----------------------------------------------------------
---------------------
------ ------------------------------------
-----
--------------------
-----------------------
--------6. 完整示例代码
下面是一个完整的示例代码，用于实现带有角标的 TabLayout：
-- -------------------- ---- -------
------ ----- ------------ ------- ----------------- -
------- --------- ----------
------- --------- ----------
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
--------- - ------------------------------
--------- - ------------------------------
-- -- --------- ----
------------------------ ---------------------------------------------
-- - --------- - --------- ----
----------------------------------------
-- -----
--- ---- - - -- - - -- ---- -
------------- --- - -------------------
--------------------------------------------
-------- --------- - --------------------------------------------------
---------------------------------- - ----
----------------------
-
-
------- ------ ----- -------------- ------- -------------------- -
------ ------------------------------ --- -
----------
-
---------
------ -------- ----------- --------- -
------ --- -------------
-
---------
------ --- ---------- -
------ --
-
-
------ ------ ----- ---------- ------- -------- -
---------
---------
------ ---- --------------------- -------------- --------- --------- --------- ---------- --------- ------ ------------------- -
------ -------------------------------------- ---------- -------
-
-
-总结
在本文中，我们介绍了如何使用 Material Design 实现带有角标的 TabLayout。通过自定义 TabLayout 样式和设置每个标签页的自定义视图，我们可以轻松实现带有角标的效果。希望本文对于您学习和开发移动端应用程序有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66013c9ad10417a222c67381