MotionLayout
드림
앱의 모션 및 위젯 애니메이션을 관리하는 데 도움이 되는 레이아웃 유형입니다.
MotionLayout
는
ConstraintLayout
, 풍부한 데이터 기반
레이아웃 기능을 제공합니다. ConstraintLayout
라이브러리의 일부로 MotionLayout
지원 라이브러리로 제공됩니다
MotionLayout
는 레이아웃 전환과 복잡한 모션 사이의 간극을 메웁니다.
특성 애니메이션의 조합을 제공하여
프레임워크,
TransitionManager
및
CoordinatorLayout
:
MotionLayout
를 사용하면 레이아웃 간 전환을 설명할 수 있을 뿐만 아니라
모든 레이아웃 속성에 애니메이션을 적용합니다. 또한 기본적으로 탐색 가능한
전환을 실행합니다. 즉, 전환 중 어느 지점이든 즉시 표시할 수 있습니다.
기반으로 할 수 있습니다. MotionLayout
에서도 지원
키프레임을 설정하여 필요에 맞게 완전히 맞춤설정된 전환을 사용할 수 있습니다.
MotionLayout
는 완전히 선언적입니다. 즉,
XML을 사용할 수 있습니다.
설계 고려사항
MotionLayout
는 UI 요소를 이동하고 크기를 조절하고 애니메이션을 적용하는 데 사용됩니다.
사용자가 상호작용하는 방식을 보여줍니다. 앱에서 모션을 다음과 같이 사용하지 마세요.
만들 수 있습니다. 이를 통해 사용자가 앱을 이해할 수 있도록 지원하세요.
하고 있습니다. 모션을 사용한 앱 디자인에 관한 자세한 내용은
Material Design 섹션 이해
모션
시작하기
프로젝트에서 MotionLayout
사용을 시작하려면 다음 단계를 따르세요.
-
사용할
ConstraintLayout
종속 항목을 추가합니다. 프로젝트에MotionLayout
를 추가하려면ConstraintLayout
2.0 종속 항목build.gradle
파일 AndroidX를 사용하는 경우 다음 종속 항목을 설치합니다.Groovy
dependencies { implementation "androidx.constraintlayout:constraintlayout:2.2.0-alpha14" // To use constraintlayout in compose implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha14" }
Kotlin
dependencies { implementation("androidx.constraintlayout:constraintlayout:2.2.0-alpha14") // To use constraintlayout in compose implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha14") }
-
MotionLayout
파일 만들기:MotionLayout
ConstraintLayout
의 서브클래스이므로 기존ConstraintLayout
를MotionLayout
로 레이아웃 리소스 파일에서 클래스 이름 바꾸기 예를 들면 다음과 같습니다.AndroidX
<!-- before: ConstraintLayout --> <androidx.constraintlayout.widget.ConstraintLayout .../> <!-- after: MotionLayout --> <androidx.constraintlayout.motion.widget.MotionLayout .../>
지원 라이브러리
<!-- before: ConstraintLayout --> <android.support.constraint.ConstraintLayout .../> <!-- after: MotionLayout --> <android.support.constraint.motion.MotionLayout .../>
다음은
MotionLayout
파일의 전체 예입니다. 는 그림 1에 표시된 레이아웃을 정의합니다.AndroidX
<?xml version="1.0" encoding="utf-8"?> <!-- activity_main.xml --> <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" android:text="Button" /> </androidx.constraintlayout.motion.widget.MotionLayout>
지원 라이브러리
<?xml version="1.0" encoding="utf-8"?> <!-- activity_main.xml --> <android.support.constraint.motion.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" android:text="Button" /> </android.support.constraint.motion.MotionLayout>
-
이전
MotionLayout
에서 MotionScene 만들기: 예를 들어app:layoutDescription
속성은 모션 장면. 모션 장면은 XML 리소스 파일입니다. 해당<MotionScene>
드림 루트 요소가 없으면 모션 장면에는 표시됩니다. 레이아웃 정보를 모션과 분리하기 위해 설명, 각MotionLayout
에서 별도의 모션 참조 장면입니다. 모션 장면의 정의는 유사한 다른 동영상보다 우선 적용됩니다.MotionLayout
에 정의되어 있습니다.다음은 기본 가로 배치를 설명하는 모션 장면 파일의 예입니다. 다음과 같습니다.
<?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" /> </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" /> </ConstraintSet> </MotionScene>
다음 내용을 참고하세요.
-
<Transition>
드림 에는 모션의 기본 정의가 포함됩니다.-
motion:constraintSetStart
및motion:constraintSetEnd
는 다음을 참조합니다. 끝점과 같아야 합니다. 이러한 엔드포인트는<ConstraintSet>
요소가 모션 장면 후반부에 배치됨 -
motion:duration
는 밀리초 단위의 시간을 지정합니다. 시간이 오래 걸립니다.
-
-
<OnSwipe>
드림 모션을 위한 터치 컨트롤을 만들 수 있습니다.-
motion:touchAnchorId
는 사용자가 조회할 수 있는 뷰를 나타냅니다. 스와이프하고 드래그하세요. -
motion:touchAnchorSide
는 드래그하고 있습니다. -
motion:dragDirection
는 진행률을 나타냄 드래그 방향을 변경합니다. 예를 들어motion:dragDirection="dragRight"
는 진행률을 의미합니다. 가 증가합니다.
-
-
<ConstraintSet>
에서 모션을 설명하는 다양한 제약 조건을 정의합니다. 이 예에서 하나의<ConstraintSet>
는 움직임의 각 끝점을 따라가야 합니다. 이러한 엔드포인트는 수직으로 중앙에 배치되어app:layout_constraintTop_toTopOf="parent"
및app:layout_constraintBottom_toBottomOf="parent"
입니다. 수평으로 볼 때, 끝점은 끝점의 맨 왼쪽과 오른쪽에 있습니다. 화면
모션 장면이 구성하는 다양한 요소를 보다 자세히 살펴보려면 자세한 내용은 MotionLayout 예
-
보간된 속성
모션 장면 파일 내에서 ConstraintSet
요소에는
보간되는 속성입니다. 게재위치와
다음 속성은 MotionLayout
로 보간됩니다.
alpha
visibility
elevation
rotation
,rotationX
,rotationY
translationZ
translationY
translationX
scaleX
,scaleY
맞춤 속성
<Constraint>
내에서 <CustomAttribute>
요소를 사용하여
위치 또는 View
과 관련되지 않은 속성에 대한 전환
속성
<Constraint android:id="@+id/button" ...> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="#D81B60"/> </Constraint>
<CustomAttribute>
에는 다음과 같은 두 가지 고유 속성이 있습니다.
motion:attributeName
는 필수 항목이며 getter 및 getter가 있는 객체와 일치해야 합니다. setter 메서드를 사용합니다. getter와 setter는 특정 패턴과 일치해야 합니다. 대상 예를 들어 뷰에 기본 뷰가 있으므로backgroundColor
가 지원됩니다.getBackgroundColor()
및setBackgroundColor()
메서드- 입력해야 하는 다른 속성은 값 유형을 기반으로 합니다. 다음에서 선택:
다음과 같은 지원되는 유형이 있습니다.
<ph type="x-smartling-placeholder">
- </ph>
motion:customColorValue
- 색상motion:customIntegerValue
- 정수motion:customFloatValue
- 부동수motion:customStringValue
- 문자열motion:customDimension
- 측정기준motion:customBoolean
- 부울
맞춤 속성을 지정하는 경우 시작 및 끝부분 모두에서 엔드포인트 값을 정의합니다.
<ConstraintSet>
요소의 끝입니다.
배경 색상 변경
이전 예를 기반으로 뷰의 색상을 변경하려 한다고 가정하겠습니다. 모션의 일부로 작동합니다.
<ph type="x-smartling-placeholder">다음과 같이 <CustomAttribute>
요소를 각 ConstraintSet
요소에 추가합니다.
다음 코드 스니펫입니다.
<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>
추가 MotionLayout 속성
앞의 예의 속성 외에도 MotionLayout
에는
다음과 같은 속성을 지정할 수 있습니다.
app:applyMotionScene="boolean"
는 모션 장면 적용 여부를 나타냅니다. 이 속성의 기본값은true
입니다.app:showPaths="boolean"
는 모션 경로를 있습니다. 이 속성의 기본값은false
입니다.app:progress="float"
를 사용하면 전환 진행 상황을 명시적으로 지정할 수 있습니다. 나0
(전환 시작)에서1
까지의 부동 소수점 값을 사용할 수 있습니다. (전환이 끝날 때)에 나타납니다.app:currentState="reference"
를 사용하면 특정ConstraintSet
를 지정할 수 있습니다.app:motionDebug
를 사용하면 있습니다. 가능한 값은"SHOW_PROGRESS"
,"SHOW_PATH"
또는"SHOW_ALL"
입니다.
추가 리소스
MotionLayout
에 관한 자세한 내용은 다음 리소스를 참고하세요.
- Kotlin 03.2의 고급 Android: MotionLayout을 사용한 애니메이션
- MotionLayout 예제
- GitHub의 MotionLayout/ConstraintLayout 샘플
- MotionLayout 소개(파트 I)
- MotionLayout 소개(파트 II)
- MotionLayout 소개(파트 III)
- MotionLayout 소개(파트 IV)