Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ComposeのModalBottomSheetは (まだ)沼
Search
RyuNen344
March 07, 2023
Technology
1
1.8k
ComposeのModalBottomSheetは (まだ)沼
RyuNen344
March 07, 2023
Tweet
Share
More Decks by RyuNen344
See All by RyuNen344
WindowInsetsだってテストしたい
ryunen344
1
250
サプライチェーン攻撃に備える
ryunen344
0
2.5k
Okioに愛を込めて
ryunen344
3
2.3k
Firebase Hostingを使ってPasskeyをandroidアプリで試してみよう
ryunen344
2
1.7k
Xcode Meets Gradle
ryunen344
0
350
わかった気になる、Coroutine1.7.0のチャンネルのパフォーマンス向上
ryunen344
0
390
K/NとNSKeyedArchiverと私
ryunen344
0
520
うわっ…もしかして私のコー ド、遅すぎ…?
ryunen344
1
930
K/NでCryptoKit使いたかった
ryunen344
0
470
Other Decks in Technology
See All in Technology
Contributing to Rails? Start with the Gems You Already Use
yahonda
2
120
第64回コンピュータビジョン勉強会「The PanAf-FGBG Dataset: Understanding the Impact of Backgrounds in Wildlife Behaviour Recognition」
x_ttyszk
0
240
ABEMAの本番環境負荷試験への挑戦
mk2taiga
5
1.2k
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
4
990
助けて! XからWaylandに移行しないと新しいGNOMEが使えなくなっちゃう 2025-07-12
nobutomurata
2
190
Autify Company Deck
autifyhq
2
44k
大量配信システムにおけるSLOの実践:「見えない」信頼性をSLOで可視化
plaidtech
PRO
0
360
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
820
LIXIL基幹システム刷新に立ち向かう技術的アプローチについて
tsukuha
1
140
VGGT: Visual Geometry Grounded Transformer
peisuke
1
680
SREの次のキャリアの道しるべ 〜SREがマネジメントレイヤーに挑戦して、 気づいたこととTips〜
coconala_engineer
1
4k
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
500
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Building an army of robots
kneath
306
45k
How GitHub (no longer) Works
holman
314
140k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Transcript
ComposeͷModalBottomSheet (·ͩ)প 2023.03.07 Mobileษڧձ Wantedly × νʔϜϥϘ #8 Bunjiro Miyoshi
About Me • νʔϜϥϘॴଐ • (ࣗশ)ϚϧνϓϥοτϑΥʔϜܳਓ • Jetpack Compose࠷ߴʂʂ
େલఏ • material:1.4.0-beta02 • material3:1.1.0-alpha07
ComposeͷBottom Sheetେ͖͘2छྨ • BottomSheetScaffold • ModalBottomSheet ͜ͷߏM2M3Ұॹ
BottomSheetSca ff old https://developer.android.com/images/reference/androidx/compose/material/standard-bottom-sheet.png
ModalBottomSheet https://developer.android.com/images/reference/androidx/compose/material/modal-bottom-sheet.png
Sca ff old • SwipeͷdisableͳͲͷΓସ͑ͷύϥϝʔλ͕ͪΌΜͱ༻ҙ͞Ε͍ͯΔ • όοΫΩʔ੍ޚΑ͠ͳʹೖ͍ͬͯΔ • NestedScrollConnectionपΓpublisher(Google)ଆྀ͍ۤͯ͠Δ༷ ࢠ
• (·ͩͪΌΜͱͬͯͳ͍ͷͰӕ͔͠Εͳ͍͕)એݴతUIͰهड़͢Δ ʹࠓͷBottomSheetScaffoldͷ΄͏͕طଘΑΓ࣮ͦ͢͠͏
Modal#͜͏͍͏ͷࠓ·ͰͲ͏͍ͯͨ͠ʁ • தؒঢ়ଶΛͳͯ͘͠ҰؾʹFull ScreenͰද͍ࣔͨ͠ʂ • CancelͰ͖ͳ͍Α͏ʹ͍ͨ͠ʂ
Modal#ҰؾʹFull ScreenͰද͍ࣔͨ͠ • BottomSheetBehaviorΛҾͬுͬͯ͘Δ • BottomSheetBehavior.STATE_EXPANDEDΛηοτ • peek heightΛ্ॻ͖ XML
Modal#CancelͰ͖ͳ͍Α͏ʹ͍ͨ͠ • BottomSheetDialogͷ߹ • setCancelableʹfalseΛઃఆ • BottomSheetDialogFragmentͷ߹ • DialogInterfaceͷisCancelableʹfalseΛઃఆ •
BottomSheetͷΩϟϯηϧܖػͰ͋ΔSwipe DownɺBack Keyͷ྆ํͷ ରԠ͕؆ܿʹͰ͖Δ XML
Modal#CancelͰ͖ͳ͍Α͏ʹ͍ͨ͠ https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/ bottomsheet/BottomSheetDialog.java#L156-L165 XML
Modal#ݱঢ় • ҰؾʹFull ScreenͰදࣔˠͰ͖Δ • CancelͰ͖ͳ͍Α͏ʹ͢ΔˠͰ͖ͳ͍(ࠔΔ Compose
ҰؾʹFull ScreenͰදࣔ#M2 ɾSheetContentΛ fi llMaxSizeʹઃఆ͢Δ ɾModalBottomSheetStateͷskipHalfExpandedΛtrueʹઃఆ͢Δ Compose
ҰؾʹFull ScreenͰදࣔ#M3 ɾModalBottomSheetࣗମΛ fi llMaxSizeʹઃఆ͢Δ ɾSheetStateͷskipHalfExpandedΛtrueʹઃఆ͢Δ Compose
Modal#CancelͰ͖ͳ͍Α͏ʹ͢Δ • ཁ݅ • ྖҬ֎λοϓɺSwipe DownɺBack KeyͰด͡ͳ͍Α͏ʹͳΔ͜ͱ IF͕༻ҙ͞Ε͍ͯΔΑ͏ʹݟ࣮͑ͯ༻ҙ͞Εͯͳ͍ʂ Compose
Modal#CancelͰ͖ͳ͍Α͏ʹ͢Δ • ઌʹComposeͷModalBottomSheetͷ࣮Λཧղͯ͠ ModalBottomSheetͷίʔυΛίϐʔͯ͠͏ • M2ɿ΄΅ී௨ͷը໘ͱ࣮ͯ͠͞Ε͍ͯΔ • M3ɿwindow(Popup)ͱ࣮ͯ͠͞Ε͍ͯΔ ͲͷΑ͏ʹͯ͠BottomSheetΛը໘ʹͤΔ͔ͱ͍͏ҟͳΔ Compose
Box( Scrim() Surface( Column() ) )
Modal#ྖҬ֎λοϓΛࢭΊΔ • M2ɺM3ڞ௨ɿScrimʹઃఆ͞Ε͍ͯΔdetectTapGesturesΛ֎ͤΔΑ ͏ʹ࣮͢Δ Կ͕͋ͬͯઈରBottomSheetΛด͡ΔΑ͏ʹઃఆ͞Ε͍ͯΔ onDismissRequestͷϥϜμΛࠩ͠ସ͑Δ Compose
Modal#Swipe DownΛࢭΊΔ • M2ɺM3ڞ௨ɿSurfaceʹઃఆ͞Ε͍ͯΔModi fi er.draggableΛ disableʹ͢Δ Compose
Modal#Swipe DownΛࢭΊΔM2 ໊લҧ͏͕தdraggable Compose
Modal#Swipe DownΛࢭΊΔM3 ໊લҧ͏͕தdraggable Compose
Modal#Back KeyΛࢭΊΔ • M2ɿcontentͰBackHandlerΛ࣮ͬͯ͢Δ BackHandlerͰBottomSheetState ͷΛݟͯ͋Ε͜Ε͢Δ Compose
Modal#Back KeyΛࢭΊΔ • M2ɿBottomSheetStateͷcon fi rmValueChangeͰϋϯυϦϯά Compose
• M3ɿΩϟϯηϧͰ͖ͳ͍Popupͱͯ͠දࣔ͢ΔΑ͏ʹ࣮Λࠩ͠ସ ͑Δ Modal#Back KeyΛࢭΊΔ Compose
݁ • ComposeͷModalBottomSheetপ • ৮Εͯͳ͍͕StatusBarColorͷରԠͳͲՃͰ࣮͠ͳ͍ͱීஈ xmlͰ͍ͬͯΔBottomSheetDialogͱಉ͡ײ͡ʹͳΒͳ͍ • ࠓͦͷ࣌Ͱͳ͍ • AndroidViewʹBottomSheetDialogFragmentΛಥͬࠐΉܗ͕Α͍