概述
在 Android Material Design 中使用 CoordinatorLayout 可以非常方便地实现各种视图之间的联动效果。从实现悬浮按钮的自动隐藏到实现 Toolbar 和 ViewPager 的联动,都可以通过 CoordinatorLayout 实现。
本篇文章主要介绍如何使用 CoordinatorLayout 实现联动效果,对于每个具体的联动效果,都会给出相应的代码示例和详细解释。
实现悬浮按钮的自动隐藏
悬浮按钮是一种常用的交互方式,但是在一些情况下,需要在列表滚动的时候自动隐藏悬浮按钮,以保证页面的整洁。使用 CoordinatorLayout 实现悬浮按钮的自动隐藏非常简单,只需要给悬浮按钮添加一个 behavior 属性即可。
<android.support.design.widget.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:layout_margin="16dp" android:src="@drawable/ic_add_white_24dp" app:layout_behavior="android.support.design.widget.ScrollingViewBehavior" />
注意,需要在布局文件的根节点添加 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