[Android] MotionLayout 사용하기

MotionLayout

MotionLayout은 ConstraintLayout의 서브클래스이며, 애니메이션을 관리할 수 있는 레이아웃입니다.

기존에는 애니메이션을 정의하고 실행시키기 위해서는 보통 xml에서 정의한 후 코드로 실행시키는 방식이었지만, MotionLayout은 xml로만 애니메이션을 정의 및 실행시킬 수 있습니다.

MotionLayout의 가장 큰 특징은 애니메이션과 관련된 내용을 별도의 xml(MotionScene)에 분리하여 재사용한다는 점입니다.

MotionLayout으로 모션 및 위젯 애니메이션 관리  |  Android 개발자  |  Android Developers

 

MotionLayout 구현하기

MotionLayout은 ConstraintLayout을 상속받은 ViewGroup이기 때문에 ConstraintLayout과 동일하게 작성해주면 되는데 app:layoutDescription 속성에 참조하는 MotionScene을 지정해줘야 합니다

<!-- activity_main.xml -->
<?xml version="1.0" encoding="utf-8"?>
<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/view"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:background="@color/colorAccent" />

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

 

MotionScene은 내부에 여러 태그들을 포함하고 있고, 이를 기반으로 애니메이션을 구성합니다.

• <Transition>
  모션의 기본 정의를 포함하는 태그. 시작과 종료를 설정하고 애니메이션 시간을 정할 수 있습니다.
• <OnSwipe>
  터치 모션을 제어할 수 있습니다. Swipe 또는 Click으로 애니메이션을 실행시키고 제어할 수 있습니다.
• <ConstraintSet>
  모션에 대한 제약 조건을 설정하는 태그입니다.
  id 값을 통해 <Transition> 태그에서 시작과 종료 지점을 나타낼 수 있습니다.
  <ConstraintSet> 태그 안에서 <Constraint> 태그를 통해 뷰들의 위치를 정해줄 수 있습니다.
• <Constraint>
  MotionLayout에 작성된 뷰들의 위치를 설정할 수 있습니다.
• <CustomAttribute>
  뷰의 위치 또는 속성의 전환을 설정해 줄 수 있습니다.
  motion:attributeName 속성은 필수로 선언해야 하며, getter와 setter가 있는 객체와 일치해야 합니다.

<!-- scene_01.xml -->
<?xml version="1.0" encoding="utf-8"?>
<MotionScene
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    
    <Transition
        app:constraintSetStart="@+id/start"
        app:constraintSetEnd="@+id/end" />

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

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/searchButton"
            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>

<CustomAttribute>을 사용하면 다음과 같은 배경색이 변경되는 애니메이션을 만들 수 있습니다.

출처 : https://blog.gangnamunni.com/post/MotionLayout/

 

KeyFrame 사용하기

MotionScene에서 KeyFrame을 이용하면 중간중간에 다양한 효과를 줄 수 있습니다.

<KeyFrameSet> 태그 안에 <KeyPosition>, <KeyAttribute> 태그를 포함시켜 애니메이션 중간중간에 키프레임을 설정할 수 있습니다.

• <KeyPosition> : 특정 시점에서 뷰의 위치를 변경시킵니다.
  
  • framePosition : 애니메이션의 시작과 끝을 0 ~ 100이라 했을 때, 1~99까지의 위치를 나타냅니다. 
  • keyPositionType : 뷰가 도달하는 위치를 계산하는 방식입니다.
    • parentRelative : 부모를 기준으로 계산합니다.
    • deltaRelative : 시작과 끝의 좌표를 계산해 그 이동 경로를 백분율로 나타냅니다.
    • pathRelative : 시작과 끝의 좌표를 일직선상으로 놓고, 이를 x축으로 둡니다.
  • motionTarget : 타겟되는 뷰를 나타냅니다.
  • percentX/Y : 뷰가 도달하는 위치를 지정합니다. keyPositionType에 따라 거리 계산 방식이 달라집니다. 
  • curvFit : 직선/곡선 이동 여부를 설정합니다. 
• <KeyAttribute> : 해당 키프레임에서 뷰의 속성을 지정합니다.
  • visibility
  • alpha
  • elevation
  • rotation
  • scale
  • translation

<KeyFrameSet>
    <KeyPosition
        motion:framePosition="percentage"
        motion:keyPositionType="type"
        motion:motionTarget="@+id/target"
        motion:percentX="value"
        motion:percentY="value" />
        
    <KeyAttribute
        motion:framePosition="percentage"
        motion:motionTarget="@+id/target"
        android:rotation="value"
        android:scaleX="value"
        android:scaleY="value" />
</KeyFrameSet>

다음과 같이 중간에서 변화를 주는 애니메이션을 만들 수 있습니다.

출처 : https://blog.gangnamunni.com/post/MotionLayout/