Skip to main content

안드로이드 MotionLayout

2019년 12월 3일About 10 minJavaAndroidArticle(s)blogblog.gangnamunni.comjavaandroidmotionlayout

안드로이드 MotionLayout 관련

Android > Article(s)
Article(s)
안드로이드 MotionLayout
Android MotionLayout 사용해보기

Android MotionLayout

안드로이드에서는 아래와 같은 툴을 사용해서 애니메이션 처리를 할 수 있었습니다.

  • Animated Vector Drawable
  • Property Animation Framework
  • LayoutTransition Animation
  • Layout transitions with TransitionManager
  • CoordinatorLayout

그리고 2018년에 구글에서는 MotionLayout 이라는 새로운 애니메이션 툴을 발표했습니다.

지금부터 MotionLayout 을 한번 훑어보려 합니다.

MotionLayout 특징

  1. MotionLayout 은 ConstraintLayout 을 상속받은 ViewGroup 입니다.
  2. MotionLayout 은 property animation framework, TransitionManger, CoordinatorLayout 의 혼합체 라고 할 수 있습니다.
  3. TransitionManager 와 같이 두 layout 간의 변화를 애니메이션 처리 할 수 있습니다.
  4. Property Animation 과 같이 View의 속성을 애니메이션 처리 할 수 있습니다.
  5. CoordinatorLayout 과 같이 사용자의 터치에 따라 반응하는 애니메이션 처리 할 수 있습니다.
  6. Fully Declarative 합니다. 애니메이션에 관한 모든것을 XML 으로 선언가능합니다.
  7. ConstraintLayout 2.0에 포함되어 있으며, support library 로 Api level 14이상에서 호환됩니다. (2019.9.29 현재 ConstraintLayout 2.0 은 베타로 사용가능)
  8. TransitionManager 는 Nested Layout 이나 Activity Transition 에도 사용가능하나, MotionLayout 은 직접적인 하위 view 들에게만 적용 가능합니다.

결론적으로, MotionLayout 은 한 번 시작하면 끝날때 까지 컨트롤할 수 없는 애니메이션이 아닌, UI Element 와 사용자가 실시간으로 상호작용하는 애니메이션 처리가 필요 할 때 적절한 선택으로 보입니다.

이후로는 아래와 같은 순서로 정리하겠습니다.

  • MotionLayout 구조
  • 기본 사용 예제
  • ConstraintSet 사용 예제
  • KeyFrameSet 사용 예제
  • 각종 속성 설명
  • 안드로이드 OS 퀵메뉴 만들어보기

MotionLayout 구조

MotionLayout 은 MotionScene 을 레퍼런싱 하고, 애니메이션 관련된 모든 것은 이 MotionScene 에 정의됩니다.

ConstraintSet 은 Constraint 정의를 위한 별도의 layout xml 파일을 만들 필요 없이 직접 Constraint 를 정의할 때 사용할 수 있습니다. 타겟 뷰의 크기와 위치를 선언할 수 있으며, CustomAttribute 를 통해 타겟 뷰의 다른 속성들도 정의할 수 있습니다.

Transition 은 애니메이션의 시작과 끝 Constraint 를 정의하고, duration 등의 기타 애니메이션 속성들을 정의합니다. 사용자와 인터랙션할 수 있는 OnClick 과 OnSwipe 핸들러를 등록할 수 있으며, KeyFrameSet 을 통해 애니메이션의 시작과 끝 뿐만 아니라 그 사이 지점들의 Constraint 를 정의할 수 있습니다.

자세한 속성들에 대한 설명 이전에 일단은 MotionLayout 을 사용해서 간단한 애니메이션을 구현하는 예제를 살펴보려 합니다.

MotionLayout 기본 예제

위와 같이 터치에 따라 움직이는 뷰를 만들기 위해 먼저 MotionLayout xml 파일을 만듭니다.

motion_layout_ex1.xml

id:button 인 View 가 애니메이션 할 대상이며, 위치에 대한 정의는 하지 않아도 됩니다. MotionLayout 의 app:layoutDescription 속성으로 scene_01 을 설정해 주었는데, 바로 모든 애니메이션 관련 내용이 들어갈 MotionScene 을 정의한 파일입니다.

<?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/button"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:background="@color/colorAccent" />

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

이것으로 끝입니다. 다음에는 ConstraintSet 사용 예제를 보겠습니다.

