Material Motion

https://mobileact.connpass.com/event/181370

Transcript

1. 
   .PCJMF
   "DU
   0/-*/&
   
   ,B[VLJ
   8BUBOBCF .BUFSJBM
   .PUJPO
2. 1SPGJMF w ͳ΂
   w 5XJUUFS
   
   !/BCF$PUU
   w (JU)VC
   
   /6NFSP"OE%FW
   w גࣜձࣾ͸ͯͳ
   w "OESPJE
   "QQ
   %FWFMPQFS
3. .BUFSJBM
   .PUJPO w .BUFSJBM
   %FTJHO
   ʹ͋ΔϞʔγϣϯσβΠϯͷΨΠυϥΠϯ
   w ཁૉͷ਌ࢠؔ܎΍ΞΫγϣϯͷ݁ՌΛڧௐͯ͠ॏཁͳ͜ͱʹ஫ҙ Λͻ͖ɺΞϓϦΛ࢖͏Ϣʔβͷखॿ͚Λ͢Δ
   w Ξχϝʔγϣϯ͢ΔΞΠίϯΛ࢖ͬͨΓϞʔγϣϯΛΧελϚΠ ζͯ͠ϒϥϯυͷΠϝʔδΛ൓өͰ͖Δ
4. 5IF
   NPUJPO
   TZTUFN w ΞϓϦͷૢ࡞ φϏήʔγϣϯ΍ΞΫγϣϯ Λิॿ͢Δ
   5SBOTJUJPO
   ͷύλʔϯ
   w "OESPJE
   Ͱ͸
   NBUFSJBMDPNQPOFOU
   BMQIB
   ͔Β࢖͑Δ
   w ҎԼͷ
   
   ύλʔϯ͕͋Δ
   w $POUBJOFS
   USBOTGPSN
   w 4IBSFE
   BYJT
   w 'BEF
   UISPVHI
   w 'BEF
5. $POUBJOFS
   USBOTGPSN w ίϯςφΛؚΉ
   6*
   ཁૉؒ ͷભҠ
   w '"#
   ͔Β
   #PUUPN4IFFU
   ʹભҠ
   w -JTU
   ͔Βৄࡉϖʔδʹભ Ҡ
   w ͜Ε·Ͱͷ
   4IBSFE
   &MFNFOU
   5SBOTJUJPO
   ͱ͸୯ Ұͷཁૉ ը૾ͱ͔ ʹ࢖Θ ͳ͍ͱ͍͏఺͕ҟͳΔ
6. $POUBJOFS
   USBOTGPSN *NQMFNFOUBUJPO w 4IBSFE
   &MFNFOU
   5SBOTJUJPO
   ͷ࣮૷ͱಉ͡Α͏ʹɺ։࢝ͷ
   7JFX
   ͱભҠઌͷ
   'SBHNFOU
   ͷϧʔτͷ
   7JFX
   ʹ
   USBOTJUJPO/BNF
   Λ ઃఆ͠ɺભҠͷॲཧΛ࣮૷ <View ... android:transitionName="transition_card" /> // navigate with transition card.setOnClickListener { card -> val extras = FragmentNavigatorExtras(card to card.transitionName) findNavController().navigate( R.id.action_List_to_Detail, null, null, extras ) }
7. $POUBJOFS
   USBOTGPSN *NQMFNFOUBUJPO w ભҠઌ
   'SBHNFOU
   ͷ
   TIBSFE&MFNFOU&OUFS5SBOTJUJPO
   ʹ
   .BUFSJBM$POUBJOFS5SBOTGPSN
   Λઃఆ // Fragment.kt override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // setup transition sharedElementEnterTransition = MaterialContainerTransform().apply { // if not exist background in fragment setAllContainerColors( MaterialColors.getColor( requireContext(), android.R.attr.colorBackground, "The attribute is not set in the current theme" ) ) } }
8. $POUBJOFS
   USBOTGPSN *NQMFNFOUBUJPO w ભҠઌ
   'SBHNFOU
   ͷ
   TIBSFE&MFNFOU&OUFS5SBOTJUJPO
   ʹ
   .BUFSJBM$POUBJOFS5SBOTGPSN
   Λઃఆ // Fragment.kt override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // setup transition sharedElementEnterTransition = MaterialContainerTransform().apply { // if not exist background in fragment setAllContainerColors( MaterialColors.getColor( requireContext(), android.R.attr.colorBackground, "The attribute is not set in the current theme" ) ) } }
9. 4IBSFE
   BYJT w ཁૉಉ࢜ͷφϏήʔγϣϯ ͷؔ܎Λද͢
   w Ϣʔβͷొ࿥ϑϩʔ
   w τοϓͷը໘͔Βઃఆը ໘΁ͷભҠ
10. 4IBSFE
    BYJT *NQMFNFOUBUJPO w .BUFSJBM4IBSFE"YJT
    Λ
    USBOTJUJPO
    ʹઃఆ // StartFragment.kt override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // setup transition val backward = MaterialSharedAxis(MaterialSharedAxis.X, false) reenterTransition = backward val forward = MaterialSharedAxis(MaterialSharedAxis.X, true) exitTransition = forward } // EndFragment.kt override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // setup transition val forward = MaterialSharedAxis(MaterialSharedAxis.X, true) enterTransition = forward val backward = MaterialSharedAxis(MaterialSharedAxis.X, false) returnTransition = backward }
11. 4IBSFE
    BYJT *NQMFNFOUBUJPO w .BUFSJBM4IBSFE"YJT
    Λ
    USBOTJUJPO
    ʹઃఆ // StartFragment.kt override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // setup transition val backward = MaterialSharedAxis(MaterialSharedAxis.X, false) reenterTransition = backward val forward = MaterialSharedAxis(MaterialSharedAxis.X, true) exitTransition = forward } // EndFragment.kt override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // setup transition val forward = MaterialSharedAxis(MaterialSharedAxis.X, true) enterTransition = forward val backward = MaterialSharedAxis(MaterialSharedAxis.X, false) returnTransition = backward }
12. 'BEF
    UISPVHI w ڧ͍ؔ܎ੑͷͳ͍ཁૉؒͷ ભҠ
    w #PUUPN/BWJHBUJPO
    Ͱ ͷը໘੾Γସ͑
    ࠨӈͷεϫΠϓͰ͸ͳ ͍͜ͱΛද͢
13. 'BEF
    UISPVHI *NQMFNFOUBUJPO w .BUFSJBM'BEF5ISPVHI
    Λ
    USBOTJUJPO
    ʹઃఆ // Fragment.kt override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // setup transition exitTransition = MaterialFadeThrough() enterTransition = MaterialFadeThrough() }
14. 'BEF
    UISPVHI *NQMFNFOUBUJPO w .BUFSJBM'BEF5ISPVHI
    Λ
    USBOTJUJPO
    ʹઃఆ // Fragment.kt override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // setup transition exitTransition = MaterialFadeThrough() enterTransition = MaterialFadeThrough() }
15. 'BEF w ཁૉ͕ը໘ʹग़ೖΓ͢Δ࣌
    w '"#ɺμΠΞϩάɺ 4OBDLCBS
    ͷදࣔඇද ࣔ
16. 'BEF *NQMFNFOUBUJPO w .BUFSJBM'BEF
    Λ
    5SBOTJUJPO.BOBHFS
    ʹઃఆͯ͠
    7JFX
    ͷදࣔඇදࣔΛߦ͏ fun showFab() { val materialFade = MaterialFade().apply { duration = 150L } TransitionManager.beginDelayedTransition(container, materialFade) fab.isVisible = true } fun hideFab() { val materialFade = MaterialFade().apply { duration = 75L } TransitionManager.beginDelayedTransition(container, materialFade) fab.isVisible = false }
17. 'BEF *NQMFNFOUBUJPO w .BUFSJBM'BEF
    Λ
    5SBOTJUJPO.BOBHFS
    ʹઃఆͯ͠
    7JFX
    ͷදࣔඇදࣔΛߦ͏ fun showFab() { val materialFade = MaterialFade().apply { duration = 150L } TransitionManager.beginDelayedTransition(container, materialFade) fab.isVisible = true } fun hideFab() { val materialFade = MaterialFade().apply { duration = 75L } TransitionManager.beginDelayedTransition(container, materialFade) fab.isVisible = false }
18. 3FDBQ w NBUFSJBMDPNQPOFOU
    SD
    ͕ઌ೔ެ։͞Εͯ
    4UBCMF
    ͷ ެ։΋ۙ͘ͳΓ
    .PUJPO
    ΋ਖ਼ࣜʹ࢖͑ΔΑ͏ʹͳΔ
    w ϥΠϒϥϦଆͰ
    5SBOTJUJPO
    ͕༻ҙ͞Εͨ͜ͱͰɺ؆୯ʹ
    5SBOTJUJPO
    ͷద༻͕Ͱ͖ΔΑ͏ʹ
    w ద੾ͳϞʔγϣϯΛద༻͢Δ͜ͱͰΞϓϦΛ࢖͏Ϣʔβͷखॿ͚ ͕Ͱ͖Δ
19. ࢀߟ
    w IUUQTNBUFSJBMJPEFTJHONPUJPOVOEFSTUBOEJOH NPUJPOIUNM
    w IUUQTHJUIVCDPNNBUFSJBMDPNQPOFOUTNBUFSJBM DPNQPOFOUTBOESPJE
    αϯϓϧ
    w IUUQTHJUIVCDPN/6NFSP"OE%FW .BUFSJBM.PUJPO&YBNQMFBOESPJE
20. 5IBOL
    ZPV