[Android] Shared Element Transitions 사용하기

Shared Element Transitions

Shared Element Transitions을 사용하면 선택한 이미지가 다음 화면까지 연결되어 보여질 수 있습니다.

또한, 이는 화면 간에 공유되는 요소들에 의해서 좀 더 직관적이고 부드러운 연출을 가능하도록 합니다.

애니메이션으로 활동 시작  |  Android 개발자  |  Android Developers

Continuous Shared Element Transitions: RecyclerView to ViewPager

https://mikescamell.com/shared-element-transitions-part-1/

https://mikescamell.com/shared-element-transitions-part-2/

 

Shared Element Transitions 구현하기

1. TransitionName 지정

먼저 화면 간의 공유에 사용할 요소에 transitionName을 지정해줘야 합니다.

이 때, 화면 전환 후에 보여질 레이아웃에도 동일한 이름으로 transitionName을 지정해줘야 합니다.

즉, 공유되는 요소 간의 transitionName은 동일한 이름으로 지정합니다.

<com.google.android.material.card.MaterialCardView
    android:id="@+id/cardView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:transitionName="card" />
    
<com.google.android.material.card.MaterialCardView
    android:id="@+id/cardView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:transitionName="card" />

 

2. Shared Elements Transition 사용

전달 받은 View와 앞서 지정했던 transitionName을 묶어 Pair라는 클래스에 담습니다. 

Pair<F,S>는 데이터를 좀 더 쉽게 전달하기 위한 컨테이너의 역할을 한다고 보시면 됩니다. 

그 다음, ActivityOptionsCompat의 makeSceneTransitionAnimation()을 통해 애니메이션을 생성합니다. 

private fun openDetail(view: View, cardName: CharSequence) {
    view.transitionName = "card"
    val optionsCompat =
        ActivityOptionsCompat.makeSceneTransitionAnimation(
            this@MainActivity,
            Pair(view, view.transitionName)
        )
    DetailActivity.start(this, cardName.toString(), view.backgroundTintList, optionsCompat)
}

 

3. 예시 결과물