$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ComposeのModalBottomSheetは (まだ)沼
Search
RyuNen344
March 07, 2023
Technology
1
1.9k
ComposeのModalBottomSheetは (まだ)沼
RyuNen344
March 07, 2023
Tweet
Share
More Decks by RyuNen344
See All by RyuNen344
せめて、ネイティブらしく
ryunen344
1
630
Cache Me If You Can
ryunen344
3
7.8k
WindowInsetsだってテストしたい
ryunen344
2
320
サプライチェーン攻撃に備える
ryunen344
1
3.1k
Okioに愛を込めて
ryunen344
3
2.6k
Firebase Hostingを使ってPasskeyをandroidアプリで試してみよう
ryunen344
2
1.9k
Xcode Meets Gradle
ryunen344
0
380
わかった気になる、Coroutine1.7.0のチャンネルのパフォーマンス向上
ryunen344
0
410
K/NとNSKeyedArchiverと私
ryunen344
0
570
Other Decks in Technology
See All in Technology
Ruby で作る大規模イベントネットワーク構築・運用支援システム TTDB
taketo1113
1
110
Oracle Cloud Infrastructure:2025年11月度サービス・アップデート
oracle4engineer
PRO
2
170
re:Invent2025 コンテナ系アップデート振り返り(+CloudWatchログのアップデート紹介)
masukawa
0
230
M5UnifiedとPicoRubyで楽しむM5シリーズ
kishima
0
120
“決まらない”NSM設計への処方箋 〜ビットキーにおける現実的な指標デザイン事例〜 / A Prescription for "Stuck" NSM Design: Bitkey’s Practical Case Study
bitkey
PRO
1
520
Karate+Database RiderによるAPI自動テスト導入工数をCline+GitLab MCPを使って2割削減を目指す! / 20251206 Kazuki Takahashi
shift_evolve
PRO
1
340
AIにおける自由の追求
shujisado
3
480
たかが特別な時間の終わり / It's Only the End of Special Time
watany
28
7.7k
32のキーワードで学ぶ はじめての耐量子暗号(PQC) / Getting Started with Post-Quantum Cryptography in 32 keywords
quiver
0
300
useEffectってなんで非推奨みたいなこと言われてるの?
maguroalternative
10
6.4k
Noを伝える技術2025: 爆速合意形成のためのNICOフレームワーク速習 #pmconf2025
aki_iinuma
2
1.8k
Claude Code Getting Started Guide(en)
oikon48
0
170
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Speed Design
sergeychernyshev
33
1.4k
Music & Morning Musume
bryan
46
7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
Context Engineering - Making Every Token Count
addyosmani
9
480
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Thoughts on Productivity
jonyablonski
73
5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
54k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
How to Think Like a Performance Engineer
csswizardry
28
2.3k
Code Review Best Practice
trishagee
73
19k
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ΛಥͬࠐΉܗ͕Α͍