MotionLyaout은 앱에서 모션과 위젯 애니메이션을 관리하는데 사용할 수 있는 레이아웃이다. MotionLayout은 ConstraintLayout의 서브클래스이며 ConstraintLayout의 다양한 레이아웃 기능을 기초로 한다. ConstraintLayout 라이브러리의 일부인 MotionLayout은 지원 라이브러리(support)로 사용가능하며, API LEVEL 14와 호환된다.

화면 기록 2021-10-11 오후 1.56.51.mov

(기본 터치 컨트롤 모션)

MotionLayout은 레이아웃 전환과 복잡한 모션 처리 사이를 연결하며 property animation framework, TransitionManager 및 CoordinatorLayout 사이의 혼합된 기능을 제공한다.

레이아웃 사이의 전환 외에도 MotionLayout을 사용하여 레이아웃 속성을 애니메이션으로 보여줄 수 있다. 또한 기본적으로 검색 가능 전환을 지원한다. 즉, 터치 입력과 같은 일부 조건에 따라 전환 내의 포인트를 즉시 표시할 수 있다.

디자인 고려 사항

MotionLayout은 버튼 및 제목 표시줄과 같이 사용자가 상호작용하는 UI 요소의 이동, 크기 조절 및 애니메이션에 사용한다. 앱의 모션은 단지 애플리케이션의 불필요한 특수 효과가 되어서는 안된다. 모션을 사용하여 앱을 디자인하는 데 관한 자세한 내용은 머터리얼 디자인 섹션을 참고하면 된다.

MotionLyaout 파일 만들기

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

        <View
            android:id="@+id/button"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:background="@color/colorAccent"
            android:text="Button" />

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

MotionScene 만들기

위에 MotionLayout 에서 layoutDescription 속성은 MotionScene을 참조한다. MotionScene은 레이아웃의 모든 모션 설명을 포함하는 XML 리소스 파일이다. 레이아웃 정보를 모션 설명과 별도로 유지하기 위해 각 MotionLayout에서 개별 MotionScene을 참조한다. MotionScene의 정의는 MotionLayout의 정의보다 우선한다.

<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="dragRight"
            motion:touchAnchorId="@id/view"
            motion:touchAnchorSide="right" />
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint android:id="@id/view">
            <Layout
                android:layout_width="64dp"
                android:layout_height="64dp"
                android:layout_marginStart="8dp"
                motion:layout_constraintBottom_toBottomOf="parent"
                motion:layout_constraintStart_toStartOf="parent"
                motion:layout_constraintTop_toTopOf="parent" />
        </Constraint>
    </ConstraintSet>

    <ConstraintSet
        android:id="@+id/end"
        motion:deriveConstraintsFrom="@id/start">

        <Constraint android:id="@id/view">
            <Layout
                android:layout_width="64dp"
                android:layout_height="64dp"
                android:layout_marginEnd="8dp"
                motion:layout_constraintEnd_toEndOf="parent" />
        </Constraint>
    </ConstraintSet>

</MotionScene>