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.4k
ComposeのModalBottomSheetは (まだ)沼
RyuNen344
March 07, 2023
Tweet
Share
More Decks by RyuNen344
See All by RyuNen344
サプライチェーン攻撃に備える
ryunen344
0
120
Okioに愛を込めて
ryunen344
3
1.5k
Firebase Hostingを使ってPasskeyをandroidアプリで試してみよう
ryunen344
2
1.4k
Xcode Meets Gradle
ryunen344
0
270
わかった気になる、Coroutine1.7.0のチャンネルのパフォーマンス向上
ryunen344
0
300
K/NとNSKeyedArchiverと私
ryunen344
0
420
うわっ…もしかして私のコー ド、遅すぎ…?
ryunen344
1
750
K/NでCryptoKit使いたかった
ryunen344
0
320
SwiftPM with KMMをprivateなGitHub Releaseで運用する
ryunen344
0
300
Other Decks in Technology
See All in Technology
HolidayJp.jl を作りました
mrkn
0
120
RAGHack: Kickoff and RAG 101
pamelafox
0
290
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
2
170
SORACOMで実現するIoTのマルチクラウド対応 - IoTでのクリーンアーキテクチャの実現 -
kenichirokimura
0
330
エンジニア視点で見る、 組織で運用されるデザインシステムにするには
shunya078
1
280
AWSを始めた頃に陥りがちなポイントをまとめてみた
oshanqq
1
3.4k
LLMに日本語テキストを学習させる意義
ksaito
13
3.7k
なにもしてないのにNew Relicのデータ転送量が増えていたときに確認したこと
tk3fftk
2
150
PDF Viewer作成の今までとこれから
hunachi
0
190
Eventual Detection Engineering
ken5scal
0
1.2k
脆弱星に導かれて
nishimunea
1
1.6k
ロリポップ! for Gamersを支えるインフラ/lolipop for gamers infrastructure
takumakume
0
110
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
327
20k
Code Reviewing Like a Champion
maltzj
518
39k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
166
48k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Being A Developer After 40
akosma
83
580k
Bash Introduction
62gerente
608
210k
Scaling GitHub
holman
458
140k
The Invisible Customer
myddelton
119
13k
Producing Creativity
orderedlist
PRO
340
39k
Building Flexible Design Systems
yeseniaperezcruz
325
37k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.2k
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ΛಥͬࠐΉܗ͕Α͍