๐Ÿ”ฅTIL๐Ÿ”ฅ์ŠคํŒŒ๋ฅดํƒ€ | BottomSheetDialogFragment ๋’ท๋ฐฐ๊ฒฝ ์ œ๊ฑฐํ•˜๊ธฐ

hyihyiยท2024๋…„ 3์›” 15์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
62/70
post-thumbnail

๐Ÿ“– Modal UI

๋ชจ๋‹ฌ(modal) UI๋Š” ๋ฌด์—‡์ผ๊นŒ?
๋ชจ๋‹ฌ์€ ์‚ฌ์šฉ์ž์˜ ์ด๋ชฉ์„ ๋Œ๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” ํ™”๋ฉด ์ „ํ™˜ ๊ธฐ๋ฒ•์„ ์˜๋ฏธํ•œ๋‹ค.
ํŒ์—…, ๋ฐ”ํ…€์‹œํŠธ, ์Šค๋‚ต๋ฐ” ๋“ฑ ์—ฌ๋Ÿฌ ๊ฐ€์ง€๊ฐ€ ์กด์žฌํ•œ๋‹ค.
PC์— ๋น„ํ•ด ํ™œ์šฉ๊ฐ€๋Šฅํ•œ ๋ฉด์ ์ด ์ ๊ธฐ ๋•Œ๋ฌธ์— ์‚ฌ์šฉ์ž์˜ ์ด๋ชฉ์„ ๋Œ๊ณ  ํ–‰๋™์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ

๋‚˜๋Š” ๋ฉ”์ธ ํ™”๋ฉด์—์„œ ์ดˆ๊ธฐ ํ™”๋ฉด์œผ๋กœ ๋„˜์–ด๊ฐˆ ๋•Œ๋‚˜ ๊ธฐ๋ก์„ ์‚ญ์ œํ•˜๊ธฐ ์œ„ํ•ด Modal ๋ฐ”ํ…€ ์‹œํŠธ๋ฅผ ์‚ฌ์šฉํ–ˆ๋‹ค.


๐Ÿค” ์˜ˆ์ „์—๋„ ์ƒ๊ฒผ๋˜ ๋ฌธ์ œ

์˜ˆ์ „์—๋„ ๋‹ค์ด์–ผ๋กœ๊ทธ ์‚ฌ์šฉํ–ˆ์„ ๋•Œ ํ…Œ๋‘๋ฆฌ๊ฐ€ ๋ณด์—ฌ์„œ background๊ฐ€ ์ง€์ •์ด ์•ˆ๋˜๊ธธ๋ž˜ ์ฝ”๋“œ์—์„œ ๋ฐฐ๊ฒฝ์ƒ‰์„ ํˆฌ๋ช…์œผ๋กœ ์ง€์ •ํ•ด์„œ ๋ฐฐ๊ฒฝ์ƒ‰์„ ์—†์•ด๋Š”๋ฐ ์ด๋ฒˆ์— ๋ฐ”ํ…€ ์‹œํŠธ ๋‹ค์ด์–ผ๋กœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๊ณ  ํ–ˆ๋Š”๋ฐ ๋˜‘๊ฐ™์€ ๋ฌธ์ œ๊ฐ€ ์ƒ๊ฒผ๋‹ค.

์˜ˆ์ „์— ๋ฐฐ๊ฒฝ์ƒ‰ ์—†์• ๋Š” ๊ฑธ ํ•ด๊ฒฐํ•œ ์ฝ”๋“œ

alertDialog?.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))

์ด๋ฒˆ์—๋„ xml์—์„œ backgroundTint์— ํˆฌ๋ช…์ƒ‰์„ ์ง€์ •ํ•ด์ฃผ๊ณ , ์ฝ”๋“œ์—์„œ ๋ฐฐ๊ฒฝ์ƒ‰์„ ํˆฌ๋ช…์ƒ‰์œผ๋กœ ํ•ด์ค˜๋„ ๋’ท๋ฐฐ๊ฒฝ์ด ๋ณด์—ฌ์„œ ๊ณ„์† ํ…Œ๋‘๋ฆฌ๊ฐ€ ๊ฐ์ ธ์„œ ๋ณด์˜€๋‹ค.


๐Ÿ“ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•

