Анимация логотипа вместе со сворачивающейся панелью инструментов в CoordinatorLayout

Я хочу реализовать складную панель инструментов с логотипом следующим образом:

  1. Гибкое пространство с перекрывающимся содержимым, например показано здесь (это уже есть);
  2. Параллаксный паттерн в этом пространстве, который закрашивается сплошным цветом (это тоже есть)
  3. Горизонтально центрированный логотип, который должен отображаться прямо над содержимым, но плавать вверх при сворачивании панели инструментов: mockup здесь должно быть что-то вроде листьев Песто (не обязательно с изменяемым размером, но это было бы плюсом): in motion

Вот мой макет:

<android.support.design.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="192dp"
            android:fitsSystemWindows="true"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

            <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:fitsSystemWindows="true"
                    android:src="@drawable/random_pattern"
                    android:scaleType="fitXY"
                    app:layout_collapseMode="parallax"
                    app:layout_collapseParallaxMultiplier="0.75"/>

            <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                    app:layout_collapseMode="pin">

            </android.support.v7.widget.Toolbar>

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

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

    <android.support.v4.widget.NestedScrollView
            android:id="@+id/nested_scroll_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            app:behavior_overlapTop="64dp">

        <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:context=".MainActivityFragment"
                android:orientation="vertical">

            <android.support.v7.widget.CardView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="8dp">

                <!-- card content -->

            </android.support.v7.widget.CardView>

        </LinearLayout>

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

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

Проблема в том, что где бы я ни пытался разместить логотип, он либо не двигается так, как мне нужно, либо все ломается. Такое ощущение, что может потребоваться пользовательское поведение. К сожалению, ни один учебник, который я нашел в новой библиотеке дизайна, не объясняет, как ее расширить — только как использовать предоставленные материалы. Его исходный код не опубликован, декомпилированный код не имеет комментариев и чрезвычайно запутан, а тот факт, что я еще не очень хорошо разбираюсь во внутреннем макете Android, делает его еще хуже.

Пожалуйста помоги?


person Actine    schedule 26.06.2015    source источник


Ответы (1)


Хорошо, я вроде сделал это!

Мое решение ужасное, поэтому я все равно буду ждать лучших :)

Я продолжил и создал собственное представление CollapsingLogoToolbarLayout, которое является подклассом CollapsingToolbarLayout. В последнем классе заботится о переходе заголовка — поэтому в моем подклассе я поместил логику, которая изменяет свойства вида логотипа, а именно его translationY на основе доли «расширения». Основная часть с кодом здесь. Теперь, когда я нашел подходящие параметры смещения, мой макет выглядит так:

...
<com.actinarium.random.common.CollapsingLogoToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="?attr/colorPrimary"

        app:logoViewId="@+id/collapsing_logo"
        app:collapsedViewOffset="0dp"
        app:expandedViewOffset="-56dp">

    <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:src="@drawable/random_pattern"
            android:scaleType="fitXY"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.75"/>

    <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin">

    </android.support.v7.widget.Toolbar>

    <FrameLayout
            android:id="@+id/collapsing_logo"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="bottom">

        <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:src="@drawable/random_logo"/>

    </FrameLayout>

</com.actinarium.random.common.CollapsingLogoToolbarLayout>
...

Запись

person Actine    schedule 26.06.2015
comment
Кажется, я слишком рано праздновал. По какой-то причине это не работает на pre-Lollipop: FrameLayout с логотипом расположен далеко за пределами экрана (getY() отрицательное). - person Actine; 27.06.2015
comment
Это не работает, потому что библиотека дизайна применяет смещение с использованием ViewOffsetHelper, которое по какой-то причине использует TranslationY только для API 22. Очевидно, что класс является локальным для пакетов, большое спасибо… - person Actine; 27.06.2015
comment
У вас есть решение на данный момент? - person Pavel Biryukov; 28.09.2015
comment
@PavelBiryukov Я решил полностью отказаться от CoordinatorLayout и связанных сущностей и сам написать все это, переводя логику прокрутки. (и фактически приостановить это приложение в пользу другого) - person Actine; 30.09.2015
comment
Actine, спасибо за ответ! Я спросил Криса Бейнса — он сказал: «Нет, мы это намеренно не поддерживаем». Потому что UX не нравится шаблон. - person Pavel Biryukov; 30.09.2015