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

Я хочу реализовать шаблон "Гибкое пространство с перекрывающимся содержимым" из методов прокрутки Material Design, таких как в этом видео: Гибкое пространство с перекрывающимся содержимым 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, чтобы сделать это? ?


android android-collapsingtoolbarlayout android-design-library
person ianhanniballake    schedule 24.06.2015    source источник
comment
Я ищу противоположное, изображение внутри CollapsingToolbarLayout должно показывать еще несколько dps после панели инструментов и под NestedScrollView другого цвета!   -  person David    schedule 25.10.2017
comment
Я использовал FrameLayout, RelativeLayout, но фрагменты всегда перекрывались с помощью панели действий. Решением было использование NestedScrollView в качестве родителя для всех фрагментов. Спасибо!   -  person JCarlosR    schedule 30.03.2018

Ответы (2)


arrow_upward
153
arrow_downward

Фактически, наложение представления прокрутки с помощью AppBarLayout является включенной функцией Библиотека поддержки дизайна Android: вы можете использовать атрибут 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", так как атрибут использует Behavior (а не View или Parent ViewGroup, к которым обычно применяются атрибуты), отсюда и префикс behavior_.

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

NestedScrollView scrollView = ...
CoordinatorLayout.LayoutParams params = 
    (CoordinatorLayout.LayoutParams) scrollView.getLayoutParams();
AppBarLayout.ScrollingViewBehavior behavior =
    (AppBarLayout.ScrollingViewBehavior) params.getBehavior();
behavior.setOverlayTop(128); // Note: in pixels
person ianhanniballake    schedule 24.06.2015
comment
Это почти работает для меня, за исключением того, что мой RecyclerView (на котором я установил layout_behavior и behavior_overlapTop) оказывается позади своего родственного AppBarLayout. Я попытался изменить порядок в XML, но, похоже, это не имеет никакого эффекта. Есть идеи, в чем может быть проблема? - person Vicky Chijwani; 23.07.2015
comment
Когда я отключаю прокрутку (удаляя атрибуты app:layout_scrollFlags) - behavior_overlapTop не работает - NestedScrollView переходит в AppBarLayout. Вы знаете, как это исправить? - person Pavel Biryukov; 30.07.2015
comment
@PavelBiryukov, что ты сделал для API ‹ 21? - person Vicky Chijwani; 02.08.2015
comment
У меня есть высота - она ​​отлично работает на обоих :) библиотека appcompat теперь обрабатывает android:elevation ‹android.support.v4.widget.NestedScrollView android:layout_width=match_parent android:layout_height=match_parent android:layout_gravity=fill_vertical app:behavior_overlapTop=32dp app: layout_behavior=@string/appbar_scrolling_view_behavior android:elevation=5dp › - person Pavel Biryukov; 03.08.2015
comment
Здравствуйте, у меня не работает. Я получаю error no resource identifier found for attribute behavior_overlayTop - person Jack Lynx; 17.01.2016
comment
@Lynx - как ни странно, это behavior_overlapTop, но setOverlayTop() - перекрытие или перекрытие. Убедитесь, что вы используете правильный! - person ianhanniballake; 17.01.2016

arrow_upward
21
arrow_downward

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

Как это:

CollapsingToolbarLayout.setTitleEnabled(false);

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

app:titleEnabled="false"

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

person G.deWit    schedule 19.10.2015
comment
Вы можете поместить достаточно большое значение expandTitleMarginBottom в CollapsingToolbarLayout, чтобы избежать перекрытия заголовка при расширении. - person WindRider; 19.11.2015