MotionLayout 예

이 주제에는 MotionLayout을 사용하는 방법의 예가 포함되어 있습니다. 각 예제에는 모션 테마와 레이아웃의 코드와 함께 모션의 애니메이션으로 표시된 GIF가 포함되어 있습니다.

기본 모션

이 예에는 터치하고 드래그하여 가로로 이동할 수 있는 단일 뷰가 포함되어 있습니다.

맞춤 속성 - backgroundColor

이 예제는 기본 모션과 유사합니다. 기본 모션 외에도 뷰의 배경색이 뷰가 이동함에 따라 변경됩니다.

ImageFilterView - 이미지 전환

이 예에서는 ImageFilterView의 채도 값을 전환하는 방법을 보여줍니다.

키프레임 위치

이 예에서는 <KeyFrameSet>를 사용하여 모션 중에 뷰의 Y 위치를 변경합니다.

키프레임 보간

이 예에서는 키프레임 위치의 예를 기반으로 뷰 전환에 회전과 크기 조절을 추가합니다.

키프레임 주기

이 예에서는 <KeyCycle> 요소를 추가하여 파도와 같은 모션을 뷰에 추가합니다.

CoordinatorLayout(1/2)

이 예에서는 MotionLayout을 기존 AppBarLayout에 추가하여 앱 바에 모션을 추가합니다. 이 예는 MotionLayout 소개(파트 III)에 자세히 설명되어 있습니다.

CoordinatorLayout(2/2)

이 예에서는 MotionLayout을 기존 AppBarLayout에 추가하여 앱 바에 모션을 추가합니다.

DrawerLayout(1/2)

이 예에서는 DrawerLayout에 모션을 추가하는 방법을 보여줍니다. 이 예는 MotionLayout 소개(파트 III)에 자세히 설명되어 있습니다.

DrawerLayout(2/2)

이 예에서는 DrawerLayout에 모션을 추가하는 방법을 보여줍니다.

측면 패널

이 예에서는 기본 콘텐츠 영역을 오른쪽으로 드래그할 때 측면 패널을 표시하는 방법을 보여줍니다.

Parallax

이 예에서는 다양한 배경 레이어가 서로 다른 속도로 움직이는 시차 배경을 보여줍니다.

ViewPager

이 예에서는 ViewPager 탭 사이를 스와이프할 때 모션을 추가하는 방법을 보여줍니다. 이 예는 MotionLayout 소개(파트 III)에 자세히 설명되어 있습니다.

ViewPager - Lottie

이 예에서는 ViewPager 탭 사이를 스와이프할 때 모션을 추가하는 방법을 보여줍니다.

복합 모션(1/3)

이 예에서는 이전 예의 요소를 결합하여 복잡한 모션을 보여줍니다.

복합 모션(2/3)

이 예에서는 이전 예의 요소를 결합하여 복잡한 모션을 보여줍니다.

복합 모션(3/3)

이 예에서는 이전 예의 요소를 결합하여 복잡한 모션을 보여줍니다.

프래그먼트 전환(1/2)

이 예에서는 MotionLayout을 사용하여 프래그먼트 간에 전환하는 방법을 보여줍니다.

프래그먼트 전환(2/2)

이 예에서는 MotionLayout을 사용하여 프래그먼트 간에 전환하는 방법을 보여줍니다.

YouTube와 같은 모션

이 예에서는 컴팩트 뷰와 추가 콘텐츠가 포함된 전체 화면 환경 간의 전환을 보여줍니다.

KeyTrigger

이 예에서는 전환이 진행률 임계값을 넘을 때 플로팅 작업 버튼을 표시하거나 숨기는 방법을 보여줍니다.

다중 상태

이 예에서는 상태를 사용하여 적용할 모션을 결정하는 방법을 보여줍니다.