Material Design 中使用 ViewPager 和 TabLayout 实现导航栏教程

阅读时长 11 分钟读完

介绍

Material Design 是一种由 Google 推出的全新设计语言,其旨在提供一种全新的设计方法,解决跨平台应用的一些问题。在 Material Design 中,导航栏是一个非常重要的组件,可以在应用中帮助用户登录,切换页面等操作。在本文中,我们将通过 ViewPager 和 TabLayout 的使用,来实现一个 Material Design 风格的导航栏。

准备工作

在开始之前,请确保你已经安装了以下的环境和工具:

  • JDK 1.8 或以上版本
  • Android Studio 3.0 或以上版本

实现

创建项目

在 Android Studio 中,创建一个新的项目,并选择一个你喜欢的应用名称和图标。本文的示例代码中,我们将应用名设置为 “MaterialDesignNavigation”,并使用默认的图标。

创建布局

我们需要在项目中创建一个布局文件,用于展示导航栏。在 res/layout 目录下创建一个名为 activity_main.xml 的文件,代码如下:

-- -------------------- ---- -------
----- ------------- ------------------
---------------------------------------------------- 
----------------------------------------------------------
---------------------------------------------------
-----------------------------------
-------------------------------------

------------------------------------------------
    -----------------------------------
    ------------------------------------
    ----------------------------------------------------------------------

    ----------------------------------
        -----------------------------------
        -------------------------------------------
        ---------------------------------------
        ---------------------------------------------------------------

    -------------------------------------------
        ----------------------------
        -----------------------------------
        ------------------------------------
        -------------------
        -----------------------

--------------------------------------------------

------------------------------------
    ----------------------------
    -----------------------------------
    ------------------------------------
    --------------------------------------------------------------

------------------------------------------------------

代码中包含两个组件,一个是 AppBarLayout,另一个是 ViewPager。其中 AppBarLayout 是包含导航栏的容器,我们在这个容器中放置了一个 Toolbar 和一个 TabLayout,ViewPager 是一个可以侧滑切换页面的组件。

创建 Fragment

为了实现侧滑切换页面的效果,我们需要在项目中创建一些 Fragments。在本文中,我们创建三个 Fragments,分别用于展示 “首页”,“消息”和 “我的” 三个页面的内容。在 res/layout 目录下创建三个布局文件,代码分别如下:

home_fragment.xml

-- -------------------- ---- -------
------------- ----------------------------------------------------------
    -----------------------------------
    ------------------------------------
    ------------------------
    -------------------------------

    ---------
        -----------------------------------
        ------------------------------------
        ----------------------------------

---------------

message_fragment.xml

-- -------------------- ---- -------
------------- ----------------------------------------------------------
    -----------------------------------
    ------------------------------------
    ------------------------
    -------------------------------

    ---------
        -----------------------------------
        ------------------------------------
        -------------------------------------

---------------

profile_fragment.xml

-- -------------------- ---- -------
------------- ----------------------------------------------------------
    -----------------------------------
    ------------------------------------
    ------------------------
    -------------------------------

    ---------
        -----------------------------------
        ------------------------------------
        -------------------------------------

---------------

在代码中,我们只是简单地在每个 Fragment 中放置了一个 TextView,以便于快速展示每个页面。

创建 Adapter

为了实现 ViewPager 的效果,我们需要在项目中创建一个 Adapter,并将所有的 Fragment 加入到 Adapter 中。在本文中,我们创建了一个名为 NavigationPagerAdapter 的 Adapter,代码如下:

-- -------------------- ---- -------
------ ----- ---------------------- ------- -------------------- -

    ------- -------------- -----------
    ------- ------------ --------

    ------ -------------------------------------- --- -------------- ---------- ------------ ------- -
        --------- ---------------------------------------
        ---------- - ----------
        ------- - -------
    -

    --------
    ---------
    ------ -------- ----------- --------- -
        ------ -------------------------
    -

    ---------
    ------ --- ---------- -
        ------ ------------------
    -

    ---------
    ---------
    ------ ------------ ---------------- --------- -
        ------ ----------------------
    -

-

在代码中,我们需要创建一个 List 用于存储所有的 Fragments,另外一个 List 存储 TabLayout 中每个 Tab 的标题。在 getItem() 方法中,我们根据位置获取对应的 Fragment,getCount() 返回总的 Fragment 数量,getPageTitle() 返回对应的标题。由于我们只展示三个 Fragment,因此 getCount() 固定返回 3。注意,在新版本的 Android Studio 中,FragmentPagerAdapter 的构造方法已经不推荐使用,我们建议使用特定的 FragmentStatePagerAdapter,这可以更好地处理 Fragment 的生命周期。

设置导航栏

在 MainActivity 中,我们需要绑定所有的组件,并使用 NavigationPagerAdapter 将所有的 Fragment 加入到 ViewPager 中。代码如下:

-- -------------------- ---- -------
------ ----- ------------ ------- ----------------- -

    ------- --------- -----------
    ------- --------- -----------

    ---------
    --------- ---- --------------- ------------------- -
        -----------------------------------
        ---------------------------------------

        ---------- - ------------------------------
        ---------- - ------------------------------

        -------------- --------- - --- --------------
        ----------------- ----------------
        ----------------- -------------------
        ----------------- -------------------

        ------------ ------ - --- --------------
        ------------------------------------------
        ---------------------------------------------
        ---------------------------------------------

        ---------------------- ------- - --- --------------------------------------------------- ---------- --------
        -------------------------------
        ------------------------------------------

    -
-

在代码中,我们首先获取了 TabLayout 和 ViewPager 的实例,然后创建了一个包含所有 Fragment 的 List,在创建一个包含所有 Tab 标题的 List。最后,我们创建一个 NavigationPagerAdapter 并将其绑定到 ViewPager 上,并在 TabLayout 中设置 ViewPager。

效果展示

运行应用,效果如下图所示:

至此,我们已经成功地实现了一个 Material Design 风格的导航栏!

总结

在本文中,我们学习了如何使用 ViewPager 和 TabLayout 组件,在 Android 应用中实现一个 Material Design 风格的导航栏。希望本文能够解决您在应用开发中的问题,指导您的学习和工作。示例代码已上传到 Github,欢迎下载和学习。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/651f7e2695b1f8cacd70c27a

纠错
反馈