Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Practical Activity Transition in Android

Practical Activity Transition in Android

punchdrunker

March 08, 2019
Tweet

More Decks by punchdrunker

Other Decks in Programming

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