[Android, ConstraintSet] ConstraintSet 을 통한 애니메이션

안녕하세요. 

이번에 드디어 ConstraintLayout 을 공부해서 실무에 적용해 보았습니다.

제가 느낀 바로는 RelativeLayout 대신에 ConstraintLayout 을 사용하면 보다 효과적으로 UI 를 적용할 수 있을 것 같습니다.

여기서 ConstraintSet 을 통한 애니메이션 적용이 재밌어서 포스팅을 해볼까 합니다.

아래 예제는 http://www.kmshack.kr/tag/constraintset/ 를 보며 조금씩 추가해 보았습니다.

화면은 MainActivity 1개와 xml 2개 (activity_main, activity_main_2) 를 아래와 같이 만드시면 됩니다.

MainActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val constraintSet1 = ConstraintSet()
        constraintSet1.clone(constraintLayout)

        val constraintSet2 = ConstraintSet()
        constraintSet2.clone(this, R.layout.activity_main_2)

        var changed = false
        button.setOnClickListener {

            /*val transition = AutoTransition()
            transition.duration = 1000

            TransitionManager.beginDelayedTransition(constraintLayout, transition)*/
            
            TransitionManager.beginDelayedTransition(constraintLayout)
            
            val constraint = if (changed) constraintSet1 else constraintSet2
            constraint.applyTo(constraintLayout)
            changed = !changed

            textView.text = changed.toString()
        }
    }
}

애니메이션 효과를 위 주석처럭 TransitionManger.beginDelayedTrainsition(constraintLayout, transition)

와 같이 설정하여 커스텀 할 수 있습니다.

참고로 위 코드는 kotlin-extensions 를 사용하여 따로 뷰 선언을 할 필요가 없습니다.

constraintSet1.clone(constraintLayout)

에서 변수 constraintLayout 은 activity_main 에 있는 ConstraintLayout 의 id 입니다.

activity_main

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    android:id="@+id/constraintLayout"
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image"
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:background="@color/colorAccent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

    <TextView
        android:id="@+id/textView"
        android:text="Hello World"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="animate"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</android.support.constraint.ConstraintLayout>

activity_main_2

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image"
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:background="@color/colorAccent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <TextView
        android:id="@+id/textView"
        android:text="Hello World"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="100dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</android.support.constraint.ConstraintLayout>

activity_main 과 activity_main_2  에서 imageView, TextView 에 애니메이션 효과를 주었습니다.

여기서 중요한 것은 효과를 줄 두 View 의 id 를 동일하게 해줘야 움직인다는 것입니다.