安卓 Material Design 实现简单的 viewpager+TabLayout

在安卓应用开发中,TabLayout 和 ViewPager 是很常见的组件,它们可以方便地实现多个页面之间的切换。而 Material Design 是 Google 提出的一种设计风格,也被广泛应用于安卓应用中。本文将介绍如何使用 Material Design 风格的 TabLayout 和 ViewPager 实现简单的页面切换效果。

实现步骤

1. 添加依赖

在项目的 build.gradle 文件中添加以下依赖:

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

2. 布局文件

在布局文件中添加 TabLayout 和 ViewPager,如下所示:

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

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

其中,TabLayout 的属性 tabGravitytabMode 分别指定了 Tab 的排列方式和样式,tabSelectedTextColortabTextColor 分别指定了选中和未选中的 Tab 的文本颜色。

3. 创建 Fragment

创建多个 Fragment,每个 Fragment 对应一个页面,如下所示:

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

4. 创建 Adapter

创建 Adapter,将多个 Fragment 添加到 ViewPager 中,如下所示:

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

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

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

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

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

5. 设置 Adapter

在 Activity 中设置 Adapter,将 Adapter 设置给 ViewPager,如下所示:

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

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

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

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

至此,一个简单的 TabLayout 和 ViewPager 的实现就完成了。

示例代码

以下是完整的示例代码:

activity_main.xml

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

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

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

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

Fragment1.java

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

Fragment2.java

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

Fragment3.java

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

MyPagerAdapter.java

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

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

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

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

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

MainActivity.java

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

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

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

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

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

总结

本文介绍了如何使用安卓 Material Design 风格的 TabLayout 和 ViewPager 实现简单的页面切换效果。通过本文的学习,读者可以掌握如何使用这两个组件,为安卓应用的开发提供了很好的参考。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/6604901ad10417a2221c6514