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

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

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

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

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

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

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

Ответы

Ответ 1

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

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

app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"

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

android:minHeight="?attr/actionBarSize"

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

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

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

Предполагая, что 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>