Material Motion

37618b4d60cf3d1f43f7196253264edc?s=47 Nabe
July 22, 2020

Material Motion

37618b4d60cf3d1f43f7196253264edc?s=128

Nabe

July 22, 2020
Tweet

Transcript

  1.  .PCJMF"DU0/-*/& ,B[VLJ8BUBOBCF .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. 5IFNPUJPOTZTUFN w ΞϓϦͷૢ࡞ φϏήʔγϣϯ΍ΞΫγϣϯ Λิॿ͢Δ 5SBOTJUJPOͷύλʔϯ w "OESPJEͰ͸NBUFSJBMDPNQPOFOUBMQIB͔Β࢖͑Δ w ҎԼͷύλʔϯ͕͋Δ

    w $POUBJOFSUSBOTGPSN w 4IBSFEBYJT w 'BEFUISPVHI w 'BEF
  5. $POUBJOFSUSBOTGPSN w ίϯςφΛؚΉ6*ཁૉؒ ͷભҠ w '"#͔Β#PUUPN4IFFU ʹભҠ w -JTU͔Βৄࡉϖʔδʹભ Ҡ

    w ͜Ε·Ͱͷ4IBSFE &MFNFOU5SBOTJUJPOͱ͸୯ Ұͷཁૉ ը૾ͱ͔ ʹ࢖Θ ͳ͍ͱ͍͏఺͕ҟͳΔ
  6. $POUBJOFSUSBOTGPSN *NQMFNFOUBUJPO w 4IBSFE&MFNFOU5SBOTJUJPOͷ࣮૷ͱಉ͡Α͏ʹɺ։࢝ͷ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. $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" ) ) } }
  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" ) ) } }
  9. 4IBSFEBYJT w ཁૉಉ࢜ͷφϏήʔγϣϯ ͷؔ܎Λද͢ w Ϣʔβͷొ࿥ϑϩʔ w τοϓͷը໘͔Βઃఆը ໘΁ͷભҠ

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

  13. 'BEFUISPVHI *NQMFNFOUBUJPO w .BUFSJBM'BEF5ISPVHIΛUSBOTJUJPOʹઃఆ // Fragment.kt override fun onCreate(savedInstanceState: Bundle?)

    { super.onCreate(savedInstanceState) // setup transition exitTransition = MaterialFadeThrough() enterTransition = MaterialFadeThrough() }
  14. 'BEFUISPVHI *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 NBUFSJBMDPNQPOFOUSD͕ઌ೔ެ։͞Εͯ4UBCMFͷ ެ։΋ۙ͘ͳΓ.PUJPO΋ਖ਼ࣜʹ࢖͑ΔΑ͏ʹͳΔ w ϥΠϒϥϦଆͰ5SBOTJUJPO͕༻ҙ͞Εͨ͜ͱͰɺ؆୯ʹ 5SBOTJUJPOͷద༻͕Ͱ͖ΔΑ͏ʹ w ద੾ͳϞʔγϣϯΛద༻͢Δ͜ͱͰΞϓϦΛ࢖͏Ϣʔβͷखॿ͚ ͕Ͱ͖Δ

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

    .BUFSJBM.PUJPO&YBNQMFBOESPJE
  20. 5IBOLZPV