返回

CoordinatorLayout 中 Toolbar 下方动态添加视图的完整指南

Android

在 CoordinatorLayout 中 Toolbar 下方动态添加视图

引言

在 Android 开发中,CoordinatorLayout 是一种强大的布局,它允许我们将不同的视图排列在灵活且互动的布局中。CoordinatorLayout 提供了诸如滚动行为、嵌套滚动和布局依赖性等功能,使我们能够创建复杂的 UI 布局。

在本文中,我们将重点关注一个特定的用例:在 CoordinatorLayout 中 Toolbar 下方动态添加视图,同时保持 App Bar 的滚动行为。我们将深入探讨问题、解决方案并提供代码示例,以帮助您掌握这种高级技术。

遇到的问题

假设我们有一个 CoordinatorLayout,其中包含一个 Toolbar 和一个 FrameLayout 用来容纳 Fragment。我们希望动态地将列表视图添加到 FrameLayout 中,但我们遇到了一个问题:Toolbar 绘制在列表视图的顶部,破坏了 App Bar 的滚动行为。

解决问题的方案

为了解决这个问题,我们将使用 CoordinatorLayout 的嵌套滚动功能。嵌套滚动是一种允许不同视图响应用户滚动的手势并彼此协调滚动的方式。以下是解决步骤:

  1. 在 FrameLayout 中添加一个 NestedScrollView: 将 FrameLayout 包装在一个 NestedScrollView 中,这将启用嵌套滚动。

  2. 更新 Toolbar 的布局行为: 将 Toolbar 的 layout_behavior 属性更新为 app:layout_behavior="@string/appbar_scrolling_view_behavior",这将启用 Toolbar 的滚动行为。

代码示例

以下是更新后的布局 XML 代码示例:

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.v7.widget.Toolbar
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <FrameLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

结论

通过将 Toolbar 和 FrameLayout 包装在 NestedScrollView 中,并更新 Toolbar 的布局行为,我们能够解决问题并保持 App Bar 的滚动行为。嵌套滚动功能允许列表视图响应用户滚动,同时 Toolbar 根据 App Bar 的滚动进行滚动和折叠。

常见问题解答

1. 什么是 CoordinatorLayout?
CoordinatorLayout 是一种布局,它允许将不同视图排列在灵活且互动的布局中,并提供滚动行为、嵌套滚动和布局依赖性等功能。

2. 什么是嵌套滚动?
嵌套滚动是一种允许不同视图响应用户滚动手势并彼此协调滚动的方式。

3. 为什么在 FrameLayout 中添加 NestedScrollView?
在 FrameLayout 中添加 NestedScrollView 可启用嵌套滚动,允许列表视图响应用户滚动,从而触发 Toolbar 的滚动行为。

4. 为什么更新 Toolbar 的布局行为?
更新 Toolbar 的布局行为为 app:layout_behavior="@string/appbar_scrolling_view_behavior" 确保 Toolbar 仍然可以根据 App Bar 的滚动进行滚动和折叠。

5. 嵌套滚动的其他应用是什么?
嵌套滚动可用于创建复杂的高级 UI 布局,例如具有可滚动列表的侧边导航菜单、带有可折叠标题的列表,或具有动画效果的滚动内容。