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
200
サプライチェーン攻撃に備える
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
380
K/NとNSKeyedArchiverと私
ryunen344
0
520
うわっ…もしかして私のコー ド、遅すぎ…?
ryunen344
1
930
K/NでCryptoKit使いたかった
ryunen344
0
460
Other Decks in Technology
See All in Technology
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
240
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
140
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
4
910
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
200
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
130
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
290
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
3
1.7k
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
11
4k
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
320
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
4
3k
論文紹介:LLMDet (CVPR2025 Highlight)
tattaka
0
160
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
220
Featured
See All Featured
Speed Design
sergeychernyshev
32
1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
The Invisible Side of Design
smashingmag
300
51k
Producing Creativity
orderedlist
PRO
346
40k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
Writing Fast Ruby
sferik
628
62k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
For a Future-Friendly Web
brad_frost
179
9.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Agile that works and the tools we love
rasmusluckow
329
21k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
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ΛಥͬࠐΉܗ͕Α͍