[내일배움캠프] 캠프 19주차 - 3/18(월) #MotionLayout

📝TIL

• [기술 면접 질문] 함수형 프로그래밍(Functional Programming)이란 무엇인가?
• [기술 면접 질문] 람다 표현식(Lambda Expression)은 무엇이고 어떻게 사용되는가?

Motion Layout

📌참고자료

• 안드로이드 애니메이션 구현을 위한 MotionLayout 이해하기 | Chanjoo Lee
• MotionLayout으로 모션 및 위젯 애니메이션 관리 | Android Developers

build.gradle(app)파일에 dependency 추가하기

• MotionLayout은 ConstraintLayout의 서브 클래스
  -> ConstraintLayout dependency 필요

dependencies {
    implementation("androidx.constraintlayout:constraintlayout:2.2.0-alpha13")
}

MotionLayout 레이아웃 파일 만들기

• 애니메이션을 넣고자 하는 레이아웃을 MotionLayout 태그로 감싸기

MotionScene 만들기

• MotionLayout의 layoutDescription 속성에 연결할 MotionScene 파일 만들기
  (각 MotionLayout은 별도의 MotionScene 참조)
• resource 폴더 안에 xml 폴더 생성 후, xml 파일 생성
• MotionScene 파일에는 애니메이션의 시작과 끝에 해당하는 ConstraintSet 2개 정의해야

• 예. Button의 수평 이동을 정의한 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" />
    </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>

• ConstraintSet 태그
  • 모션을 설명하는 다양한 제약 조건 정의
  • 각 모션의 엔드 포인트에 하나의 ConstraintSet 정의
• Transition 태그
  • 모션의 기본 정의 포함
  • 모션의 엔드포인트 참조(motion:constraintSetStart, motion:constraintSetEnd)
  • 모션이 완료되는 데 걸리는 시간 설정(motion:duration)
• OnSwipe 태그
  • 모션 터치 컨트롤
  • 사용자가 스와이프/드래그할 수 있는 뷰 설정(motion:touchAnchorId)
  • 드래그의 진행 방향 설정(motion:dragDirection)