使用 AppBarLayout 重叠滚动视图

Question

我想实现 Material design scrolling techniques, such as in this video 中的 'Flexible Space with overlapping content' 模式：

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

<android.support.design.widget.CoordinatorLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <android.support.design.widget.AppBarLayout
      android:layout_width="match_parent"
      android:layout_height="192dp"
      android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

      <android.support.v7.widget.Toolbar
          android:layout_height="?attr/actionBarSize"
          android:layout_width="match_parent"
          app:layout_collapseMode="pin"/>
    </android.support.design.widget.CollapsingToolbarLayout>
  </android.support.design.widget.AppBarLayout>

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

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

是否有使用设计库实现此目的的简单方法？还是我必须构建自定义 CoordinatorLayout.Behavior 才能执行此操作？

Answer 1

事实上，用 AppBarLayout 覆盖滚动视图是 Android Design Support Library: you can use the app:behavior_overlapTop attribute on your NestedScrollView (or any View using ScrollingViewBehavior) 设置重叠量的一个包含特性：

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    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

Answer 2

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

像这样：

CollapsingToolbarLayout.setTitleEnabled(false);

或像这样将其添加到 xml 中：

app:titleEnabled="false"

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

使用 AppBarLayout 重叠滚动视图

Overlap scrolling view with AppBarLayout

android

android-design-library

android-collapsingtoolbarlayout