MotionLayout으로 모션 및 위젯 애니메이션 관리

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

그림 1. 기본 터치 컨트롤 모션입니다.

MotionLayout은 레이아웃 전환과 복잡한 모션 처리 사이를 연결하며 속성 애니메이션 프레임워크, TransitionManagerCoordinatorLayout 사이의 혼합된 기능을 제공합니다.

레이아웃 사이의 전환 외에도 MotionLayout을 사용하여 레이아웃 속성을 애니메이션으로 보여줄 수 있습니다. 또한 기본적으로 검색 가능 전환을 지원합니다. 즉, 터치 입력과 같은 일부 조건에 따라 전환 내의 포인트를 즉시 표시할 수 있습니다. MotionLayout에서는 키프레임도 지원하므로 사용자의 필요에 맞게 완전히 맞춤설정된 전환을 사용할 수 있습니다.

MotionLayout은 완전히 선언 가능하므로, 복잡도에 상관없이 XML로 모든 전환을 설명할 수 있습니다.

디자인 고려 사항

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

시작하기

프로젝트에서 MotionLayout 사용을 시작하려면 다음 단계를 따르세요.

  1. ConstraintLayout 종속 항목 추가: 프로젝트에서 MotionLayout을 사용하려면 ConstraintLayout 2.0 종속 항목을 앱의 build.gradle 파일에 추가합니다. AndroidX를 사용 중이라면 다음 종속 항목을 추가하세요.

        dependencies {
            implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta1'
        }
            

    AndroidX를 사용하지 않으면 다음 지원 라이브러리 종속성을 추가하세요.

        dependencies {
            implementation 'com.android.support.constraint:constraint-layout:2.0.0-beta1'
        }
            
  2. MotionLayout 파일 만들기: MotionLayoutConstraintLayout의 서브클래스이므로 다음 예에서와 같이 레이아웃 리소스 파일에서 클래스 이름을 바꿔 기존 ConstraintLayoutMotionLayout으로 전환할 수 있습니다.

    AndroidX

        <!-- before: ConstraintLayout -->
        <androidx.constraintlayout.widget.ConstraintLayout .../>
        <!-- after: MotionLayout -->
        <androidx.constraintlayout.motion.widget.MotionLayout .../>
                  

    지원 라이브러리

        <!-- before: ConstraintLayout -->
        <android.support.constraint.ConstraintLayout .../>
        <!-- after: MotionLayout -->
        <android.support.constraint.motion.MotionLayout .../>
                  

    다음은 그림 1에서 모션을 생성하는 데 사용할 수 있는 MotionLayout 파일의 전체 예입니다.

    AndroidX

        <?xml version="1.0" encoding="utf-8"?>
        <!-- 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"
            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>
                

    지원 라이브러리

        <?xml version="1.0" encoding="utf-8"?>
        <!-- activity_main.xml -->
        <android.support.constraint.motion.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" />
    
        </android.support.constraint.motion.MotionLayout>
                
  3. MotionScene 만들기: 이전 MotionLayout 예에서 app:layoutDescription 속성은 MotionScene을 참조합니다. MotionScene은 상응하는 레이아웃의 모든 모션 설명을 포함하는 XML 리소스 파일입니다. 레이아웃 정보를 모션 설명과 별도로 유지하기 위해 각 MotionLayout에서 개별 MotionScene을 참조합니다. MotionScene의 정의는 MotionLayout의 비슷한 정의보다 우선합니다.

    다음은 그림 1의 기본 가로 모션을 설명하는 MotionScene 파일의 예입니다.

        <?xml version="1.0" encoding="utf-8"?>
        <MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:motion="http://schemas.android.com/apk/res-auto">
    
            <Transition
                motion:constraintSetStart="@+id/start"
                motion:constraintSetEnd="@+id/end"
                motion:duration="1000">
                <OnSwipe
                    motion:touchAnchorId="@+id/button"
                    motion:touchAnchorSide="right"
                    motion:dragDirection="dragRight" />
            </Transition>
    
            <ConstraintSet android:id="@+id/start">
                <Constraint
                    android:id="@+id/button"
                    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" />
            </ConstraintSet>
    
            <ConstraintSet android:id="@+id/end">
                <Constraint
                    android:id="@+id/button"
                    android:layout_width="64dp"
                    android:layout_height="64dp"
                    android:layout_marginEnd="8dp"
                    motion:layout_constraintBottom_toBottomOf="parent"
                    motion:layout_constraintEnd_toEndOf="parent"
                    motion:layout_constraintTop_toTopOf="parent" />
            </ConstraintSet>
    
        </MotionScene>
            

    다음 내용을 참고하세요.

    • <Transition>에는 모션의 기본 정의가 포함되어 있습니다.

      • motion:constraintSetStartmotion:constraintSetEnd는 모션의 엔드포인트 참조입니다. 이러한 엔드포인트는 나중에 MotionScene의 <ConstraintSet> 요소에 정의됩니다.

      • motion:duration은 모션이 완료되는 데 걸리는 시간을 밀리초 단위로 지정합니다.

    • <OnSwipe>를 사용하면 터치를 통해 모션을 제어할 수 있습니다.

      • motion:touchAnchorId는 스와이프하고 드래그할 수 있는 뷰를 나타냅니다.

      • motion:touchAnchorSide는 오른쪽에서 보기를 드래그하는 것을 나타냅니다.

      • motion:dragDirection은 드래그의 진행 방향을 나타냅니다. 예를 들어 motion:dragDirection="dragRight"는 오른쪽으로 드래그하면 진행률이 증가한다는 의미입니다.

    • <ConstraintSet>를 통해서는 모션을 설명하는 다양한 제약조건을 정의합니다. 이 예에서는 모션의 엔드포인트마다 한 개씩 ConstraintSet를 정의합니다. 이 엔드포인트는 세로로는 가운데에 위치합니다(app:layout_constraintTop_toTopOf="parent"app:layout_constraintBottom_toBottomOf="parent" 사용). 가로로는 화면의 맨 왼쪽과 오른쪽에 엔드포인트가 있습니다.

    MotionScene에서 지원하는 다양한 요소의 자세한 내용은 MotionLayout 예를 참조하세요.

