使用AppBarLayout重叠滚动视图

Question

我想从Material设计滚动技术中实现"具有重叠内容的灵活空间"模式,例如在此视频中:

我的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设计支持库的一个附带功能:您可以使用app:behavior_overlapTop您NestedScrollView(或使用ScrollingViewBehavior的任何View )上的属性来设置重叠量:

<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

除了接受的答案之外,在CollapsingToolbarLayout上调用setTitleEnabled(false)以使标题保持固定在顶部,如示例中所示.

像这样:

CollapsingToolbarLayout.setTitleEnabled(false);

或者将其添加到xml中,如下所示:

app:titleEnabled="false"

否则标题可能会在重叠内容后面消失,除非当然,这就是你想要的行为.