Перекриття подання прокрутки за допомогою AppBarLayout


103

Я хочу реалізувати схему "Гнучкий простір із вмістом, що перекривається" з методів прокрутки "Матеріал дизайну" , наприклад, у цьому відео : Гнучка область з 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>

Чи є простий спосіб досягти цього за допомогою бібліотеки дизайну? Або мені потрібно створити власну координаторну розкладку. Поведінка для цього?


Я шукаю протилежність, зображення всередині CollapsingToolbarLayout повинно показувати ще кілька крапок на секунду після панелі інструментів і нижче NestedScrollView іншим кольором!
Девід

Я використовував FrameLayout, RelativeLayout, але фрагменти завжди перекривались панеллю дій. Використання NestedScrollView в якості батьків для всіх фрагментів було рішенням. Дякую!
JCarlosR

Відповіді:


148

Насправді перегляд прокручуваного виду за допомогою 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"як саме Поведінка використовує атрибут (а не 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

1
Це майже працює для мене, за винятком того, що мій RecyclerView (на який я встановив layout_behaviorі behavior_overlapTop) закінчується за його братами AppBarLayout. Я спробував переключити замовлення в XML, але, схоже, це не має ніякого ефекту. Будь-які ідеї, що може бути проблемою?
Vicky Chijwani

1
Коли я відключаю прокрутку (видаляючи додаток: атрибути layout_scrollFlags) - поведінка_overlapTop не працює - NestedScrollView підпадає під AppBarLayout. Ви знаєте, як це виправити?
Павло Бірюков

@PavelBiryukov що ти робив для API <21?
Vicky Chijwani

1
Привіт, це не працює для мене. Я отримуюerror no resource identifier found for attribute behavior_overlayTop
Джек Лінкс

1
@Lynx - досить заплутано, це behavior_overlapTopале setOverlayTop()- перекриття проти накладання. Переконайтесь, що ви використовуєте правильний!
ianhanniballake

21

На додаток до прийнятої відповіді , зателефонуйте setTitleEnabled (помилково) на свій CollapsingToolbarLayout, щоб заголовок залишився фіксованим вгорі, як у прикладі.

Подобається це:

CollapsingToolbarLayout.setTitleEnabled(false);

або додавши його в xml так:

app:titleEnabled="false"

В іншому випадку заголовок може зникнути за вмістом, що перекривається, якщо, звичайно, це не потрібна вам поведінка.


2
Ви можете поставити досить великий розширенийTitleMarginBottom до CollapsingToolbarLayout, щоб уникнути перекриття заголовка при розгортанні.
WindRider
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.