보간된 속성

MotionScene 파일에서 ConstraintSet 요소에는 전환하는 동안 보간되는 추가 속성이 포함될 수 있습니다. 위치 및 경계 이외에 다음 속성은 MotionLayout을 통해 보간됩니다.

  • alpha
  • visibility
  • elevation
  • rotation, rotationX, rotationY
  • translationZ translationY translationX
  • scaleX, scaleY

맞춤 속성

<Constraint>에서 <CustomAttribute> 요소를 사용하여 위치 또는 View 속성과 관련되지 않은 속성의 전환을 지정할 수 있습니다.

    <Constraint
        android:id="@+id/button" ...>
        <CustomAttribute
            motion:attributeName="backgroundColor"
            motion:customColorValue="#D81B60"/>
    </Constraint>
    

<CustomAttribute>에는 다음과 같은 두 가지 고유 속성이 있습니다.

  • motion:attributeName은 필수이며 getter 및 setter 메서드가 있는 객체와 일치해야 합니다. getter와 setter는 특정 패턴과 일치해야 합니다. 예를 들어, Google의 보기에는 기본 getBackgroundColor()setBackgroundColor() 메서드가 있으므로 backgroundColor가 지원됩니다.
  • 입력해야 하는 다른 속성은 값 유형을 기반으로 합니다. 지원되는 다음 유형 중에서 선택하세요.
    • motion:customColorValue - 색상
    • motion:customIntegerValue - 정수
    • motion:customFloatValue - 부동수
    • motion:customStringValue - 문자열
    • motion:customDimension - 측정기준
    • motion:customBoolean - 부울

맞춤 속성을 지정할 때 시작 및 종료 <ConstraintSet> 요소 모두에 엔드포인트 값을 정의해야 합니다.

예: 배경색 변경

앞의 예를 기반으로 그림 2에 표시된 대로 보기에서 모션의 일부로 색상을 변경해 보겠습니다.

그림 2. 뷰가 이동하면 배경색이 변경됩니다.

아래와 같이 <CustomAttribute> 요소를 각 ConstraintSet 요소에 추가합니다.

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/button"
            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">
            <CustomAttribute
                motion:attributeName="backgroundColor"
                motion:customColorValue="#D81B60" />
        </Constraint>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/button"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_marginEnd="8dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintTop_toTopOf="parent">
            <CustomAttribute
                motion:attributeName="backgroundColor"
                motion:customColorValue="#9999FF" />
        </Constraint>
    </ConstraintSet>
    

추가 MotionLayout 속성

위의 예에 있는 속성 외에도 MotionLayout에는 다음과 같이 지정할 수 있는 다른 속성이 있습니다.

  • app:applyMotionScene="boolean"은 MotionScene 적용 여부를 나타냅니다. 이 속성의 기본값은 true입니다.
  • app:showPaths="boolean"은 모션이 실행 중일 때 모션 경로를 표시할지 나타냅니다. 이 속성의 기본값은 false입니다.
  • app:progress="float"를 사용하면 전환 진행 상황을 명시적으로 지정할 수 있습니다. 0(전환 시작)부터 1(전환 종료)까지 부동 소수점 값을 사용할 수 있습니다.
  • app:currentState="reference"를 사용하면 특정 ConstraintSet를 지정할 수 있습니다.
  • app:motionDebug를 사용하면 모션에 관한 추가 디버그 정보를 표시할 수 있습니다. 가능한 값은 'SHOW_PROGRESS', 'SHOW_PATH' 또는 'SHOW_ALL'입니다.

참고 자료

MotionLayout의 자세한 내용은 다음 링크를 참조하세요.