안드로이드 makeSceneTransitionAnimation

<개요>

당근마켓 클론앱 프로젝트를 하는 중 리사이클러뷰 아이템을 클릭하였을때 화면 전환 시 이미지가 자연스럽게

확대되는듯한 애니메이션을 구현하고자 사용함

클릭 -> 애니메이션 -> 화면전환 완료

---

<적용방법>

1. theme.xml 에 애니메이션 사용 설정 해줌

<item name="android:windowActivityTransitions">true</item>

2. Intent에 ActivityOptions 추가해줌

- 나같은 경우는 리사이클러뷰 어뎁터 사용하였으므로 ViewHolder Class에서 사용

- "image_transform" 이라는 이름으로 대상 찾음

// ViewHolder Class
    inner class ViewHolder(val binding: ItemHomeBinding) : RecyclerView.ViewHolder(binding.root) {
        fun bind(info: HomeModel) {
            binding.model = info
            val context = itemView.context
            // 아이템 클릭
            binding.itemLayout.setOnSingleClickListener {

                // 상품 정보보기 화면으로 이동
                val i = Intent(context, ProductActivity::class.java)
                val options =
                    ActivityOptions.makeSceneTransitionAnimation(activity, binding.itemIv, "image_transform")
                context.startActivity(
                    i,
                    options.toBundle()
                )
            }
        }
    }

3. 전환된 액티비티에서 ImageView 설정

- ImageView 에 transitionName을 2번에서 image_transform 으로 맞춰줌

<?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"
    xmlns:tools="http://schemas.android.com/tools">

    <data>

        <variable
            name="viewModel"
            type="com.jw.cloneappcarrot.feature.product.ProductViewModel" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".feature.product.ProductActivity">

        <ImageView
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:src="@drawable/ic_launcher_background"
            android:transitionName="image_transform"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

 

※ 지금은 두번째 액티비티에서 ImageView를 사용하였지만 클론앱 구현하기 위해서는 ViewPager 를 사용할거같아 기능수정이 필요할거같음