android - CoordinatorLayout 内の折りたたみツールバーに沿ったロゴのアニメーション化

Question

次の方法で、ロゴ付きの折りたたみ可能なツールバーを実装したいと思います。

ここに示すように、コンテンツが重複する柔軟なスペース(これは既にあります)。
単色でスクリムされるこの空間の視差パターン（これも持ってください）
コンテンツの真上に表示される必要がありますが、ツールバーが折りたたまれると上に浮く水平中央のロゴ: 実際には、ここにあるペストの葉のようなものにする必要があります (必ずしもサイズ変更可能ではありませんが、それはプラスになります):

これが私のレイアウトです：

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

問題は、ロゴ画像をどこに配置しようとしても、必要なように動かないか、すべてが壊れてしまうことです。カスタム Behavior が必要なようです。残念ながら、新しい Design ライブラリで見つけたチュートリアルはどちらも、それを拡張する方法を説明していません。提供されているものを使用する方法だけです。リリースされたソースコードはなく、逆コンパイルされたコードにはコメントがなく、非常に複雑です。また、Android の内部レイアウトにまだあまり慣れていないという事実が、状況をさらに悪化させています。

助けてください？

score 9 · Accepted Answer

よし、なんとなくできた！

私の解決策はひどいので、より良い解決策を期待しています:)

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

android - CoordinatorLayout 内の折りたたみツールバーに沿ったロゴのアニメーション化

1 に答える 1

Related

Reference