(안드로이드) constraintLayout animation

목표 화면

 

 

 

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

    <data>
        <variable
            name="ttsVm"
            type="com.example.layoutpj.ui.tts.vm.TTSViewModel" />
        <variable
            name="frg"
            type="com.example.layoutpj.ui.tts.TTSFragment" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/main_constraint"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:id="@+id/testbtn"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layout_constraintTop_toBottomOf="@id/top_cover"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toTopOf="@id/btn_container"
            android:background="@null"/>

        <View
            android:id="@+id/top_cover"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_constraintBottom_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:background="@color/sunflower_green_300"/>




        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/btn_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="parent"
            android:focusable="true"
            android:paddingTop="20dp">

            <ImageView
                android:id="@+id/tts_btn_1"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="@color/sunflower_yellow_300"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintBottom_toTopOf="@id/tv_positon_count"
                app:layout_constraintHorizontal_chainStyle="spread"
                app:layout_constraintEnd_toStartOf="@id/tts_btn_2"
                android:layout_marginBottom="20dp"/>
            <ImageView
                android:id="@+id/tts_btn_2"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="@color/sunflower_white"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintStart_toEndOf="@id/tts_btn_1"
                app:layout_constraintBottom_toBottomOf="@id/tts_btn_1"
                app:layout_constraintEnd_toStartOf="@id/tts_btn_3"/>
            <ImageView
                android:id="@+id/tts_btn_3"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="@color/sunflower_green_500"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintStart_toEndOf="@id/tts_btn_2"
                app:layout_constraintBottom_toBottomOf="@id/tts_btn_1"
                app:layout_constraintEnd_toStartOf="@id/tts_btn_4"/>
            <ImageView
                android:id="@+id/tts_btn_4"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="@color/sunflower_black"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintStart_toEndOf="@id/tts_btn_3"
                app:layout_constraintBottom_toBottomOf="@id/tts_btn_1"
                app:layout_constraintEnd_toStartOf="@id/tts_btn_5"/>
            <ImageView
                android:id="@+id/tts_btn_5"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="@color/sunflower_yellow_300"
                app:layout_constraintStart_toEndOf="@id/tts_btn_4"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="@id/tts_btn_1"
                app:layout_constraintEnd_toEndOf="parent" />
            <TextView
                android:id="@+id/tv_positon_count"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:textAppearance="@style/TextAppearance.MaterialComponents.Headline6"
                android:textColor="@color/black"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                android:text="@{String.valueOf(ttsVm.currentPosition)}"
                android:background="@color/white"/>
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

- top_cover와 btn_container를 위아래로 숨기고 보이고 할것이다.

 

 

    val constraintSet1 = ConstraintSet()
    val constraintSet2 = ConstraintSet()
    private fun initAnim(){
        //바뀔 layout
        constraintSet2.clone(binding.mainConstraint)
        constraintSet2.clear(R.id.btn_container,ConstraintSet.TOP)
        constraintSet2.clear(R.id.btn_container,ConstraintSet.BOTTOM)
        constraintSet2.connect(R.id.btn_container,ConstraintSet.TOP,ConstraintSet.PARENT_ID,ConstraintSet.BOTTOM)
        constraintSet2.clear(R.id.top_cover,ConstraintSet.BOTTOM)
        constraintSet2.clear(R.id.top_cover,ConstraintSet.TOP)
        constraintSet2.connect(R.id.top_cover,ConstraintSet.BOTTOM,ConstraintSet.PARENT_ID,ConstraintSet.TOP)


        //원본 layout
        constraintSet1.clone(binding.mainConstraint)
        constraintSet1.clear(R.id.btn_container,ConstraintSet.BOTTOM)
        constraintSet1.clear(R.id.btn_container,ConstraintSet.TOP)
        constraintSet1.connect(R.id.btn_container,ConstraintSet.BOTTOM,ConstraintSet.PARENT_ID,ConstraintSet.BOTTOM)
        constraintSet1.clear(R.id.top_cover,ConstraintSet.TOP)
        constraintSet1.clear(R.id.top_cover,ConstraintSet.BOTTOM)
        constraintSet1.connect(R.id.top_cover,ConstraintSet.TOP,ConstraintSet.PARENT_ID,ConstraintSet.TOP)
    }

- clone 대상은 parent view의 constraint

- 이전 제약조건을 제거한뒤 ( clear ) 새 제약조건을 준다 ( connect )

 

    var isChange = true
    private fun toggleAnim(){
        val at = ChangeBounds()
        at.addListener(object :Transition.TransitionListener{
            override fun onTransitionStart(transition: Transition) {

            }
            override fun onTransitionEnd(transition: Transition) {
              Log.e("asdf","go")
                (requireActivity() as TTSMainActivity).toggle()
            }
            override fun onTransitionCancel(transition: Transition) {}
            override fun onTransitionPause(transition: Transition) {}
            override fun onTransitionResume(transition: Transition) {}
        })
        TransitionManager.beginDelayedTransition(binding.mainConstraint,at)
        val ctr =  if (isChange) constraintSet1 else constraintSet2
        ctr.applyTo(binding.mainConstraint)
        isChange = !isChange
    }