Shared Element Transitions

Shared Element Transitions?

• 사용자에 의해 선택된 이미지가 다음 화면까지 연결되어 보여질 수 있습니다.
• 화면 간에 공유 되는 요소들에 의해서 좀 더 직관적이고 부드러운 연출을 가능토록 합니다.

TransitionName 지정하기

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

    <ImageView
        android:id="@+id/img_thumb"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:scaleType="centerCrop"
        android:transitionName="pair_thumb" />

• 이어서 화면 전환에 후에 보여질 레이아웃에도 다음과 같이 설정

        <ImageView
            android:id="@+id/img_thumb"
            android:layout_width="250dp"
            android:layout_height="250dp"
            android:layout_marginTop="20dp"
            android:scaleType="centerCrop"
            android:transitionName="pair_thumb" />

-> 공유 되는 요소 간의 transitionName은 동일한 이름으로 지정해야 합니다.

Shared Elements Transition 사용하기

    @Override
    public void onItemClick(View view, AlbumVO albumVO) {
        Intent intent = new Intent(MainActivity.this, DetailActivity.class);
        intent.putExtra("albumVO", albumVO);

        View thumbView = view.findViewById(R.id.img_thumb);

        Pair<View, String> pair_thumb = Pair.create(thumbView, thumbView.getTransitionName());

        ActivityOptionsCompat optionsCompat = 
               ActivityOptionsCompat.makeSceneTransitionAnimation(MainActivity.this, pair_thumb);
        startActivity(intent, optionsCompat.toBundle());
    }

• 전달 받은 View와 앞서 지정했던 transitionName을 묶어 Pair라는 클래스에 담습니다. Pair<F,S>는 데이터를 좀 더 쉽게 전달하기 위한 컨테이너의 역할을 한다고 보시면 됩니다.

• 이어서, ActionOptionsCompat의 makeSceneTransitionAnimation(Activity, Pair<F,S> ...SharedElements)를 통해 애니메이션을 생성합니다.

• 그 이후에 전달된 액티비티에서 넘겨 받은 데이터를 세팅하고, 반대로 다시 이전의 Activity로 돌아올 때의 애니메이션 효과 또한 적용해봅시다.

    @Override
    public void onEnterAnimationComplete() {
        super.onEnterAnimationComplete();
        setInit();
    }
    ...
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn_back:
                supportFinishAfterTransition();
                break;
        }
    }

• onEnterAnimationComplete()는 진입 애니메이션이 끝난 시점에 호출 됩니다.
• 그 다음으로, 되돌아가기 버튼 클릭시에는 supportFinishAfterTransition()만 호출 해주면되는데, 해당 Activity를 finish()함과 동시에 Transition 애니메이션을 동작하도록 지원하고 있습니다.

참고

https://re-build.tistory.com/43