web-dev-qa-db-ja.com

MotionLayoutおよびConstraintLayoutが子供の高さを中心にアニメーション化しない

RecyclerViewでMotionLayoutsを操作しているときに、MotionLayoutsが子の高さを変更した場合、その周りの折り返しをアニメーション化しないことに気付きました。

その動作を再現する簡単な方法は、次のレイアウトです。

<FrameLayout 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.constraint.motion.MotionLayout
        Android:id="@+id/motion_container"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:background="@color/colorPrimary"
        app:layoutDescription="@xml/scene">

        <View
            Android:id="@+id/child"
            Android:layout_width="0dp"
            Android:layout_height="200dp"
            Android:background="@color/colorAccent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

    </Android.support.constraint.motion.MotionLayout>

</FrameLayout>

また、OnClickトリガーに関連付けられたMotionScene：

<MotionScene xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:motion="http://schemas.Android.com/apk/res-auto">

    <Transition
        motion:constraintSetEnd="@id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="1000">

        <OnClick
            motion:target="@id/child"
            motion:mode="toggle"/>

    </Transition>

    <ConstraintSet Android:id="@+id/start">

        <Constraint
            Android:id="@id/child"
            Android:layout_height="200dp"/>

    </ConstraintSet>

    <ConstraintSet Android:id="@+id/end">

        <Constraint
            Android:id="@id/child"
            Android:layout_height="400dp"/>

    </ConstraintSet>

</MotionScene>

次の結果が得られます。

Behaviour demonstration

ご覧のとおり、トランジションが始まるとすぐにMotionLayoutの高さが最終的な予想高さに設定され、子ビューが独自の高さのトランジションを完了して完全に重なるまで青色の背景が表示されます。

消費アイテムのアニメーションを実装しようとすると、RecyclerViewでも同じことが起こります。

トランジション中にMotionLayoutをその子の高さに正確に合わせる方法はありますか、それともコスト効率が高すぎますか？

androidandroid-recyclerviewandroid-constraintlayoutandroid-transitionsandroid-motionlayout
11
krow

MotionLayoutの境界のサイズを変更しないでください。代わりに、それを大きくして、子オブジェクトのサイズのみをアニメーション化します。空の領域を透明にして、基になるビューにタッチイベントを渡すことができます。

ソースと例： https://medium.com/vrt-digital-studio/picture-in-picture-video-overlay-with-motionlayout-a9404663b9e7

1
RWIL