Tweet
Tweet

Slide 1

Slide 1 text

ComposeͷModalBottomSheet͸ (·ͩ)প 2023.03.07 Mobileษڧձ Wantedly × νʔϜϥϘ #8 Bunjiro Miyoshi

Slide 2

Slide 2 text

About Me • νʔϜϥϘॴଐ • (ࣗশ)ϚϧνϓϥοτϑΥʔϜܳਓ • Jetpack Compose࠷ߴʂʂ

Slide 3

Slide 3 text

େલఏ • material:1.4.0-beta02 • material3:1.1.0-alpha07

Slide 4

Slide 4 text

ComposeͷBottom Sheet͸େ͖͘2छྨ • BottomSheetScaffold • ModalBottomSheet ͜ͷߏ੒͸M2΋M3΋Ұॹ

Slide 5

Slide 5 text

BottomSheetSca ff old https://developer.android.com/images/reference/androidx/compose/material/standard-bottom-sheet.png

Slide 6

Slide 6 text

ModalBottomSheet https://developer.android.com/images/reference/androidx/compose/material/modal-bottom-sheet.png

Slide 7

Slide 7 text

Sca ff old • SwipeͷdisableͳͲͷ੾Γସ͑ͷύϥϝʔλ͕ͪΌΜͱ༻ҙ͞Ε͍ͯΔ • όοΫΩʔ੍ޚ΋Α͠ͳʹೖ͍ͬͯΔ • NestedScrollConnectionपΓ͸publisher(Google)ଆ΋ྀ͍ۤͯ͠Δ༷ ࢠ • (·ͩͪΌΜͱ࢖ͬͯͳ͍ͷͰӕ͔΋͠Εͳ͍͕)એݴతUIͰهड़͢Δ෼ ʹ͸ࠓͷBottomSheetScaffoldͷ΄͏͕طଘΑΓ࣮૷͠΍ͦ͢͏

Slide 8

Slide 8 text

Modal#͜͏͍͏ͷࠓ·ͰͲ͏͍ͯͨ͠ʁ • தؒঢ়ଶΛͳͯ͘͠ҰؾʹFull ScreenͰද͍ࣔͨ͠ʂ • CancelͰ͖ͳ͍Α͏ʹ͍ͨ͠ʂ

Slide 9

Slide 9 text

Modal#ҰؾʹFull ScreenͰද͍ࣔͨ͠ • BottomSheetBehaviorΛҾͬுͬͯ͘Δ • BottomSheetBehavior.STATE_EXPANDEDΛηοτ • peek heightΛ্ॻ͖ XML

Slide 10

Slide 10 text

Modal#CancelͰ͖ͳ͍Α͏ʹ͍ͨ͠ • BottomSheetDialogͷ৔߹ • setCancelableʹfalseΛઃఆ • BottomSheetDialogFragmentͷ৔߹ • DialogInterfaceͷisCancelableʹfalseΛઃఆ • BottomSheetͷΩϟϯηϧܖػͰ͋ΔSwipe DownɺBack Keyͷ྆ํͷ ରԠ͕؆ܿʹͰ͖Δ XML

Slide 11

Slide 11 text

Modal#CancelͰ͖ͳ͍Α͏ʹ͍ͨ͠ https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/ bottomsheet/BottomSheetDialog.java#L156-L165 XML

Slide 12

Slide 12 text

Modal#ݱঢ় • ҰؾʹFull ScreenͰදࣔˠͰ͖Δ • CancelͰ͖ͳ͍Α͏ʹ͢ΔˠͰ͖ͳ͍(ࠔΔ Compose

Slide 13

Slide 13 text

ҰؾʹFull ScreenͰදࣔ#M2 ɾSheetContentΛ fi llMaxSizeʹઃఆ͢Δ ɾModalBottomSheetStateͷskipHalfExpandedΛtrueʹઃఆ͢Δ Compose

Slide 14

Slide 14 text

