Material Motion

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

Transcript

1. 
   .PCJMF"DU0/-*/&
   ,B[VLJ8BUBOBCF
   .BUFSJBM.PUJPO
   

   View Slide

2. 1SPGJMF
   w ͳ΂
   w 5XJUUFS!/BCF$PUU
   w (JU)VC/6NFSP"OE%FW
   w גࣜձࣾ͸ͯͳ
   w "OESPJE"QQ%FWFMPQFS
   

   View Slide

3. .BUFSJBM.PUJPO
   w .BUFSJBM%FTJHOʹ͋ΔϞʔγϣϯσβΠϯͷΨΠυϥΠϯ
   w ཁૉͷ਌ࢠؔ܎΍ΞΫγϣϯͷ݁ՌΛڧௐͯ͠ॏཁͳ͜ͱʹ஫ҙ
   Λͻ͖ɺΞϓϦΛ࢖͏Ϣʔβͷखॿ͚Λ͢Δ
   w Ξχϝʔγϣϯ͢ΔΞΠίϯΛ࢖ͬͨΓϞʔγϣϯΛΧελϚΠ
   ζͯ͠ϒϥϯυͷΠϝʔδΛ൓өͰ͖Δ
   

   View Slide

4. 5IFNPUJPOTZTUFN
   w ΞϓϦͷૢ࡞ φϏήʔγϣϯ΍ΞΫγϣϯ
   Λิॿ͢Δ
   5SBOTJUJPOͷύλʔϯ
   w "OESPJEͰ͸NBUFSJBMDPNQPOFOUBMQIB͔Β࢖͑Δ
   w ҎԼͷύλʔϯ͕͋Δ
   w $POUBJOFSUSBOTGPSN
   w 4IBSFEBYJT
   w 'BEFUISPVHI
   w 'BEF
   

   View Slide

5. $POUBJOFSUSBOTGPSN
   w ίϯςφΛؚΉ6*ཁૉؒ
   ͷભҠ
   w '"#͔Β#PUUPN4IFFU
   ʹભҠ
   w -JTU͔Βৄࡉϖʔδʹભ
   Ҡ
   w ͜Ε·Ͱͷ4IBSFE
   &MFNFOU5SBOTJUJPOͱ͸୯
   Ұͷཁૉ ը૾ͱ͔
   ʹ࢖Θ
   ͳ͍ͱ͍͏఺͕ҟͳΔ
   

   View Slide

6. $POUBJOFSUSBOTGPSN
   *NQMFNFOUBUJPO
   w 4IBSFE&MFNFOU5SBOTJUJPOͷ࣮૷ͱಉ͡Α͏ʹɺ։࢝ͷ7JFX
   ͱભҠઌͷ'SBHNFOUͷϧʔτͷ7JFXʹUSBOTJUJPO/BNFΛ
   ઃఆ͠ɺભҠͷॲཧΛ࣮૷
   ...
   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
   )
   }
   

   View Slide

7. $POUBJOFSUSBOTGPSN
   *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"
   )
   )
   }
   }
   

   View Slide

8. $POUBJOFSUSBOTGPSN
   *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"
   )
   )
   }
   }
   

   View Slide

9. 4IBSFEBYJT
   w ཁૉಉ࢜ͷφϏήʔγϣϯ
   ͷؔ܎Λද͢
   w Ϣʔβͷొ࿥ϑϩʔ
   w τοϓͷը໘͔Βઃఆը
   ໘΁ͷભҠ
   

   View Slide

10. 4IBSFEBYJT
    *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
    }
    

    View Slide

11. 4IBSFEBYJT
    *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
    }
    

    View Slide

12. 'BEFUISPVHI
    w ڧ͍ؔ܎ੑͷͳ͍ཁૉؒͷ
    ભҠ
    w #PUUPN/BWJHBUJPOͰ
    ͷը໘੾Γସ͑
    ࠨӈͷεϫΠϓͰ͸ͳ
    ͍͜ͱΛද͢
    
    

    View Slide

13. 'BEFUISPVHI
    *NQMFNFOUBUJPO
    w .BUFSJBM'BEF5ISPVHIΛUSBOTJUJPOʹઃఆ
    // Fragment.kt
    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // setup transition
    exitTransition = MaterialFadeThrough()
    enterTransition = MaterialFadeThrough()
    }
    

    View Slide

14. 'BEFUISPVHI
    *NQMFNFOUBUJPO
    w .BUFSJBM'BEF5ISPVHIΛUSBOTJUJPOʹઃఆ
    // Fragment.kt
    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // setup transition
    exitTransition = MaterialFadeThrough()
    enterTransition = MaterialFadeThrough()
    }
    

    View Slide

15. 'BEF
    w ཁૉ͕ը໘ʹग़ೖΓ͢Δ࣌
    w '"#ɺμΠΞϩάɺ
    4OBDLCBSͷදࣔඇද
    ࣔ
    

    View Slide

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
    }
    

    View Slide

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
    }
    

    View Slide

18. 3FDBQ
    w NBUFSJBMDPNQPOFOUSD͕ઌ೔ެ։͞Εͯ4UBCMFͷ
    ެ։΋ۙ͘ͳΓ.PUJPO΋ਖ਼ࣜʹ࢖͑ΔΑ͏ʹͳΔ
    w ϥΠϒϥϦଆͰ5SBOTJUJPO͕༻ҙ͞Εͨ͜ͱͰɺ؆୯ʹ
    5SBOTJUJPOͷద༻͕Ͱ͖ΔΑ͏ʹ
    w ద੾ͳϞʔγϣϯΛద༻͢Δ͜ͱͰΞϓϦΛ࢖͏Ϣʔβͷखॿ͚
    ͕Ͱ͖Δ
    

    View Slide

19. ࢀߟ
    w IUUQTNBUFSJBMJPEFTJHONPUJPOVOEFSTUBOEJOH
    NPUJPOIUNM
    w IUUQTHJUIVCDPNNBUFSJBMDPNQPOFOUTNBUFSJBM
    DPNQPOFOUTBOESPJE
    αϯϓϧ
    w IUUQTHJUIVCDPN/6NFSP"OE%FW
    .BUFSJBM.PUJPO&YBNQMFBOESPJE
    

    View Slide

20. 5IBOLZPV
    

    View Slide