CollapsingToolbarLayout и скрыть панель инструментов при прокрутке

Я пытаюсь создать комбинированный макет, используя CoordinatorLayout, а также CollapsingToolbarLayout.

В первом состоянии, когда мы находимся на самой верхней странице и еще не прокручивались, я хочу, чтобы панель инструментов расширилась, как показано ниже (да, я сделал это):

введите здесь описание изображения

Во втором состоянии, когда начинается прокрутка вниз, изображение и панель инструментов должны исчезнуть, как показано ниже (отображается только вкладка):

введите описание изображения здесь

И в последнем состоянии, когда я нахожусь в какой-то точке списка (но не в верхней части списка), я хочу начать прокрутку вверх, как только я начну прокручивать вверх, я хочу, чтобы панель инструментов (а не развернутая с изображением) была начните whowing, как показано ниже (если не дошел до вершины списка, изображение не будет отображаться, только панель инструментов):

введите описание изображения здесь

Мне удалось достичь первого состояния, но два других состояния проблематичны, поскольку после того, как панель инструментов будет реализована внутри CollapsingToolbarLayout, гибкость того, что я могу делать с ней за пределами компонента CollapsingToolbarLayout, не ясна. Я не могу скрыть панель инструментов, если я это сделаю, она будет отображаться только после того, как я достигну вершины.

В любом случае мой текущий XML (показанный ниже) находится в состоянии, в котором реализовано первое изображение, но как только я начинаю прокручивать вниз, панель инструментов остается наверху и не скрывается. Примечание: я должен сказать панели инструментов, чтобы она оставалась «закрепленной», потому что, если я этого не сделаю, информация внутри панели инструментов исчезнет, ​​и будет отображаться только пустая панель инструментов (это для другого сообщения, но все еще интересно узнать, почему это произошло?) .

вот мой текущий xml:

    <android.support.design.widget.CoordinatorLayout
    android:id="@+id/benefit_coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_material_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/main.collapsing"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            >

            <include
                android:id="@+id/toolbar_search_container"
                layout="@layout/search_box"
                android:layout_height="192dp"
                android:layout_width="match_parent"
                app:layout_collapseMode="parallax"

                />

            <include
                android:id="@+id/toolbar_benefit"
                layout="@layout/toolbar_main"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:contentScrim="?attr/colorPrimary"

                />

        </android.support.design.widget.CollapsingToolbarLayout>

        <android.support.design.widget.TabLayout
            android:id="@+id/benefit_tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/primaryColor"
            app:tabIndicatorColor="@color/accentColor"
            app:tabSelectedTextColor="@android:color/white"
            app:tabTextColor="@android:color/black"
            app:tabIndicatorHeight="4dp" />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/benefit_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    <include
        layout="@layout/floating_btn_benefits"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="16dp"
        />
</android.support.design.widget.CoordinatorLayou



Ответы (2)


Я исправил проблему, просто чтобы прояснить, я хотел, чтобы моя панель инструментов могла расширяться с изображением паралекса, когда оно достигнет вершины, но я также хотел, чтобы панель инструментов исчезла при прокрутке вниз и показывала себя снова (без изображения паралекса ) как только я прокручиваю вверх. эффект параллельного изображения должен отображаться только в том случае, если я дойду до вершины.

Итак, в основном решение состоит в том, чтобы изменить компонент CollapsingToolbarLayout со следующим атрибутом:

app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"

а также изменить компонент панели инструментов со следующим атрибутом

android:minHeight="?attr/actionBarSize"

Что касается моего изображения с эффектом паралекс (это мой toolbar_search_container), я не должен добавлять к нему никаких layout_scrollFlags.

Так почему это работает? Чтобы понять это, вам нужно знать, что такое enterAlwaysCollapsed, enterAlwaysCollapsed просмотры эффектов, которые добавили атрибут minHeight. это означает, что каждый дочерний элемент CollapsingToolbarLayout, у которого есть minHeight, будет затронут этим атрибутом. Так что моя панель инструментов будет работать.

enterAlwaysCollapsed определение атрибута простыми словами:

Предполагая, что enterAlways объявлен и вы указали minHeight, вы также можете указать enterAlwaysCollapsed. Когда используется этот параметр, ваш вид будет отображаться только на этой минимальной высоте. Только когда прокрутка достигнет самого верха, вид развернется на всю высоту ... "

Ну разве это не то, что мы хотим? (не отвечайте на этот реторический вопрос;))

Еще одна вещь, которую следует добавить, компонент параллакса (toolbar_search_container) зависит от панели инструментов для расширения, и поскольку панель инструментов будет расширяться только тогда, когда она достигнет вершины, все это просто отлично работает!

Новый код:

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/benefit_coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_material_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/main.collapsing"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
            >

            <include
                android:id="@+id/toolbar_search_container"
                layout="@layout/search_box"
                android:layout_height="192dp"
                android:layout_width="match_parent"
                app:layout_collapseMode="parallax"
                />

            <include
                android:id="@+id/toolbar_benefit"
                layout="@layout/toolbar_main"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:minHeight="?attr/actionBarSize"
                app:contentScrim="?attr/colorPrimary"
                app:layout_collapseMode="pin"
                android:fitsSystemWindows="true"
                />

        </android.support.design.widget.CollapsingToolbarLayout>

        <android.support.design.widget.TabLayout
            android:id="@+id/benefit_tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/primaryColor"
            app:tabIndicatorColor="@color/accentColor"
            app:tabSelectedTextColor="@android:color/white"
            app:tabTextColor="@android:color/black"
            app:tabIndicatorHeight="4dp" />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/benefit_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    <include
        layout="@layout/floating_btn_benefits"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="16dp"
        />
</android.support.design.widget.CoordinatorLayout>
person winter    schedule 04.02.2016
comment
Большое спасибо!!! Я нашел этот ответ оооочень сложным, потому что трудно объяснить проблему в Google. Я испробовал почти все возможности, но упустил использование ВСЕХ трех атрибутов. Должно дать знать ответ большему количеству людей !! - person Zijian Wang; 24.10.2016
comment
Я сделал, как вы сказали, но когда я прокручиваю вверх, мой CollapsingToolbarLayout не появляется, пока я не прокручу вверх. Вы можете что-нибудь подсказать? - person Sermilion; 11.02.2017
comment
Привет, зима! Не могли бы вы разместить здесь свой полный xml? Без ‹include› - Теги? Спасибо!!! - person romaneso; 07.04.2017
comment
Я искал это уже много лет. Спасибо, правда. Чтобы сделать его более плавным, добавьте snap scrollFlags, а также app: contentScrim для изменения цвета панели инструментов, когда она не полностью развернута. - person Dark Leonhart; 25.07.2017

Добавьте эту строку кода в свой CollapsingToolbarLayout

app:layout_scrollFlags="scroll|snap|enterAlways|enterAlwaysCollapsed"
person Kamal Panara    schedule 07.10.2020