[Android/Kotlin] RecyclerView Animation 활용하기

 

저번 RecyclerView 만들기와 ClickEvent에 이어 화면 전환시 RecyclerView에 간단한 Animation을 적용해보는 것에 대해 포스팅 해보고자 합니다.

저번 포스팅과 이어지기 때문에 아래 글을 먼저 읽고 오시는 것을 추천드립니다 : )

[Android/Kotlin] RecyclerView 만들기

 

[Android/Kotlin] RecyclerView 클릭 이벤트 적용하기

 

 

오늘은 아래와 같이 AnimationTransition을 활용하여 RecyclerView Item에 Transition을 적용해보는 것에 대해 포스팅해볼게요~

 

 

---

📌 RecyclerView Item, ProfileDetailActivity xml에 android:transitionName 추가해주기!

Animation Transition을 사용하시려면 ?!

style에 <item name="android:windowActivityTransitions">true</item> 가 설정되어있어야 한다는 점 주의해주세요!

 

item_recycler_ex.xml 

Profile 사진과 name만 화면전환에서 필요하므로 두군데에만 andorid:transitionName을 추가해주었습니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:tools="http://schemas.android.com/tools"
    android:paddingHorizontal="20dp"
    android:paddingVertical="10dp"
    android:background="@color/purple_500"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <ImageView
        android:id="@+id/img_rv_photo"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@color/black"
        android:transitionName="image"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <TextView
        android:id="@+id/tv_rv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="이름"
        android:transitionName="name"
        android:textStyle="bold"
        android:layout_marginLeft="20dp"
        android:textSize="24sp"
        android:textColor="@color/white"
        app:layout_constraintLeft_toRightOf="@id/img_rv_photo"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        android:id="@+id/tv_rv_age"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="나이"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="20dp"
        android:textSize="18sp"
        android:textColor="@color/white"
        app:layout_constraintLeft_toRightOf="@id/img_rv_photo"
        app:layout_constraintTop_toBottomOf="@id/tv_rv_name"/>


</androidx.constraintlayout.widget.ConstraintLayout>

 

activity_profile_detail.xml

위와 동일한 이름으로 transtionName을 지정해주어야 제대로 화면 Animation이 이뤄집니다!

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".ProfileDetailActivity">

    <ImageView
        android:id="@+id/img_profile"
        android:layout_width="200dp"
        android:layout_height="0dp"
        android:layout_marginTop="20dp"
        android:transitionName="image"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="25sp"
        android:textColor="@color/black"
        android:layout_marginTop="20dp"
        android:transitionName="name"
        app:layout_constraintTop_toBottomOf="@id/img_profile"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>


</androidx.constraintlayout.widget.ConstraintLayout>

 

 

📌 ItemClickListener 외부에 만들기

RecyclerView ClickEvent 적용하기 2번째 방법에서 외부에 만드는 방법을 소개하였으니 생략하도록 하겠습니다.

기존 아이템 클릭 이벤트는 ViewHodler에서 간단하게 구현할 수 있지만 ActivityOptions.makeSceneTransitionAnimation()에는 액티비티가 필요한데 ViewHolder에는 액티비티를 불러올 수 없으므로 아이템 클릭리스너를 Activity에서 작성해야 합니다.

 

makeSceneTransitionAnimation을 적용하는 방법은 전에 포스팅했던 내용과 동일하게 적용해주면 됩니다 !

[Android/Kotlin] 간단한 Animation Transition 구현하기

 MainActivity.kt

ClickListener에 ActivityOptions를 만들어주어 Intent 전달시에 넣어주면 됩니다.

단 LOLLIPOP 버전인 API 21 이상부터만 애니메이션 호환이 가능하기 때문에 아래와 같이 if 문으로 분기처리가 필요합니다.

   profileAdapter.setOnItemClickListener(object : ProfileAdapter.OnItemClickListener{
            override fun onItemClick(v: View, data: ProfileData, pos : Int) {
                Intent(this@MainActivity, ProfileDetailActivity::class.java).apply {
                    putExtra("data", data)
                    addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
                }.run {
                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                        val Pair1 = Pair.create<View,String>(v.img_rv_photo,"image")
                        val Pair2 = Pair.create<View,String>(v.tv_rv_name,"name")
                        val options : ActivityOptions = ActivityOptions.makeSceneTransitionAnimation(this@MainActivity, Pair1, Pair2)
                        startActivity(this,options.toBundle())
                    } else {
                        startActivity(this)
                    }
                }
            }

        })