[Android] MotionLayout 사용법

MotionLayout

MotionLayout은 자식뷰들간의 Constraint 관계를 통해 사용자의 이벤트로 UI가 애니메이션처럼 변화할 수 있도록 해줍니다.

 

기본적인 사용법 

1. MotionScene 파일을 생성하여 그 내부에서 사용자 이벤트에 따른 뷰의 Property들을 작성합니다

 

2. MotionScene 내부 선언 가능한 속성들은 다음 문서를 참조하세요

https://developer.android.com/training/constraint-layout/motionlayout/ref?hl=ko

MotionLayout 참조  |  Android 개발자  |  Android Developers

 

3. OnSwipe 속성 중, 문서에는 touchAnchorId밖에 없지만 touchRegionId가 존재합니다. 

touchAnchorId는 해당 뷰를 중심으로 OnSwipe가 발동하게끔 합니다. 따라서 화면 전체에서 OnSwipe가 발생가능합니다.

touchRegionId는 해당 뷰 영역 내에서만 OnSwipe가 발동하게끔합니다.

 

4. Transition에 사용되는 duration은 transitionToEnd 같이 처음부터 끝까지 애니메이션이 이동할 때 걸리는 시간입니다. 유저의 터치 ~ 끌고가기 등의 속도와는 무관합니다

 

5. Transition 속성 내부에 선언가능한 KeyFrameSet 속성은 해당 키프레임에 이 뷰가 어떠한 상태인가를 지정할 수 있도록 해줍니다.

예를 들어. framePosition의 경우, transition start 부분이 0이고 end가 100입니다. 그렇다면 아래와 같은 상태에서는 

<KeyAttribute
    android:alpha="0"
    motion:framePosition="2"
    motion:motionTarget="@id/layoutTop" />

시작하자마자 framePosition 2에 도달할 것이므로 이 때 alpha값은 0이 됩니다. 즉 framePosition 0~2 사이에 alpha는 1~0이 됩니다.

 

6. interactionEnabled 속성을 통해 MotionLayout이 유저 이벤트를 받을지 말지 여부를 정할 수 있습니다.

 

MotionLayout 사용 시 주의점

1. MotionLayout에 motion scene 적용 시 바로 아래의 자식뷰들은 모두 id를 가져야합니다. 그렇지 않으면 런타임 때 아래와 같은 Exception을 만나게됩니다.

java.lang.RuntimeException: All children of ConstraintLayout must have ids to use ConstraintSet

 

2. MotionScene 적용 시, XML에 선언한 레이아웃 프로퍼티보다 MotionScene에 선언한 프로퍼티가 우선순위를 가집니다

 

3. MotionLayout 바로 아래의 자식 뷰에 visibility를 MotionScene 내 Constraint 외의 상황에서 적용 시 적용되지 않습니다. 그러기 위해서는 아래의 방법으로 해결합니다.

 

ㄱ. Constraint > PropertySet > visibilityMode="ignore" 설정

<Constraint
    ...>
    <PropertySet
        app:visibilityMode="ignore" />
</Constraint>

 

ㄴ. 바로 아래의 자식뷰로 두지 말고 따로 부모뷰를 두기