Practical Activity Transition in Android

Transcript

1. Practical Transition
   by punchdrunker
   

   View Slide

2. ࣗݾ঺հ
   —2010೥ʙ iOS/AndroidͷΞϓϦΛॻ͍ͯΈΔ
   —2011೥ʙ SNS mixi(ϛΫγΟ)
   —2016೥ʙ Ո଒ΞϧόϜ ΈͯͶ(ϛΫγΟ)
   —DroidKaigiͱ͔shibuya.apkΛӡӦ
   

   View Slide

3. Sample code
   —https://github.com/punchdrunker/hocho
   —android-transition-examples
   —https://github.com/google/android-transition-
   examples
   

   View Slide

4. ໨࣍
   —SharedElementΛ࢖͏·ͰͷܦҢ
   —༻ޠղઆ
   —͓खຊ
   —جຊతͳ࢖͍͔ͨ
   —࣮ࡍͷΞϓϦ΁ͷద༻
   —໰୊ͷղܾ๏ͱఘΊͨࣄ
   —·ͱΊ
   

   View Slide

5. ܦҢ
   ࣸਅҰཡը໘͔Βࣸਅͷৄࡉը໘ʹભҠͨ࣌͠ʹ...
   —Fling to finish(্ԼεϫΠϓͰด͡Δ)Λ࣮૷͍ͨ͠
   —Ͳ͏ͤͳΒਮͳΞχϝʔγϣϯԋग़΋ग़དྷΔͱخ͍͠
   —υΩϡϝϯτ௨Γʹॻ͍ͯΔͷʹಈ͔Μ!!!!1
   —ॻ͍ͨ௨Γʹಈ͍ͯ·ͨ͠(൓ল) x 100
   —׬શʹཧղͨ͠!!
   —࠳ં
   

   View Slide

6. ༻ޠͷઆ໌(1)
   —Transition framework(ભҠ)
   —ը໘ભҠͰϨΠΞ΢τʹΞχϝʔγϣϯޮՌΛ෇͚
   Δ͜ͱ΋Ͱ͖ΔϑϨʔϜϫʔΫͷ૯শ
   —minSdkVersion 21
   —Transition
   —Transition ManagerʹΑͬͯ؅ཧ͞ΕΔɺ"ભ
   Ҡ"ͦͷ΋ͷ
   

   View Slide

7. ༻ޠͷઆ໌(2)
   —SharedElement(View)
   —ભҠݩͱભҠઌͰܨ͗߹Θ͍ͤͨViewɻoptionͱ
   ͯ͠startActivityʹ౉͢ɻ
   —Transition name(String)
   —ભҠݩͱભҠઌͷViewʹಉ͡transitionNameΛ෇
   ͚ΔࣄͰSharedElementͱͯ͠ೝࣝ͞ΕΔ
   

   View Slide

8. ͓खຊʹͨ͠΋ͷ
   —android-transition-examples
   —https://github.com/google/android-transition-
   examples
   —twitterެࣜΫϥΠΞϯτ
   

   View Slide

9. جຊతͳ࢖͍ํ
   

   View Slide

10. Transitionͷύλʔϯ
    —Fragment to Fragment
    —Activity to Activity
    

    View Slide

11. Fragment to Fragment
    1ͭͷActivity಺ͰͷભҠ͸google example͕޷ྫɻ
    ભҠ͢Δ࣌ͷFragmentManagerʹaddSharedElement
    ϝιουͰભҠݩͷImageViewͱtransitionNameΛϖ
    ΞͰηοτ͢Δɻ
    ભҠઌͰ΋ಉ༷ɻ
    (transitionNameͷઃఆ͸ίʔυଆ͔ΒͰ΋ϨΠΞ΢τ
    xml͔ΒͰ΋Մೳɻ)
    

    View Slide

12. Fragment to Fragment
    ࣮૷ྫ
    ImageView transitioningView = view.findViewById(R.id.card_image);
    fragment.getFragmentManager()
    .beginTransaction()
    .setReorderingAllowed(true) // Optimize for shared element transition
    .addSharedElement(
    transitioningView,
    transitioningView.getTransitionName())
    .replace(
    R.id.fragment_container,
    new ImagePagerFragment(),
    ImagePagerFragment.class.getSimpleName())
    .addToBackStack(null)
    .commit();
    

    View Slide

13. sampleͷಈ͖
    

    View Slide

