Shared elements

머티리얼 화면 전환, Shared Elements

플레이스토어에서 앱을 선택하면 리스트의 이미지가 스르르하면서 커지면서 화면 전환이 발생
처음에는 엄청난 라이브러리를 사용한지 알았지만 안드로이드 기본을 이용하면 된다.
안드로이는 구현보다 무엇을 사용하지만 알면 금방 적용 할수 있습니다.
일단 처음 발견한 링크 입니다.
- fragment-transitions-with-shared-elements
위 링크를 보고 사용하는 내용이 shared-elements 라는것을 알고 사용하기로 함
5.0 이상만 가능하지만 이제는 5.0 미만에서의 애니메이션은 신경 안쓰기로 결정함
shared-elements 를 키워드로 검색
안드로이드 개발자 사이트 참고 링크
- https://developer.android.com/training/material/animations.html?hl=ko
다른 사람이 만든 공부하기 쉬운 샘플코드
- https://github.com/mikescamell/shared-element-transitions
프래그먼트에서 프래그먼트로 이동할 때 만 적어 보겠습니다.
- 각각의 상황에 맞는 내용은 위 링크 샘플에 잘 정리 되어 있습니다.
A 프래그먼트에 이미지 뷰를 추가

``` xml
```
- android:transitionName 속성이 2번째 프래그먼트에도 동일하게 사용됩니다.

A 프래그먼트 에서 B 프래그먼트 생성 및 A 프래그먼트 삭제

참고 addToBackStack(TAG) 을 이용해서 뒤로가기 가능하도록 가능합니다.(플레이스토어 처럼 반대 애니메이션 동작 합니다.)

  val mainFragment = MainFragment.newInstance("")
  supportFragmentManager
            .beginTransaction()
            .addSharedElement(img, ViewCompat.getTransitionName(img))
            .remove(intro)
            .replace(R.id.contentFrame, mainFragment)                
            .commit()

여기서 중요한건 아래 내용입니다.
- .addSharedElement(img, ViewCompat.getTransitionName(img))
- img 는 A 프래그먼트의 ImageView 객체 입니다.
- 메소드명처럼 엘레먼트를 전달하여 B 프래그먼트에서 활용 하는걸로 보입니다
B 프래그먼트
- onCreate 생성자에 아래 내용을 추가해 줍니다.
- transition.move 를 수정하면 다양한 효과가 있을거라 생각하지만 move 로 충분 했습니다.
```
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            sharedElementEnterTransition = TransitionInflater.from(context).inflateTransition(android.R.transition.move)
        }
    }
```
- B 프래그먼트에 이미지뷰 추가
- 이번에도 transitionName 필드에 주의해 주세요
- 사이즈를 고정한건 이동하면서 객체가 작아지는걸 볼려고 추가한 내용입니다.
  
``` xml
``` - 여기까지 추가 하면 기본적인 동작을 확인 가능합니다. - 좀더 많은 내용은 중간에 추가된 샘플이 좋습니다.

Menu

머티리얼 화면 전환, Shared Elements