[Java][Android] MotionLayout 활용하기

안녕하세요

오늘은 MotionLayout을 활용해보도록 하겠습니다.

MotionLayout은 UI간 애니메이션과 전환을 부드럽게 표현할 수 있는 레이아웃입니다.

 

우선 MotionLayout xml을 추가해줘야합니다.

 

 

res/xml/scene.xml 에다가 MotionScene 을 정의해줘야합니다.

 

 

전체 코드입니다.

 

res/xml/scene.xml

<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto">

  <!-- 전환 정의 -->
  <Transition
    app:constraintSetStart="@+id/start"
    app:constraintSetEnd="@+id/end"
    app:duration="1000">
    <!-- 클릭 시 전환 실행 -->
    <OnClick
      app:targetId="@+id/btnMove"
      app:clickAction="toggle" />
  </Transition>

  <!-- 시작 상태 -->
  <ConstraintSet android:id="@+id/start">
    <Constraint
      android:id="@+id/btnMove"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintStart_toStartOf="parent"/>
  </ConstraintSet>

  <!-- 종료 상태 -->
  <ConstraintSet android:id="@+id/end">
    <Constraint
      android:id="@+id/btnMove"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:layout_constraintTop_toTopOf="parent"
      app:layout_constraintEnd_toEndOf="parent"/>
  </ConstraintSet>
</MotionScene>

 

 

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"
  android:id="@+id/motionLayout"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  app:layoutDescription="@xml/scene">

  <Button
    android:id="@+id/btnMove"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="터치하세요" />
</androidx.constraintlayout.motion.widget.MotionLayout>

 

시연 영상입니다.