Прокрутка прокрутки с помощью AppBarLayout

Я хочу реализовать шаблон "Гибкое пространство с перекрывающимся контентом" из технологий прокрутки материалов для дизайна, например это видео: Flexible Space with overlapping content GIF

Теперь мой 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, чтобы сделать это?

Ответы

Ответ 1

Фактически, наложение прокрутки с помощью AppBarLayout является включенной функцией Android Support Support Library: вы можете использовать app:behavior_overlapTop атрибут на вашем NestedScrollView (или любой вид с использованием 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", так как это поведение, которое использует этот атрибут (а не View или родительская группа просмотра, как обычно применяются атрибуты), поэтому префикс behavior_.

Или установите его программно с помощью setOverlayTop():

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

Ответ 2

В дополнение к принятому отвечу вызовите setTitleEnabled (false) на вашем CollapsingToolbarLayout, чтобы заголовок оставался фиксированным вверху, как в примере.

Вот так:

CollapsingToolbarLayout.setTitleEnabled(false);

или добавив его в xml следующим образом:

app:titleEnabled="false"

В противном случае заголовок может исчезнуть за перекрывающимся контентом, если, конечно, это поведение не требуется.