<style.xml>์— ์•„๋ž˜์˜ ์ฝ”๋“œ๋ฅผ ๋„ฃ๊ณ 

    <style name="TransparentBottomSheetDialogFragment" parent="Theme.Design.BottomSheetDialog">
        <item name="android:windowIsFloating">true</item>
        <item name="android:backgroundDimEnabled">true</item> // Scrim์ด ์žˆ๋Š” Modal
        <item name="android:colorBackground">@android:color/transparent</item>
    </style>

BottomSheetDialogFragment ์ฝ”๋“œ์˜ OnCreate ์•ˆ์— setStyle ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•ด์ฃผ๋ฉด ๋œ๋‹ค.

class RecordBottomSheetDialog : BottomSheetDialogFragment() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setStyle(STYLE_NORMAL, R.style.TransparentBottomSheetDialogFragment)
    }

setStyle : ํ”„๋ž˜๊ทธ๋จผํŠธ์˜ ์Šคํƒ€์ผ๊ณผ ํ…Œ๋งˆ๋ฅผ ์„ค์ •.
ํ”„๋ž˜๊ทธ๋จผํŠธ๊ฐ€ ์ƒ์„ฑ๋œ ์งํ›„, ์ฆ‰ onCreate ๋ฉ”์„œ๋“œ ๋‚ด์—์„œ ํ˜ธ์ถœํ•ด์•ผ ํ•จ

  • ์ฒซ ๋ฒˆ์งธ ๋งค๊ฐœ๋ณ€์ˆ˜
    STYLE_NORMAL์€ ํ‘œ์ค€ ๋ฐ”ํ…€ ์‹œํŠธ ์Šคํƒ€์ผ์„ ์˜๋ฏธ.
    ๋‹ค๋ฅธ ์˜ต์…˜์œผ๋กœ๋Š” STYLE_NO_TITLE, STYLE_NO_FRAME, STYLE_NO_INPUT ๋“ฑ์ด ์žˆ์Œ
  • ๋‘ ๋ฒˆ์งธ ๋งค๊ฐœ๋ณ€์ˆ˜
    theme์€ ๋‹ค์ด์–ผ๋กœ๊ทธ์— ์ ์šฉํ•  ์Šคํƒ€์ผ ๋ฆฌ์†Œ์Šค์˜ ID
    ์ด ์Šคํƒ€์ผ์€ ๋ฐ”ํ…€ ์‹œํŠธ ๋‹ค์ด์–ผ๋กœ๊ทธ์˜ ๋ฐฐ๊ฒฝ์„ ํˆฌ๋ช…ํ•˜๊ฒŒ ๋งŒ๋“ค๊ฑฐ๋‚˜ ๋‹ค๋ฅธ ์‹œ๊ฐ์  ์†์„ฑ์„ ๋ณ€๊ฒฝํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ

์•„์ง ๋’ท๋ฐฐ๊ฒฝ์ด ๋‚จ์•„์žˆ๋‹ค

์•„์ง ๋’ท๋ฐฐ๊ฒฝ์ด ๋‚จ์•„์žˆ๋‹ค2

์•„์ง ๋’ท๋ฐฐ๊ฒฝ์ด ๋‚จ์•„์žˆ๋‹ค3

์•„์ง ๋’ท๋ฐฐ๊ฒฝ์ด ๋‚จ์•„์žˆ๋‹ค4

๋“œ๋””์–ด ์—†์–ด์กŒ๋‹ค.!


๊ทผ๋ฐ ๊ธ€์ž์— ์ƒ‰์„ ๋„ฃ์ง€ ์•Š์œผ๋ฉด ๊ธ€์ž๊ฐ€ ์•ˆ๋ณด์ด๋Š” ์˜ค๋ฅ˜๊ฐ€ ๋˜ ๋ฐœ์ƒํ•จ
์™œ ์ƒ‰์„ ๋„ฃ์–ด์ค˜์•ผ ๊ธ€์ž๊ฐ€ ๋ณด์ด๋Š”์ง€๋Š” ์•Œ์•„๋ณด์ž

windowBackground ์ƒ‰์„ black์œผ๋กœ ํ–ˆ์„ ๋•Œ

๋””์ž์ธ ์ฐธ๊ณ  ์ž๋ฃŒ

profile
๋‚ด๊ฐ€ ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๊ฒŒ ์“ฐ๋Š” ๋ธ”๋กœ๊ทธ

0๊ฐœ์˜ ๋Œ“๊ธ€