ComposeのModalBottomSheetは (まだ)沼

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. Box(
    Scrim()
    Surface(
    Column()
    )
    )
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide