Android N.3-6 Using MotionLayout to Animate Android Apps

2021. 4. 10 작성

#0 MotionLayout이란?

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

#1 MotionLayout 사용법

1. 프로젝트에서 MotionLayout을 사용하려면 ConstraintLayout 2.0 종속 항목을 앱의 build.gradle 파일에 추가합니다.

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

2. MotionLayout은 ConstraintLayout의 서브클래스이므로 다음 예에서와 같이 레이아웃 리소스 파일에서 클래스 이름을 바꿔 기존 ConstraintLayout을 MotionLayout으로 전환할 수 있습니다.

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

3. MotionScene 만들기: 이전 MotionLayout 예에서 app:layoutDescription 속성은 _MotionScene_을 참조합니다. MotionScene은 상응하는 레이아웃의 모든 모션 설명을 포함하는 XML 리소스 파일입니다. 레이아웃 정보를 모션 설명과 별도로 유지하기 위해 각 MotionLayout에서 개별 MotionScene을 참조합니다. MotionScene의 정의는 MotionLayout의 비슷한 정의보다 우선합니다.

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

4. 해당 MotionScene을 사용할 MotionLayout에 적용시킵니다.