14. Activity to Activity
    transitionNameΛϖΞͰઃఆ͢Δͷ͸ಉ͡ɻ
    startActivityͷoptionͱͯ͠ɺsharedElementΛϖΞʹ
    ͨ͠bundleΛ౉͢ɻ
    ෳ਺౉͚ͨ͠Ε͹PairܕͰՄม௕Ҿ਺ͱͯ͠౉ͤΔɻ
    val intent = ToActivity.createIntent(context, position)
    val option = ActivityOptions.makeSceneTransitionAnimation(
    activity,
    view,
    getString(R.string.shared_element)).toBundle()
    startActivity(intent, option)
    

    View Slide

15. ࣮ࡍͷΞϓϦ΁ͷద༻
    ΋ͱ΋ͱͷ࢓༷
    —RecyclerViewͰࣸਅΛάϦουදࣔ
    —ભҠͨ͠ઌͷৄࡉը໘Ͱ͸ࠨӈʹεϫΠϓ͢Δͱࣸਅ
    ΛҠಈͰ͖Δ(ViewPager)
    —εϫΠϓͨ͠ޙʹը໘Λดͯ͡Ϧετʹ໭Δͱɺͦͷ
    ҐஔʹεΫϩʔϧ͍ͯ͠Δ
    

    View Slide

16. ໰୊ͱͦͷղܾ๏
    ͔͜͜Β͸αϯϓϧΛݟͳ͕Βղઆ͠·͢(item1&2&3)
    

    View Slide

17. AppBar/ϑολ͔ͿΔ໰୊
    ্ԼʹॏͳΔView͕͋ͬͨΒεΫϩʔϧͰճආ
    private fun shoulScrollList(cell: View): Boolean {
    val cellLocation = IntArray(2)
    cell.getLocationOnScreen(cellLocation)
    val cellTop = cellLocation[1]
    val listLocation = IntArray(2)
    binding.list.getLocationOnScreen(listLocation)
    val diffToAppBar = cellTop - listLocation[1]
    val cellBottom = cellTop + binding.list.height
    val listBottom = listLocation[1] + binding.list.height
    val diffToBottom = cellBottom - listBottom
    return (diffToAppBar < 0 || diffToBottom > 0)
    }
    

    View Slide

18. ViewPagerͰࠔΔ͜ͱ
    —item4Ͱ໰୊͕ൃੜ͢Δ
    —ճආࡦΛitem5ͰରԠ
    

    View Slide

19. εϫΠϓͨ͠ޙʹ໭ΓઌͷImageViewΛมߋ͢Δʹ͸
    ίʔϧόοΫͰಈతʹมߋͰ͖Δ
    

    View Slide

20. ViewPagerͱͷ࿈ܞ
    ඞਢίʔϧόοΫ
    —setEnterSharedElementCallback
    —setExitSharedElementCallback
    FragmentManagerΛ࢖ͬͨભҠͰ͸ɺFragmentͰར
    ༻
    startActivityΛ࢖ͬͨભҠͰ͸ɺActivityͰར༻
    

    View Slide

21. ίʔϧόοΫͰԿ͕ग़དྷΔ͔
    ඥ෇͘SharedElementΛಈతʹมߋͰ͖Δ
    setExitSharedElementCallback(object : SharedElementCallback() {
    // names: List, sharedElements: MutableMap
    override fun onMapSharedElements(names: ..., sharedElements: ...) {
    val viewHolder = fromFragment?.getViewHolder(newPosition)
    val itemView = viewHolder?.itemView ?: return
    val photoView = itemView.findViewById(R.id.card_photo)
    sharedElements[names[0]] = photoView
    }
    })
    

    View Slide

22. ίʔϧόοΫͷλΠϛϯά
    —Activity A(Ұཡ)͔ΒActivity B(ৄࡉ)ʹભҠ
    —AͷExitSharedElementCallback͕ݺ͹ΕΔ
    —BͷEnterSharedElementCallback͕ݺ͹ΕΔ
    —B͔ΒAʹ໭Δ
    —BͷEnterSharedElementCallback͕ݺ͹ΕΔ
    —AͷExitSharedElementCallback͕ݺ͹ΕΔ
    

    View Slide

23. ͳͥ?
    ໭Δ࣌ͷActivity Transition͸དྷͨ࣌ͷanimationΛ
    reverse͢Δҝ
    (finishAfterTransition ͋ͨΓΛಡΉͱॻ͍ͯ͋Δ)
    

    View Slide

24. ͞ΒʹεΫϩʔϧ͕ඞཁ
    ఘΊͨ
    

    View Slide

25. View Slide

26. ͞ΒͳΔ໰୊
    Transition Animation ͕X?????a ܥͷ୺຤Ͱ·ͱ΋ʹ
    ಈ͔ͳ͔ͬͨ
    !
    

    View Slide

27. ղࢄ
    

    View Slide

28. FIN
    

    View Slide