ConstraintSet 사용 예제

motion_layout_ex2.xml

동일하게 MotionLayout layout xml 을 만들고, layoutDescription 으로 scene_02.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"
    android:id="@+id/motionLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/scene_02"
    app:showPaths="true">

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

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

ConstraintSet 사용법을 간단히 살펴보았습니다.

다음은 ConstraintSet 과 ImageFilterView 를 같이 사용해보겠습니다.

ConstraintSet 과 ImageFilterView 사용 예제

타겟뷰에 ImageFilterView 를 사용해서 이미지가 변경되는 애니메이션을 만들어보겠습니다.

motion_layout_ex3.xml

타겟뷰에 ImageFilterView 를 사용했습니다. ImageFilterView 는 AppCompatImageView 를 상속받는 뷰로 이미지에 여러가지 효과를 줄 수 있는 뷰입니다. src 에 변경전 이미지를, altSrc 에 변경후 이미지를 세팅해주었습니다. (png 이든 벡터 이미지든 상관없이 정상동작합니다)

<?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"
    android:id="@+id/motionLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/scene_03"
    app:showPaths="true">

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/image"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:background="@color/white"
        android:src="@drawable/ic_999_icon_gnb_info_off"
        app:altSrc="@drawable/ic_999_icon_gnb_info_on" />

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

KeyFrameSet 사용 예제

MotionLayout 의 기본 아이디어는 애니메이션의 시작과 끝의 상태인 “resting state” 를 ConstraintSet 으로 구현하는 것입니다. 여기에 KeyFrameSet 을 사용하면 시작과 끝 사이지점의 상태 또한 구현할 수 있습니다. (이는 resting state 는 아니고 단순히 지나가는 state 입니다.)

motion_layout_ex4.xml

layoutDescription 으로 scene_04.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"
    android:id="@+id/motionLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/scene_04"
    app:showPaths="true">

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

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

지금까지 기본예제, ConstraintSet 사용 예제, KeyFrameSet 사용 예제를 다루어보았습니다. 다음은 MotionLayout, MotionScene 과 관련된 여러가지 속성들을 더 자세히 다루어보겠습니다.

속성

MotionLayout
  • app:layoutDescription=”reference” MotionScene xml 파일을 설정합니다.
  • app:applyMotionScene=”boolean” MotionScene 을 적용할지 여부 (기본값은 true)
  • app:showPaths=”boolean”모션 path 를 보여줄지 여부. true 로 설정시 타겟 뷰가 움직이는 방향이 UI상에 점선으로 표시됩니다. (실제 배포할 때는 false 로 해줘야 합니다!)
  • app:progress=”float”Transition progress 를 강제설정합니다. (0~1)
  • app:currentState=”reference”특정 ConstraintSet 으로 강제설정합니다.
  • 기타 ConstraintLayout 의 속성들

지금까지 각 태그들이 어떤 속성을 갖고 있는지 알아보았습니다.마지막으로 MotionLayout 을 사용해서 안드로이드 OS 퀵메뉴를 만들어보겠습니다.

안드로이드 OS 퀵세팅 비스무리하게 따라해보기

MotionLayout 을 이용해서 간단한 안드로이드 퀵세팅을 구현해보았습니다.

quick_setting_activity.xml

