[android] ConstraintLayout에서의 아이템 상태 전환 애니메이션

14 Dec 2023

android

ConstraintLayout은 안드로이드 앱을 개발할 때 유용한 레이아웃 관리자입니다. 이 레이아웃을 사용하여 앱의 화면 요소를 쉽게 정렬하고 배치할 수 있습니다. 또한 ConstraintLayout을 사용하여 화면 요소의 상태 전환 애니메이션을 만들 수 있습니다.

이번에는 ConstraintLayout을 사용하여 아이템의 상태를 전환하는 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

1. 상태 전환 애니메이션 구현하기

ConstraintLayout에서 상태 전환 애니메이션을 구현하는 방법은 간단합니다.

먼저, ConstraintLayout을 사용하여 애니메이션을 적용할 뷰의 초기 상태와 최종 상태를 정의합니다. 이후, 이 두 상태 사이의 전환을 정의하고 애니메이션을 적용합니다.

<ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/myTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, World!"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/myButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Animate"
        app:layout_constraintTop_toBottomOf="@id/myTextView"
        app:layout_constraintStart_toStartOf="parent" />

</ConstraintLayout>

위의 예시 코드에서는 ConstraintLayout 안에 TextView와 Button을 배치하고 있습니다.

이때, Button을 클릭했을 때 TextView의 위치를 변경하는 간단한 애니메이션을 구현해보겠습니다.

val textView = findViewById<TextView>(R.id.myTextView)
val button = findViewById<Button>(R.id.myButton)

button.setOnClickListener {
    val constraintSet = ConstraintSet()
    constraintSet.clone(this, R.layout.new_constraint_layout) // new_constraint_layout은 TextView의 새로운 위치를 정의한 레이아웃 파일입니다.
    TransitionManager.beginDelayedTransition(constraintLayout)
    constraintSet.applyTo(constraintLayout)
}

위 코드에서는 버튼을 누를 때 ConstraintSet을 사용하여 TextView의 새로운 위치를 정의한 후, TransitionManager를 이용하여 애니메이션을 적용하고 있습니다.

이를 통해 ConstraintLayout에서 간단한 상태 전환 애니메이션을 구현할 수 있습니다.

이처럼 ConstraintLayout은 다양한 애니메이션과 상태 전환을 지원하여 화면 요소의 동적인 변화를 구현하는 데 효과적으로 활용할 수 있습니다.