이 페이지는 Cloud Translation API를 통해 번역되었습니다.

MotionLayout으로 모션 및 위젯 애니메이션 관리

MotionLayout 드림 앱의 모션 및 위젯 애니메이션을 관리하는 데 도움이 되는 레이아웃 유형입니다. MotionLayout는 ConstraintLayout, 풍부한 데이터 기반 레이아웃 기능을 제공합니다. ConstraintLayout 라이브러리의 일부로 MotionLayout 지원 라이브러리로 제공됩니다

MotionLayout는 레이아웃 전환과 복잡한 모션 사이의 간극을 메웁니다. 특성 애니메이션의 조합을 제공하여 프레임워크, TransitionManager 및 CoordinatorLayout:

</ph> <ph type="x-smartling-placeholder">

</ph> 그림 1. 기본적인 터치 제어 모션입니다.

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">
- motion:customColorValue - 색상
- motion:customIntegerValue - 정수
- motion:customFloatValue - 부동수
- motion:customStringValue - 문자열
- motion:customDimension - 측정기준
- motion:customBoolean - 부울

맞춤 속성을 지정하는 경우 시작 및 끝부분 모두에서 엔드포인트 값을 정의합니다. <ConstraintSet> 요소의 끝입니다.

배경 색상 변경

이전 예를 기반으로 뷰의 색상을 변경하려 한다고 가정하겠습니다. 모션의 일부로 작동합니다.

</ph> <ph type="x-smartling-placeholder">

</ph> 그림 2. 뷰가 이동하면 배경색이 변경됩니다.

다음과 같이 <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에 관한 자세한 내용은 다음 리소스를 참고하세요.