ComposeのModalBottomSheetは (まだ)沼

Transcript

1. ComposeͷModalBottomSheet͸ (·ͩ)প 2023.03.07 Mobileษڧձ Wantedly × νʔϜϥϘ #8 Bunjiro Miyoshi
2. About Me • νʔϜϥϘॴଐ • (ࣗশ)ϚϧνϓϥοτϑΥʔϜܳਓ • Jetpack Compose࠷ߴʂʂ
3. େલఏ • material:1.4.0-beta02 • material3:1.1.0-alpha07
4. ComposeͷBottom Sheet͸େ͖͘2छྨ • BottomSheetScaffold • ModalBottomSheet ͜ͷߏ੒͸M2΋M3΋Ұॹ
5. BottomSheetSca ff old https://developer.android.com/images/reference/androidx/compose/material/standard-bottom-sheet.png
6. ModalBottomSheet https://developer.android.com/images/reference/androidx/compose/material/modal-bottom-sheet.png
7. Sca ff old • SwipeͷdisableͳͲͷ੾Γସ͑ͷύϥϝʔλ͕ͪΌΜͱ༻ҙ͞Ε͍ͯΔ • όοΫΩʔ੍ޚ΋Α͠ͳʹೖ͍ͬͯΔ • NestedScrollConnectionपΓ͸publisher(Google)ଆ΋ྀ͍ۤͯ͠Δ༷ ࢠ • (·ͩͪΌΜͱ࢖ͬͯͳ͍ͷͰӕ͔΋͠Εͳ͍͕)એݴతUIͰهड़͢Δ෼ ʹ͸ࠓͷBottomSheetScaffoldͷ΄͏͕طଘΑΓ࣮૷͠΍ͦ͢͏
8. Modal#͜͏͍͏ͷࠓ·ͰͲ͏͍ͯͨ͠ʁ • தؒঢ়ଶΛͳͯ͘͠ҰؾʹFull ScreenͰද͍ࣔͨ͠ʂ • CancelͰ͖ͳ͍Α͏ʹ͍ͨ͠ʂ
9. Modal#ҰؾʹFull ScreenͰද͍ࣔͨ͠ • BottomSheetBehaviorΛҾͬுͬͯ͘Δ • BottomSheetBehavior.STATE_EXPANDEDΛηοτ • peek heightΛ্ॻ͖ XML
10. Modal#CancelͰ͖ͳ͍Α͏ʹ͍ͨ͠ • BottomSheetDialogͷ৔߹ • setCancelableʹfalseΛઃఆ • BottomSheetDialogFragmentͷ৔߹ • DialogInterfaceͷisCancelableʹfalseΛઃఆ • BottomSheetͷΩϟϯηϧܖػͰ͋ΔSwipe DownɺBack Keyͷ྆ํͷ ରԠ͕؆ܿʹͰ͖Δ XML
11. Modal#CancelͰ͖ͳ͍Α͏ʹ͍ͨ͠ https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/ bottomsheet/BottomSheetDialog.java#L156-L165 XML
12. Modal#ݱঢ় • ҰؾʹFull ScreenͰදࣔˠͰ͖Δ • CancelͰ͖ͳ͍Α͏ʹ͢ΔˠͰ͖ͳ͍(ࠔΔ Compose
13. ҰؾʹFull ScreenͰදࣔ#M2 ɾSheetContentΛ fi llMaxSizeʹઃఆ͢Δ ɾModalBottomSheetStateͷskipHalfExpandedΛtrueʹઃఆ͢Δ Compose
14. ҰؾʹFull ScreenͰදࣔ#M3 ɾModalBottomSheetࣗମΛ fi llMaxSizeʹઃఆ͢Δ ɾSheetStateͷskipHalfExpandedΛtrueʹઃఆ͢Δ Compose
15. Modal#CancelͰ͖ͳ͍Α͏ʹ͢Δ • ཁ݅ • ྖҬ֎λοϓɺSwipe DownɺBack KeyͰด͡ͳ͍Α͏ʹͳΔ͜ͱ IF͕༻ҙ͞Ε͍ͯΔΑ͏ʹݟ࣮͑ͯ͸༻ҙ͞Εͯͳ͍ʂ Compose
16. Modal#CancelͰ͖ͳ͍Α͏ʹ͢Δ • ઌʹComposeͷModalBottomSheetͷ࣮૷Λཧղͯ͠ ModalBottomSheetͷίʔυΛίϐʔͯ͠࢖͏ • M2ɿ΄΅ී௨ͷը໘ͱ࣮ͯ͠૷͞Ε͍ͯΔ • M3ɿwindow(Popup)ͱ࣮ͯ͠૷͞Ε͍ͯΔ ͲͷΑ͏ʹͯ͠BottomSheetΛը໘ʹ৐ͤΔ͔ͱ͍͏఺͸ҟͳΔ Compose
17. Box( Scrim() Surface( Column() ) )
18. Modal#ྖҬ֎λοϓΛࢭΊΔ • M2ɺM3ڞ௨ɿScrimʹઃఆ͞Ε͍ͯΔdetectTapGesturesΛ֎ͤΔΑ ͏ʹ࣮૷͢Δ Կ͕͋ͬͯ΋ઈରBottomSheetΛด͡ΔΑ͏ʹઃఆ͞Ε͍ͯΔ onDismissRequestͷϥϜμΛࠩ͠ସ͑Δ Compose
19. Modal#Swipe DownΛࢭΊΔ • M2ɺM3ڞ௨ɿSurfaceʹઃఆ͞Ε͍ͯΔModi fi er.draggableΛ disableʹ͢Δ Compose
20. Modal#Swipe DownΛࢭΊΔM2 ໊લ͸ҧ͏͕த਎͸draggable Compose
21. Modal#Swipe DownΛࢭΊΔM3 ໊લ͸ҧ͏͕த਎͸draggable Compose
22. Modal#Back KeyΛࢭΊΔ • M2ɿcontentͰBackHandlerΛ࢖࣮ͬͯ૷͢Δ BackHandler಺ͰBottomSheetState ͷ஋Λݟͯ͋Ε͜Ε͢Δ Compose
23. Modal#Back KeyΛࢭΊΔ • M2ɿBottomSheetStateͷcon fi rmValueChangeͰϋϯυϦϯά Compose
24. • M3ɿΩϟϯηϧͰ͖ͳ͍Popupͱͯ͠දࣔ͢ΔΑ͏ʹ࣮૷Λࠩ͠ସ ͑Δ Modal#Back KeyΛࢭΊΔ Compose
25. ݁࿦ • ComposeͷModalBottomSheet͸প • ৮Εͯͳ͍͕StatusBarColorͷରԠͳͲ΋௥ՃͰ࣮૷͠ͳ͍ͱීஈ xmlͰ࢖͍ͬͯΔBottomSheetDialogͱಉ͡ײ͡ʹͳΒͳ͍ • ࠓ͸ͦͷ࣌Ͱ͸ͳ͍ • AndroidViewʹBottomSheetDialogFragmentΛಥͬࠐΉܗ͕Α͍