MotionLayoutの例を試してみる

MotionLayoutを触ったことがないので、今後のために試しておこうと思います。

公式リファレンス

今回は基本的なモーションを試していきます。

基本的なモーション

公式では横の動きをしているので縦の動きをしてみようと思います。

gifなので動きカクカクに見えますが。。。完成はこんな感じです。

まずはMotionLayoutをActivityのレイアウトに設定します。

activity_main.xml

<androidx.constraintlayout.motion.widget.MotionLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/motion_layout"
    app:layoutDescription="@xml/sample_scene"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/move_view"
        android:background="@color/black"
        android:layout_width="64dp"
        android:layout_height="64dp" />

</androidx.constraintlayout.motion.widget.MotionLayout>

app:layoutDescription="@xml/sample_scene"

このapp:layoutDescriptionの設定が重要です。
アニメーションの動きを設定しているxmlで、これから作成していきます。
今回はFrameLayoutのmove_viewを動かしていきます。

resディレクトリの中にxmlディレクトリを作成し、その中にアニメーションの動きを設定するxmlを作成します。
今回はsample_scene.xmlを作成しました。

sample_scene.xml

<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">
        <OnSwipe
            motion:dragDirection="dragUp"
            motion:touchAnchorId="@id/move_view"
            motion:touchAnchorSide="top" />
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@id/move_view"
            android:layout_width="64dp"
            android:layout_height="64dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent" />
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@id/move_view"
            android:layout_width="64dp"
            android:layout_height="64dp"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />
    </ConstraintSet>
</MotionScene>

MotionScene

モーション シーン ファイルのルート要素

Transition

モーション シーケンスの開始と終了の状態

motion:constraintSetStart="@+id/start"
モーション シーケンスの開始状態

motion:constraintSetEnd="@+id/end"
モーション シーケンスの終了状態

motion:duration="1000"
ミリ秒単位のモーション シーケンスの長さ

OnSwipe

アニメーションを開始するトリガーをスワイプに設定してます。

motion:dragDirection="dragUp"
スワイプ動作の方向です
設定できる値はdragLeft、dragRight、dragUp、dragDown

motion:touchAnchorId="@id/move_view"
アニメーションを開始するトリガーとして設定するView

motion:touchAnchorSide="top"
指定したViewをどの方向スワイプしたときにアニメーションが反応するか
設定できる値はleft、right、top、bottom です。

ConstraintSet

1つのTransitionに対して二つ作成します。１つは始点位置を定義し、もう1つが終了位置を定義します。

Constraint

要素の位置と属性を指定します。

以上で縦スワイプで下から上へと動いていくアニメーションが完成しました。

今回は基本的なモーションなので、他のも試してみようと思います。