CollapsingToolbarLayout расширяется только тогда, когда наверху - PullRequest
Новая
       60

CollapsingToolbarLayout расширяется только тогда, когда наверху

8 голосов
/ 22 марта 2019

У меня есть некоторые проблемы с AppBarLayout и CollapsingToolbarLayout. Вот что сейчас происходит:

https://www.youtube.com/watch?v=z4yD8rmjSjU

Прокручивание вниз - это именно то, чего я хочу. Однако, когда я снова прокручиваю вверх, оранжевая полоса должна появиться немедленно (что она делает), но я хочу, чтобы ImageView начал появляться только тогда, когда пользователь прокрутил до самого верха. Может ли кто-нибудь помочь мне добиться этого эффекта?

Это мой макет xml: 

<android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed">

        <TextView
                android:text="ImageView"
                android:textSize="20sp"
                android:textColor="@android:color/white"
                android:gravity="center"
                android:layout_marginTop="56dp"
                android:layout_width="match_parent"
                android:layout_height="145dp"
                app:layout_collapseMode="parallax"
                android:background="#444"/>

        <TextView
                android:text="Top bar"
                android:textColor="@android:color/white"
                android:gravity="center_vertical"
                android:paddingStart="16dp"
                android:paddingEnd="16dp"
                android:layout_width="match_parent"
                android:layout_height="56dp"
                android:background="#ff8000"
                app:layout_collapseMode="pin"/>

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

    <TextView
            android:text="Bottom bar"
            android:gravity="center_vertical"
            android:paddingStart="16dp"
            android:paddingEnd="16dp"
            android:layout_width="match_parent"
            android:textColor="@android:color/black"
            android:layout_height="50dp"
            android:background="#ddd"
            app:layout_scrollFlags="enterAlways"/>


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

<include layout="@layout/content_scrolling"/>

Ответы [ 5 ]

4 голосов
/ 25 марта 2019

В итоге я переместил оранжевую полосу из CollapsingToolbarLayout и установил OnOffsetChangedListener, который изменяет translationY верхней полосы на AppBarLayout.

Настройка OnOffsetChangedListener: 

app_bar.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appbar, offset ->

    topbar.translationY = Math.min(image.height.toFloat(),  - offset.toFloat())

})

Компоновка: 

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

    <TextView
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:id="@+id/topbar"
            app:elevation="8dp"
            android:elevation="8dp"
            android:background="#ff8000"
            android:gravity="center_vertical"
            android:paddingStart="16dp"
            android:paddingEnd="16dp"
            android:text="Top bar"
            android:textColor="@android:color/white"
            app:layout_scrollFlags="scroll|enterAlways" />

    <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

        <TextView
                android:layout_width="match_parent"
                android:layout_height="145dp"
                android:background="#444"
                android:gravity="center"
                android:text="ImageView"
                android:textColor="@android:color/white"
                android:textSize="20sp"
                app:layout_collapseMode="parallax" />


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

    <TextView
            android:id="@+id/bottombar"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            app:elevation="8dp"
            android:elevation="8dp"
            android:background="#ddd"
            android:gravity="center_vertical"
            android:paddingStart="16dp"
            android:paddingEnd="16dp"
            android:text="Bottom bar"
            android:textColor="@android:color/black"
            app:layout_scrollFlags="enterAlways" />
</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <include layout="@layout/content_scrolling"/>

</android.support.v4.widget.NestedScrollView>

4 голосов
/ 25 марта 2019

Настройка поведения CoordinatorLayout - сложная задача.Вы хотите, чтобы оранжевая полоса появилась сразу, а ImageView - только после прокрутки содержимого вверх, но эти представления принадлежат одному из родителей CollapsingToolbarLayout, и оба получают или поведение, которое вы сейчас имеете или наоборот с флагом enterAlwaysCollapsed.Я не вижу способа отделить поведение для этих представлений, не связавшись с Java-API CoordinatorLayout / CollapsingToolbarLayout.

Если более простое поведение не является вариантом, и никто здесь не указывает на простое решение, я предлагаю попробовать относительно новое MotionLayout вместо того, чтобы танцевать с CollapsingToolbarLayout внутренностями, вы сэкономите много времени в конце.Это будет немного сложнее в начале, но это обеспечивает четкие способы настройки.Вот очень хорошая статья , которая показывает, как построить UX, похожий на CoordinatorLayout, но с использованием MotionLayout.И вторая часть этой статьи с некоторыми дополнительными настройками.

0 голосов
/ 25 марта 2019

Попробуйте это @ Mark.I получил свиток, который вы показали в видео 

<android.support.design.widget.CoordinatorLayout 
 xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="145dp"
            android:layout_marginTop="56dp"
            android:background="#444"
            android:gravity="center"
            android:text="ImageView"
            android:textColor="@android:color/white"
            android:textSize="20sp"
            app:layout_collapseMode="parallax" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:background="#ff8000"
            android:gravity="center_vertical"
            android:paddingStart="16dp"
            android:paddingEnd="16dp"
            android:text="Top bar"
            android:textColor="@android:color/white"
            app:layout_collapseMode="pin" />

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#ddd"
        android:gravity="center_vertical"
        android:paddingStart="16dp"
        android:paddingEnd="16dp"
        android:text="Bottom bar"
        android:textColor="@android:color/black"
        app:layout_scrollFlags="enterAlways" />
</android.support.design.widget.AppBarLayout>


<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <include layout="@layout/content_scrolling"/>

</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
0 голосов
/ 25 марта 2019

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

 app_bar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {

        if (Math.abs(verticalOffset)-appBarLayout.getTotalScrollRange() == 0)
        {
            //  Collapsed


        }
        else
        {
            //Expanded


        }
    }
});
0 голосов
/ 24 марта 2019

Существует множество эффектов на поведение при прокрутке, которые могут быть достигнуты путем установки различных layout_scrollFlags.В вашем случае, я думаю, что вы хотите флаг enterAlwaysCollapsed.Добавьте флаг вместе с enterAlways вместо замены всех флагов.

scroll сделает прокрутку панели инструментов, как и остальное содержимое, enterAlways сделает панель инструментов И остальную часть CollapsingToolbarLayout чтобы вернуться сразу после прокрутки вверх, тогда как enterAlwaysCollapsed расширяет CollapsingToolbarLayout только после прокрутки страницы до самого верха.

Здесь это эффект, который enterAlwaysCollapsed достигает.

...