Practical Activity Transition in Android

Transcript

1. Practical Transition by punchdrunker
2. ࣗݾ঺հ —2010೥ʙ iOS/AndroidͷΞϓϦΛॻ͍ͯΈΔ —2011೥ʙ SNS mixi(ϛΫγΟ) —2016೥ʙ Ո଒ΞϧόϜ ΈͯͶ(ϛΫγΟ) —DroidKaigiͱ͔shibuya.apkΛӡӦ
3. Sample code —https://github.com/punchdrunker/hocho —android-transition-examples —https://github.com/google/android-transition- examples
4. ໨࣍ —SharedElementΛ࢖͏·ͰͷܦҢ —༻ޠղઆ —͓खຊ —جຊతͳ࢖͍͔ͨ —࣮ࡍͷΞϓϦ΁ͷద༻ —໰୊ͷղܾ๏ͱఘΊͨࣄ —·ͱΊ
5. ܦҢ ࣸਅҰཡը໘͔Βࣸਅͷৄࡉը໘ʹભҠͨ࣌͠ʹ... —Fling to finish(্ԼεϫΠϓͰด͡Δ)Λ࣮૷͍ͨ͠ —Ͳ͏ͤͳΒਮͳΞχϝʔγϣϯԋग़΋ग़དྷΔͱخ͍͠ —υΩϡϝϯτ௨Γʹॻ͍ͯΔͷʹಈ͔Μ!!!!1 —ॻ͍ͨ௨Γʹಈ͍ͯ·ͨ͠(൓ল) x 100 —׬શʹཧղͨ͠!! —࠳ં
6. ༻ޠͷઆ໌(1) —Transition framework(ભҠ) —ը໘ભҠͰϨΠΞ΢τʹΞχϝʔγϣϯޮՌΛ෇͚ Δ͜ͱ΋Ͱ͖ΔϑϨʔϜϫʔΫͷ૯শ —minSdkVersion 21 —Transition —Transition ManagerʹΑͬͯ؅ཧ͞ΕΔɺ"ભ Ҡ"ͦͷ΋ͷ
7. ༻ޠͷઆ໌(2) —SharedElement(View) —ભҠݩͱભҠઌͰܨ͗߹Θ͍ͤͨViewɻoptionͱ ͯ͠startActivityʹ౉͢ɻ —Transition name(String) —ભҠݩͱભҠઌͷViewʹಉ͡transitionNameΛ෇ ͚ΔࣄͰSharedElementͱͯ͠ೝࣝ͞ΕΔ
8. ͓खຊʹͨ͠΋ͷ —android-transition-examples —https://github.com/google/android-transition- examples —twitterެࣜΫϥΠΞϯτ
9. جຊతͳ࢖͍ํ
10. Transitionͷύλʔϯ —Fragment to Fragment —Activity to Activity
11. Fragment to Fragment 1ͭͷActivity಺ͰͷભҠ͸google example͕޷ྫɻ ભҠ͢Δ࣌ͷFragmentManagerʹaddSharedElement ϝιουͰભҠݩͷImageViewͱtransitionNameΛϖ ΞͰηοτ͢Δɻ ભҠઌͰ΋ಉ༷ɻ (transitionNameͷઃఆ͸ίʔυଆ͔ΒͰ΋ϨΠΞ΢τ xml͔ΒͰ΋Մೳɻ)
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();
13. sampleͷಈ͖
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)
15. ࣮ࡍͷΞϓϦ΁ͷద༻ ΋ͱ΋ͱͷ࢓༷ —RecyclerViewͰࣸਅΛάϦουදࣔ —ભҠͨ͠ઌͷৄࡉը໘Ͱ͸ࠨӈʹεϫΠϓ͢Δͱࣸਅ ΛҠಈͰ͖Δ(ViewPager) —εϫΠϓͨ͠ޙʹը໘Λดͯ͡Ϧετʹ໭Δͱɺͦͷ ҐஔʹεΫϩʔϧ͍ͯ͠Δ
16. ໰୊ͱͦͷղܾ๏ ͔͜͜Β͸αϯϓϧΛݟͳ͕Βղઆ͠·͢(item1&2&3)
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) }
18. ViewPagerͰࠔΔ͜ͱ —item4Ͱ໰୊͕ൃੜ͢Δ —ճආࡦΛitem5ͰରԠ
19. εϫΠϓͨ͠ޙʹ໭ΓઌͷImageViewΛมߋ͢Δʹ͸ ίʔϧόοΫͰಈతʹมߋͰ͖Δ
20. ViewPagerͱͷ࿈ܞ ඞਢίʔϧόοΫ —setEnterSharedElementCallback —setExitSharedElementCallback FragmentManagerΛ࢖ͬͨભҠͰ͸ɺFragmentͰར ༻ startActivityΛ࢖ͬͨભҠͰ͸ɺActivityͰར༻
21. ίʔϧόοΫͰԿ͕ग़དྷΔ͔ ඥ෇͘SharedElementΛಈతʹมߋͰ͖Δ setExitSharedElementCallback(object : SharedElementCallback() { // names: List<String>, sharedElements: MutableMap<String, View> override fun onMapSharedElements(names: ..., sharedElements: ...) { val viewHolder = fromFragment?.getViewHolder(newPosition) val itemView = viewHolder?.itemView ?: return val photoView = itemView.findViewById<ImageView>(R.id.card_photo) sharedElements[names[0]] = photoView } })
22. ίʔϧόοΫͷλΠϛϯά —Activity A(Ұཡ)͔ΒActivity B(ৄࡉ)ʹભҠ —AͷExitSharedElementCallback͕ݺ͹ΕΔ —BͷEnterSharedElementCallback͕ݺ͹ΕΔ —B͔ΒAʹ໭Δ —BͷEnterSharedElementCallback͕ݺ͹ΕΔ —AͷExitSharedElementCallback͕ݺ͹ΕΔ
23. ͳͥ? ໭Δ࣌ͷActivity Transition͸དྷͨ࣌ͷanimationΛ reverse͢Δҝ (finishAfterTransition ͋ͨΓΛಡΉͱॻ͍ͯ͋Δ)
24. ͞ΒʹεΫϩʔϧ͕ඞཁ ఘΊͨ
26. ͞ΒͳΔ໰୊ Transition Animation ͕X?????a ܥͷ୺຤Ͱ·ͱ΋ʹ ಈ͔ͳ͔ͬͨ !
27. ղࢄ
28. FIN