与 AppBarLayout 重叠滚动视图

Posted 2023-02-23

【中文标题】与 AppBarLayout 重叠滚动视图

【英文标题】：Overlap scrolling view with AppBarLayout

【发布时间】：2015-09-11 09:28:05

【问题描述】：

我想从Material design scrolling techniques 中实现“具有重叠内容的灵活空间”模式，例如在this video 中：

我的 XML 布局现在看起来像：

<android.support.design.widget.CoordinatorLayout 
    android:layout_
    android:layout_>

  <android.support.design.widget.AppBarLayout
      android:layout_
      android:layout_
      android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_
        android:layout_
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

      <android.support.v7.widget.Toolbar
          android:layout_
          android:layout_
          app:layout_collapseMode="pin"/>
    </android.support.design.widget.CollapsingToolbarLayout>
  </android.support.design.widget.AppBarLayout>

  <android.support.v4.widget.NestedScrollView
      android:layout_
      android:layout_
      app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <LinearLayout
        android:layout_
        android:layout_
        android:orientation="vertical">
      <....>
    </LinearLayout>
  </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

是否有使用设计库的简单方法来完成此任务？还是我必须建立一个自定义的CoordinatorLayout.Behavior 才能做到这一点？

【问题讨论】：

我正在寻找相反的结果，CollapsingToolbarLayout 内的图像应该在工具栏之后和 NestedScrollView 下方以另一种颜色显示更多 dps！

我使用的是 FrameLayout、RelativeLayout 但片段总是与 actionBar 重叠。解决方案是使用 NestedScrollView 作为所有片段的父级。谢谢！

【参考方案1】：

事实上，用 AppBarLayout 覆盖滚动视图是 Android Design Support Library 的一个包含功能：您可以使用 NestedScrollView（或使用 ScrollingViewBehavior 的任何视图）上的 app:behavior_overlapTop 属性来设置重叠量：

<android.support.v4.widget.NestedScrollView
    android:layout_
    android:layout_
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    app:behavior_overlapTop="64dp">

请注意app:behavior_overlapTop 仅适用于具有app:layout_behavior="@string/appbar_scrolling_view_behavior" 的视图，因为它是使用该属性的行为（不是视图或父视图组，因为属性通常适用于），因此behavior_ 前缀.

或者通过setOverlayTop()以编程方式设置：

NestedScrollView scrollView = ...
CoordinatorLayout.LayoutParams params = 
    (CoordinatorLayout.LayoutParams) scrollView.getLayoutParams();
AppBarLayout.ScrollingViewBehavior behavior =
    (AppBarLayout.ScrollingViewBehavior) params.getBehavior();
behavior.setOverlayTop(128); // Note: in pixels

【讨论】：

这几乎对我有用，除了我的 RecyclerView（我在其上设置了 layout_behavior 和 behavior_overlapTop）最终在其兄弟 AppBarLayout 之后。我尝试在 XML 中切换顺序，但似乎没有任何效果。任何想法可能是什么问题？

当我禁用滚动（删除 app:layout_scrollFlags 属性）时 - behavior_overlapTop 不起作用 - NestedScrollView 位于 AppBarLayout 下。你知道如何解决这个问题吗？

@PavelBiryukov 你为 API

您好，它对我不起作用。我收到error no resource identifier found for attribute behavior_overlayTop

@Lynx - 令人困惑的是，它是 behavior_overlapTop 但 setOverlayTop() - 重叠与重叠。确保您使用的是正确的！

【参考方案2】：

除了accepted answer，在 CollapsingToolbarLayout 上调用 setTitleEnabled(false) 以使标题固定在示例中的顶部。

像这样：

CollapsingToolbarLayout.setTitleEnabled(false);

或者像这样在 xml 中添加它：

app:titleEnabled="false"

否则标题可能会在重叠内容后面消失，当然，除非这是您想要的行为。

【讨论】：

可以在CollapsingToolbarLayout中放一个足够大的expandedTitleMarginBottom，避免展开时标题重叠。