android - 动画徽标以及 CoordinatorLayout 中的折叠工具栏

Question

我想通过以下方式实现带有徽标的可折叠工具栏：

1. 具有重叠内容的灵活空间，如图所示（已经有了）；
2. 这个空间中的视差图案被纯色覆盖（也有这个）
3. 一个水平居中的标志，它必须出现在内容的正上方，但在工具栏折叠时向上浮动： 实际上它应该像这里的 Pesto 的叶子（不一定可调整大小，但这将是一个加号）：

这是我的布局：

<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的布局内部还不是很满意，这让情况变得更糟。

请帮忙？

Answer 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>
...