움직일 아이콘 12개를 준비해주고, layoutDescription 으로 scene_quick_setting.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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    app:layoutDescription="@xml/scene_quick_setting"
    tools:motionProgress="0">

    <ImageView
        android:id="@+id/backgroundImage"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"
        android:src="@drawable/free_cat"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/iconBackground"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/quick_setting_background"
        app:layout_constraintBottom_toBottomOf="@+id/view9"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!--  Row 1  -->
    <ImageView
        android:id="@+id/view1"
        android:layout_width="@dimen/quick_setting_icon_width"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:paddingBottom="30dp"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_cake_black_24dp" />

    <ImageView
        android:id="@+id/view2"
        android:layout_width="@dimen/quick_setting_icon_width"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:paddingBottom="30dp"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_fingerprint_black_24dp" />

    <ImageView
        android:id="@+id/view3"
        android:layout_width="@dimen/quick_setting_icon_width"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:paddingBottom="30dp"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_volume_up_black_24dp" />

    <ImageView
        android:id="@+id/view4"
        android:layout_width="@dimen/quick_setting_icon_width"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:paddingBottom="30dp"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_access_alarms_black_24dp" />

    <!--  Row 2  -->
    <ImageView
        android:id="@+id/view5"
        android:layout_width="@dimen/quick_setting_icon_width"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:paddingBottom="30dp"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_airplanemode_active_black_24dp" />

    <ImageView
        android:id="@+id/view6"
        android:layout_width="@dimen/quick_setting_icon_width"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:paddingBottom="30dp"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_bluetooth_black_24dp" />

    <ImageView
        android:id="@+id/view7"
        android:layout_width="@dimen/quick_setting_icon_width"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:paddingBottom="30dp"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_bug_report_black_24dp" />

    <ImageView
        android:id="@+id/view8"
        android:layout_width="@dimen/quick_setting_icon_width"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:paddingBottom="30dp"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_cloud_queue_black_24dp" />

    <!--  Row 3  -->
    <ImageView
        android:id="@+id/view9"
        android:layout_width="@dimen/quick_setting_icon_width"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:paddingBottom="30dp"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_favorite_border_black_24dp" />

    <ImageView
        android:id="@+id/view10"
        android:layout_width="@dimen/quick_setting_icon_width"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:paddingBottom="30dp"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_location_on_black_24dp" />

    <ImageView
        android:id="@+id/view11"
        android:layout_width="@dimen/quick_setting_icon_width"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:paddingBottom="30dp"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_screen_rotation_black_24dp" />

    <ImageView
        android:id="@+id/view12"
        android:layout_width="@dimen/quick_setting_icon_width"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:paddingBottom="30dp"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_thumb_up_black_24dp" />

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

이렇게만 해주었을 때 아래 이미지와 같이 아이콘들이 자신의 start 상태와 end 상태를 직선으로 움직입니다.

아이콘들이 직선으로 움직이기 때문에 1, 2행의 아이콘이 겹치는 현상이 발생하고, 3열의 아이콘들도 아이콘이 작아지며 사라져서 아름답지가 않습니다.

좀 더 Material 스러운 애니메이션을 위해 KeyFrame 을 삽입했습니다.

위 KeyFrame 설정을 간단히 설명하면, 2행의 아이콘들은 framePosition 50 에 아래와 같은 속성을 주었습니다.

    motion:keyPositionType=”deltaRelative”
    motion:percentX=”0"
    motion:percentY=”1"

애니메이션의 50%인 시점에 X 위치는 start 상태가 되도록 하고 Y위치는 end 상태가 되도록 합니다. (아이콘들이 50% 까지는 우측으로만 이동합니다.)

3행의 아이콘들은 framePosition 50 에 아래와 같은 속성을 주었습니다.

    motion:keyPositionType=”deltaRelative”
    motion:percentX=”1"
    motion:sizePercent=”1"

애니메이션의 50%인 시점에 X 위치는 end 상태가 되도록 하고 크기도 end 상태가 되도록 합니다. (아이콘들이 50% 까지는 위로만 움직이며 크기도 변화하지 않습니다.)

3행에 아이콘에는 추가적으로 알파 애니메이션을 주었습니다. KeyAttribute 를 사용해서 framePosition 70 에 alpha 값을 0으로 설정해서 애니메이션의 70%인 지점에서 아이콘이 완전히 보이지 않도록 설정했습니다.

이것으로 코드 한 줄 없이 xml 만으로 안드로이드 퀵세팅과 비슷한 애니메이션을 만들어 보았습니다. 물론 필요시 MotionLayout 의 progress 를 programmatically 제어하는등의 커스터마이징 역시 가능합니다.

지금까지 MotionLayout 을 가볍게 살펴보았습니다. 비록 지금은 Beta 버전이기에 실제 서비스에 사용하기에는 조금 위험할 수도 있으나, 이렇게 간단히 인터랙션 애니메이션을 구현할 수 있다는 점에서 빨리 정식 빌드가 나오길 기대하고 있습니다.

예제 GitHub

april21dev/motion_layout_example
MotionLayout 예제

References

MotionLayout | Android Developers
This Layout supports transitions between constraint sets defined in MotionScenes
Introduction to MotionLayout (part I)
MotionLayout is a new class available in the ConstraintLayout 2.0 library to help Android developers manage motion and widget animation in their application. The second half (29 min in) of our…