Android Material Design 中使用 CoordinatorLayout 实现联动效果

阅读时长 4 分钟读完

概述

在 Android Material Design 中使用 CoordinatorLayout 可以非常方便地实现各种视图之间的联动效果。从实现悬浮按钮的自动隐藏到实现 Toolbar 和 ViewPager 的联动,都可以通过 CoordinatorLayout 实现。

本篇文章主要介绍如何使用 CoordinatorLayout 实现联动效果,对于每个具体的联动效果,都会给出相应的代码示例和详细解释。

实现悬浮按钮的自动隐藏

悬浮按钮是一种常用的交互方式,但是在一些情况下,需要在列表滚动的时候自动隐藏悬浮按钮,以保证页面的整洁。使用 CoordinatorLayout 实现悬浮按钮的自动隐藏非常简单,只需要给悬浮按钮添加一个 behavior 属性即可。

注意,需要在布局文件的根节点添加 xmlns:app="http://schemas.android.com/apk/res-auto" 命名空间,否则 layout_behavior 属性无法使用。

实现 Toolbar 和 ViewPager 的联动

当一个界面需要使用 ViewPager 来展示不同的子页面时,往往需要在顶部添加一个 Toolbar 用于导航。使用 CoordinatorLayout 实现 Toolbar 和 ViewPager 的联动也非常简单,只需要给 ViewPager 添加一个 behavior 属性即可。

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

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

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

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

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

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

注意,这里需要使用 AppBarLayout 作为顶部导航的容器,并且需要在 Toolbar 中添加 app:layout_scrollFlags="scroll|enterAlways" 属性。layout_scrollFlags 属性用于指定当列表滚动时 Toolbar 的行为。

总结

本篇文章介绍了如何使用 CoordinatorLayout 实现 Android Material Design 中的联动效果。通过实现悬浮按钮的自动隐藏和 Toolbar 和 ViewPager 的联动,展示了 CoordinatorLayout 的基本用法。这些联动效果都可以极大地提升应用程序的用户体验,应该在实际开发中得到广泛应用。

示例代码

完整的示例代码可以从下面的链接中下载:

https://github.com/example/example

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

纠错
反馈