ҰؾʹFull ScreenͰදࣔ#M3 ɾModalBottomSheetࣗମΛ fi llMaxSizeʹઃఆ͢Δ ɾSheetStateͷskipHalfExpandedΛtrueʹઃఆ͢Δ Compose

Slide 15

Slide 15 text

Modal#CancelͰ͖ͳ͍Α͏ʹ͢Δ • ཁ݅ • ྖҬ֎λοϓɺSwipe DownɺBack KeyͰด͡ͳ͍Α͏ʹͳΔ͜ͱ IF͕༻ҙ͞Ε͍ͯΔΑ͏ʹݟ࣮͑ͯ͸༻ҙ͞Εͯͳ͍ʂ Compose

Slide 16

Slide 16 text

Modal#CancelͰ͖ͳ͍Α͏ʹ͢Δ • ઌʹComposeͷModalBottomSheetͷ࣮૷Λཧղͯ͠ ModalBottomSheetͷίʔυΛίϐʔͯ͠࢖͏ • M2ɿ΄΅ී௨ͷը໘ͱ࣮ͯ͠૷͞Ε͍ͯΔ • M3ɿwindow(Popup)ͱ࣮ͯ͠૷͞Ε͍ͯΔ ͲͷΑ͏ʹͯ͠BottomSheetΛը໘ʹ৐ͤΔ͔ͱ͍͏఺͸ҟͳΔ Compose

Slide 17

Slide 17 text

Box( Scrim() Surface( Column() ) )

Slide 18

Slide 18 text

Modal#ྖҬ֎λοϓΛࢭΊΔ • M2ɺM3ڞ௨ɿScrimʹઃఆ͞Ε͍ͯΔdetectTapGesturesΛ֎ͤΔΑ ͏ʹ࣮૷͢Δ Կ͕͋ͬͯ΋ઈରBottomSheetΛด͡ΔΑ͏ʹઃఆ͞Ε͍ͯΔ onDismissRequestͷϥϜμΛࠩ͠ସ͑Δ Compose

Slide 19

Slide 19 text

Modal#Swipe DownΛࢭΊΔ • M2ɺM3ڞ௨ɿSurfaceʹઃఆ͞Ε͍ͯΔModi fi er.draggableΛ disableʹ͢Δ Compose

Slide 20

Slide 20 text

Modal#Swipe DownΛࢭΊΔM2 ໊લ͸ҧ͏͕த਎͸draggable Compose

Slide 21

Slide 21 text

Modal#Swipe DownΛࢭΊΔM3 ໊લ͸ҧ͏͕த਎͸draggable Compose

Slide 22

Slide 22 text

Modal#Back KeyΛࢭΊΔ • M2ɿcontentͰBackHandlerΛ࢖࣮ͬͯ૷͢Δ BackHandler಺ͰBottomSheetState ͷ஋Λݟͯ͋Ε͜Ε͢Δ Compose

Slide 23

Slide 23 text

Modal#Back KeyΛࢭΊΔ • M2ɿBottomSheetStateͷcon fi rmValueChangeͰϋϯυϦϯά Compose

Slide 24

Slide 24 text

• M3ɿΩϟϯηϧͰ͖ͳ͍Popupͱͯ͠දࣔ͢ΔΑ͏ʹ࣮૷Λࠩ͠ସ ͑Δ Modal#Back KeyΛࢭΊΔ Compose

Slide 25

Slide 25 text

݁࿦ • ComposeͷModalBottomSheet͸প • ৮Εͯͳ͍͕StatusBarColorͷରԠͳͲ΋௥ՃͰ࣮૷͠ͳ͍ͱීஈ xmlͰ࢖͍ͬͯΔBottomSheetDialogͱಉ͡ײ͡ʹͳΒͳ͍ • ࠓ͸ͦͷ࣌Ͱ͸ͳ͍ • AndroidViewʹBottomSheetDialogFragmentΛಥͬࠐΉܗ͕Α͍