MotionLayout이란?
MotionLayout
는 앱에서 모션과 위젯 애니메이션을 관리하는 데 도움이 되는 레이아웃.
ConstaintLayout
의 서브클래스이다.
MotionLayout
은 완전히 선언적이므로, XML
에서 모든 전환을 설명할 수 있다.
간단한 스와이핑 애니메이션 만들기
주의사항
https://developer.android.com/develop/ui/views/animations/motionlayout?hl=ko#androidx
공식 문서에 따르면, 사용자가 상호작용 하는 버튼, 제목 표시줄 등 UI 요소를 이동하고 크기를 조절 및 애니메이션 처리를 위한 것이다. 불필요한 특수효과로는 사용하지 말라고 한다.
사용해보기
의존성 추가하기
dependencies {
implementation "androidx.constraintlayout:constraintlayout:2.2.0-alpha07"
implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha07"
}
MotionLayout 파일 만들기
처음에 설명했던 것 처럼 MotionLayout
은 ConstraintLayout
의 서브클래스 이므로, 기존의 ContraintLayout
을 MotionLayout
으로 변환하여 사용이 가능하다.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutDescription="@xml/activity_main_scene"
app:showPaths="true">
<View
android:id="@+id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:background="@color/material_dynamic_neutral50"
android:text="Button" />
</androidx.constraintlayout.motion.widget.MotionLayout>
기본적인 소스코드이다.
각각의 소스코드에 대한 간단한 설명을 진행하면,
showPaths
의 경우에는 애니메이션의 경로를 시각적으로 표시할 것인지에 대한 여부이다. 기본값은 false
이다.
layoutDescription
는 모션 장면을 참조하는데, 여기서 모션 장면이란 XML
리소스 파일이다. 별도의 MotionScene
파일 내의 상응하는 레이아웃의 설명이 포함이 된다.
MotionScene 파일
<?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">
<CustomAttribute
motion:attributeName="backgroundColor"
motion:customColorValue="#D81B60" />
</Constraint>
</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">
<CustomAttribute
motion:attributeName="backgroundColor"
motion:customColorValue="#9999FF" />
</Constraint>
</ConstraintSet>
</MotionScene>
해당 MotionScene
파일의 경우에는 , 왼쪽에서 오른쪽으로 스와이프 시 애니메이션을 정의한 파일이다.
Transition
을 통해 start
과 end
사이의 전환을 duration
을 1초로 설정을 하였다.
ConstraintSet
의 경우에는 애니메이션 시작 시 버튼의 위치와 속성을 정의했다.
start
와 end
두 경우로 나뉘어 작성 하였으며, 시작의 경우에는 왼쪽, 종료 시점은 오른쪽으로 정의하였다. 각각의 배경색 또한 다르게 지정하였다.
'안드로이드 > Compose' 카테고리의 다른 글
[Kotlin/Compose] Slide-Unlock(밀어서 잠금해제) 기능 개발하기 (1) (0) | 2023.12.15 |
---|---|
[Kotlin/Compose] Swipe Action 기능 만들기 with. AnchoredDraggable (0) | 2023.12.14 |
[Compose UI] 텍스트/이미지 반짝임 로딩화면 만들기 (1) | 2023.11.29 |
[Compose UI] Cutstom Pager를 이용하여 swipe transition 구현하기 (0) | 2023.11.28 |
Modifier 적용시 padding이 적용이 안될 때 (0) | 2023.10.24 |