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
2k
ComposeのModalBottomSheetは (まだ)沼
RyuNen344
March 07, 2023
Tweet
Share
More Decks by RyuNen344
See All by RyuNen344
せめて、ネイティブらしく
ryunen344
2
1.5k
Cache Me If You Can
ryunen344
3
8.5k
WindowInsetsだってテストしたい
ryunen344
2
350
サプライチェーン攻撃に備える
ryunen344
1
3.3k
Okioに愛を込めて
ryunen344
3
2.8k
Firebase Hostingを使ってPasskeyをandroidアプリで試してみよう
ryunen344
2
2k
Xcode Meets Gradle
ryunen344
0
400
わかった気になる、Coroutine1.7.0のチャンネルのパフォーマンス向上
ryunen344
0
430
K/NとNSKeyedArchiverと私
ryunen344
0
590
Other Decks in Technology
See All in Technology
AIに視覚を与えモバイルアプリケーション開発をより円滑に行う
lycorptech_jp
PRO
1
780
Serverless Agent Architecture on Azure / serverless-agent-on-azure
miyake
1
130
自動テストが巻き起こした開発プロセス・チームの変化 / Impact of Automated Testing on Development Cycles and Team Dynamics
codmoninc
1
980
Oracle Database@Azure:サービス概要のご紹介
oracle4engineer
PRO
4
1k
新職業『オーケストレーター』誕生 — エージェント10体を同時に回すAgentOps
gunta
2
530
生成AIの利用とセキュリティ /gen-ai-and-security
mizutani
0
620
大規模な組織におけるAI Agent活用の促進と課題
lycorptech_jp
PRO
6
7.7k
Windows ネットワークを再確認する
murachiakira
PRO
0
250
男(監査)はつらいよ - Policy as CodeからAIエージェントへ
ken5scal
5
720
実録・Platform Engineering 失敗から学び、AI時代の波を乗りこなす技術
sansantech
PRO
1
100
類似画像検索モデルの開発ノウハウ
lycorptech_jp
PRO
2
610
Devinを導入したら予想外の人たちに好評だった
tomuro
0
850
Featured
See All Featured
Abbi's Birthday
coloredviolet
2
5.1k
The Cost Of JavaScript in 2023
addyosmani
55
9.7k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
apolaine
0
220
Unlocking the hidden potential of vector embeddings in international SEO
frankvandijk
0
190
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
61k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.7k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
akademiya2063
PRO
1
68
Understanding Cognitive Biases in Performance Measurement
bluesmoon
32
2.8k
Mind Mapping
helmedeiros
PRO
1
110
Evolving SEO for Evolving Search Engines
ryanjones
0
150
How to audit for AI Accessibility on your Front & Back End
davetheseo
0
200
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
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ΛಥͬࠐΉܗ͕Α͍