[Android Studio] Motion Layout을 이용한 레이아웃 동작 움직임 추가(접었다 폈다 하기)

어플리케이션 개발중 기존에 x, y 좌표를 동적으로 움직여 화면 속 요소를 움직이는 동작에 한계를 느꼈다.

그래서 서치를 하던 중, Motion Layout이라는 방법을 알게되었다.

 

Motion Layout은 기존의 Android 레이아웃 중 하나인 Constraint Layout을 기반으로 하는 일종의 Layout이다.

https://developer.android.com/develop/ui/views/animations/motionlayout/examples

MotionLayout 예  |  Views  |  Android Developers

 

Android 공식문서와 여러가지 예제를 참고하여서 Touch 제스쳐를 따라 움직이며 접혔다 펴졌다 하는 레이아웃을 만들었다.

 

기존 레이아웃에 Motion Layout을 적용하는 방법은 다음과 같다.

 

1. 기존 XML 레이아웃에서 Linear 등을 ConstraintLayout으로 변경

 - Convert to MotionLayout으로 ConstraintLayout -> MotionLayout을 해준다.(그럼 자동으로 바뀐다!)

 

2. Motion Layout으로 변경됨

3번의 Scene파일 작성 후 추가해준다.

3. Scene 파일 작성

 - Start 동작과 End 동작을 작성해준다

 - 각 동작의 duration (동작 속도) 설정 가능!

 

각 레이아웃의 height를 조절하는 방식으로 레이아웃 움직임 동작 추가를 했다.

Constraint Layout 이기 때문에 Constraint 조건도 같이 작성해줘야한다.

 

4. 코드에서 동작 추가

 나의 경우에는 제스쳐가 위로 가나 or 아래로 가나를 OnTouchListener를 통해 판단해서 동작을 연결해주었다.

Motionlayout 변수에 transitionToStart()와 transitionToEnd()함수를 활용해서 코드에서 동작을 추가했다.

 

5. 결과

 스무스한 동작 완성!