Practical Activity Transition in Android

Practical Activity Transition in Android

4f31137c606d3d1c06d0d86fc7fd4bdd?s=128

punchdrunker

March 08, 2019
Tweet

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. ͞ΒʹεΫϩʔϧ͕ඞཁ ఘΊͨ

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

  27. ղࢄ

  28. FIN