๐Ÿ”ฅTIL๐Ÿ”ฅ์ŠคํŒŒ๋ฅดํƒ€ | Fragment

hyihyiยท2024๋…„ 1์›” 8์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
29/69
post-thumbnail

๐Ÿ“–Fragment

๋‹จ์–ด ์˜๋ฏธ
'์กฐ๊ฐ', '๋ถ€๋ถ„'. ์ž‘์€ ์กฐ๊ฐ์ด๋‚˜ ๋ถ€๋ถ„์ ์ธ ์š”์†Œ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๋ง
์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค(UI)์˜ ์ผ๋ถ€๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ํด๋ž˜์Šค
ํ”„๋ž˜๊ทธ๋จผํŠธ : ํ•œ ๊ฐœ์˜ ์•กํ‹ฐ๋น„ํ‹ฐ ์•ˆ์—์„œ ํŠน์ • ์˜์—ญ๋งŒ ๊ต์ฒด

๐Ÿ“Activity์™€ Fragment์˜ ์ฐจ์ด

1) Activity
์•กํ‹ฐ๋น„ํ‹ฐ ๋งค๋‹ˆ์ €์—์„œ ์ธํ…ํŠธ๋ฅผ ํ•ด์„ํ•ด ์•กํ‹ฐ๋น„ํ‹ฐ๊ฐ„ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌ
2) Fragment
ํ•˜๋‚˜์˜ ์•กํ‹ฐ๋น„ํ‹ฐ ์•ˆ์˜ ํ”„๋ž˜๊ทธ๋จผํŠธ ๋งค๋‹ˆ์ €์—์„œ ๋ฉ”์†Œ๋“œ๋กœ ํ”„๋ž˜๊ทธ๋จผํŠธ ๊ฐ„ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌ

????????????????Activity ๊ฐ„์˜ ํ™”๋ฉด ์ด๋™์„ ํ•  ๋•Œ ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ๋ฌด์กฐ๊ฑด ์ ์šฉ๋˜๋Š” ์ด์œ  : ์ฒซ ๋ฒˆ์งธ Activity์™€ ๋‘ ๋ฒˆ์งธ Activity ์‚ฌ์ด์˜ ์‹œ๊ฐ„ ์ฐจ๋ฅผ ๋ง‰์„ ์ˆ˜ ์—†๊ธฐ ๋•Œ๋ฌธ

๐Ÿค”Fragment๋ฅผ ์“ฐ๋Š” ์ด์œ 

๋ชฉ์  : ๋ณต์žกํ•œ UI์˜ ๋ชจ๋“ˆํ™”๋ฅผ ํ†ตํ•œ ์œ ์—ฐํ•œ ๊ด€๋ฆฌ
Fragment๋กœ ์ผ๋ถ€๋งŒ ๋ฐ”๊พธ๋Š” ๊ฒƒ์ด ์ž์› ์ด์šฉ๋Ÿ‰์ด ์ ์–ด ์†๋„๊ฐ€ ๋น ๋ฆ„
์žฌ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•ด์„œ ๋‹ค๋ฅธ Activity์—์„œ ๋˜ ์“ธ ์ˆ˜ ์žˆ๋‹ค.
Fragment ๊ฐ„์˜ ๋ฐ์ดํ„ฐ ๊ณต์œ ๊ฐ€ ์‰ฝ๋‹ค

๐Ÿ“Fragment์˜ ๋ผ์ดํ”„ ์‚ฌ์ดํด

๋งค์šฐ ๋งŽ์•„์„œ onCreate, onCreateView, onViewCreated๊นŒ์ง€๋งŒ ๊ธฐ์–ตํ•˜์ž.

1. onCreate : UI์™€ ๊ด€๋ จ์—†๋Š” ์ดˆ๊ธฐํ™” ์ž‘์—…. ex) ๋ฐ์ดํ„ฐ ์ „๋‹ฌ, BindView, inflate

์ด ์‹œ์ ์—๋Š” ์•„์ง Fragment View๊ฐ€ ์ƒ์„ฑ๋˜์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์— Fragment์˜ View์™€ ๊ด€๋ จ๋œ ์ž‘์—…์„ ๋‘๊ธฐ์— ์ ์ ˆํ•˜์ง€ ์•Š๋‹ค.

2. onCreateView : ๋ทฐ์™€ ๊ด€๋ จ๋œ ๊ฒƒ๋“ค ์ดˆ๊ธฐํ™”

3. onViewCreated

์ƒˆ๋กœ๋‚˜์˜จ ๊ฒƒ : onViewCreated, onViewStateRestored, onSaveInstanceState

๐Ÿ“Fragment ์‹ค์Šต

1. Activity์˜ xml์— Fragment ์ถ”๊ฐ€

Fragment๋ฅผ Activity์˜ ๋ ˆ์ด์•„์›ƒ ํŒŒ์ผ ์•ˆ์—์„œ ์„ ์–ธ

  • ํ”„๋ž˜๊ทธ๋จผํŠธ๋ฅผ xml์— ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ 3๊ฐ€์ง€๊ฐ€ ์žˆ๋‹ค.

    1) ์ •์  ์ถ”๊ฐ€ : fragment
    2) ๋™์  ์ถ”๊ฐ€ : FrameLayout, FragmentContainerView

โ”์ •์ /๋™์ ์ด๋ž€?

์•ˆ๋“œ๋กœ์ด๋“œ ํ”„๋ž˜๊ทธ๋จผํŠธ๋ฅผ ํ™”๋ฉด์— ๋ฐฐ์น˜ํ•˜๋Š” ๋‘ ๊ฐ€์ง€ ์ฃผ์š” ๋ฐฉ๋ฒ•

  • ๋™์ 
    ํ”„๋กœ๊ทธ๋žจ ์‹คํ–‰ ์ค‘์— ํ”„๋ž˜๊ทธ๋จผํŠธ๋ฅผ ์ถ”๊ฐ€, ์ œ๊ฑฐ, ๋˜๋Š” ๊ต์ฒด๊ฐ€๋Šฅ
    ์ด ๋ฐฉ๋ฒ•์€ ์œ ์—ฐ์„ฑ์ด ๋†’์•„ ์‚ฌ์šฉ์ž์˜ ์ƒํ˜ธ์ž‘์šฉ์— ๋”ฐ๋ผ UI๋ฅผ ๋ณ€๊ฒฝํ•ด์•ผ ํ•  ๋•Œ ์ฃผ๋กœ ์‚ฌ์šฉ
    ex) ์‚ฌ์šฉ์ž๊ฐ€ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด ์ƒˆ๋กœ์šด ํ”„๋ž˜๊ทธ๋จผํŠธ๋กœ ๊ต์ฒดํ•  ๋•Œ
    1) ๋™์  ์ถ”๊ฐ€๋ฅผ ์œ„ํ•ด, ๋จผ์ € ํ”„๋ž˜๊ทธ๋จผํŠธ๋ฅผ ๋‹ด์„ ์ˆ˜ ์žˆ๋Š” ์ปจํ…Œ์ด๋„ˆ(์˜ˆ: FrameLayout ๋˜๋Š” FragmentContainerView)๋ฅผ XML ๋ ˆ์ด์•„์›ƒ์— ์ •์˜
    2) ์ฝ”ํ‹€๋ฆฐ(๋˜๋Š” ์ž๋ฐ”) ์ฝ”๋“œ์—์„œ FragmentManager๋ฅผ ์‚ฌ์šฉํ•ด ํ”„๋ž˜๊ทธ๋จผํŠธ๋ฅผ ์ถ”๊ฐ€, ์ œ๊ฑฐ, ๊ต์ฒด
  • ์ •์ 
    ์ •์  ์ถ”๊ฐ€๋Š” XML ๋ ˆ์ด์•„์›ƒ ํŒŒ์ผ์— ์ง์ ‘ ํ”„๋ž˜๊ทธ๋จผํŠธ๋ฅผ ์ •์˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ๋ฐฉ๋ฒ•์€ ์•ฑ์ด ์‹œ์ž‘๋  ๋•Œ ํ”„๋ž˜๊ทธ๋จผํŠธ๊ฐ€ ์ž๋™์œผ๋กœ ํ™”๋ฉด์— ํ‘œ์‹œ๋˜๋ฉฐ, ์‹คํ–‰ ์ค‘์—๋Š” ๋ณ€๊ฒฝ๋˜์ง€ ์•Š์Œ
    ์ •์  ์ถ”๊ฐ€๋Š” ์ฃผ๋กœ UI์˜ ๋ณ€ํ•˜์ง€ ์•Š๋Š” ๋ถ€๋ถ„์— ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.
    ex) ํ•ญ์ƒ ๋ณด์—ฌ์•ผ ํ•˜๋Š” ๋ฉ”๋‰ด ๋˜๋Š” ํ—ค๋”๊ฐ€ ์ด์— ํ•ด๋‹น

1. fragment

android:name="com.example.MyFragment"๊ณผ ๊ฐ™์ด name ํƒœ๊ทธ๋กœ XML์—์„œ ์ง์ ‘ ํ”„๋ž˜๊ทธ๋จผํŠธ๋ฅผ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด ๋ฐฉ๋ฒ•์€ ํ”„๋ž˜๊ทธ๋จผํŠธ๊ฐ€ UI์˜ ์ •์ ์ธ ๋ถ€๋ถ„์ผ ๋•Œ ์ฃผ๋กœ ์‚ฌ์šฉํ•˜๊ณ  ์ฝ”ํ‹€๋ฆฐ ์ฝ”๋“œ์—์„œ commit ํ•ด ์ค„ ํ•„์š”๊ฐ€ ์—†๋‹ค.

  • XML ์˜ˆ์‹œ
<fragment
    android:id="@+id/my_fragment"
    android:name="com.example.MyFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

2. FrameLayout

ํ”„๋ž˜๊ทธ๋จผํŠธ๋ฅผ ๋™์ ์œผ๋กœ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋Š” ์ปจํ…Œ์ด๋„ˆ

  • XML ์˜ˆ์‹œ
<FrameLayout
    android:id="@+id/my_frame_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
  • ์ฝ”ํ‹€๋ฆฐ ์ฝ”๋“œ ์˜ˆ์‹œ
val fragment = MyFragment()
supportFragmentManager.beginTransaction()
    .add(R.id.my_frame_layout, fragment)
    .commit()

3. FragmentContainerView

์•ˆ๋“œ๋กœ์ด๋“œ๋Š” FragmentContainerView๋ฅผ ๊ถŒ์žฅํ•œ๋‹ค.
์ด 3๊ฐ€์ง€ ์ค‘ FragmentContainerView๋ฅผ ํ”„๋ž˜๊ทธ๋จผํŠธ์˜ ์ปจํ…Œ์ด๋„ˆ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.
FragmentContainerView๋Š” ํ”„๋ž˜๊ทธ๋จผํŠธ๋ฅผ ์œ„ํ•œ ์ตœ์‹ ์˜ ์ „์šฉ ๋ทฐ
FrameLayout๊ณผ ์œ ์‚ฌํ•˜์ง€๋งŒ, ํ”„๋ž˜๊ทธ๋จผํŠธ ์ „ํ™˜๊ณผ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ฒ˜๋ฆฌ์— ์ตœ์ ํ™”๋˜์–ด ์žˆ์Œ

  • XML ์˜ˆ์‹œ
<androidx.fragment.app.FragmentContainerView
    android:id="@+id/my_fragment_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:name="com.example.MyFragment"/>
  • ์ฝ”ํ‹€๋ฆฐ ์ฝ”๋“œ ์˜ˆ์‹œ
val fragment = MyFragment()
supportFragmentManager.beginTransaction()
    .replace(R.id.my_fragment_container, fragment)
    .commit()

MainActivity์— Fragment๊ฐ€ ๋“ค์–ด๊ฐˆ ์˜์—ญ ์ง€์ •
ํ”„๋ž˜๊ทธ๋จผํŠธ๋ฅผ ์•กํ‹ฐ๋น„ํ‹ฐ์˜ ๋ ˆ์ด์•„์›ƒ ํŒŒ์ผ ์•ˆ์—์„œ ์„ ์–ธ

onCreateView์—์„œ inflate ํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด fragment_first.xml ํŒŒ์ผ๋กœ๋ถ€ํ„ฐ ๋ ˆ์ด์•„์›ƒ์„ ๋กœ๋“œ


3. kotlin ์ฝ”๋“œ์—์„œ ๋™์ ์œผ๋กœ ํ”„๋ž˜๊ทธ๋จผํŠธ ์ถ”๊ฐ€ํ•˜๊ธฐ

(FragmentContainerView๋ฅผ ์‚ฌ์šฉํ–ˆ์„ ๋•Œ)

supportFragmentManager.commit {
            replace(R.id.frameLayout, frag)
            setReorderingAllowed(true)
            addToBackStack("")
        }

supportFragmentManager : ์‚ฌ์šฉ์ž ์ƒํ˜ธ์ž‘์šฉ์— ์‘๋‹ตํ•ด Fragment๋ฅผ ์ถ”๊ฐ€ํ•˜๊ฑฐ๋‚˜ ์‚ญ์ œํ•˜๋Š” ๋“ฑ ์ž‘์—…์„ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ๋งค๋‹ˆ์ €

replace(R.id.frameLayout, frag) : '์–ด๋Š ํ”„๋ ˆ์ž„ ๋ ˆ์ด์•„์›ƒ์— ๋„์šธ ๊ฒƒ์ธ์ง€' ์™€ '์–ด๋–ค ํ”„๋ž˜๊ทธ๋จผํŠธ๋ฅผ ๋„์šธ ๊ฒƒ'์ธ์ง€
โžก R.id.frameLayout์— frag Fragment ๋ฅผ ๋„์šธ ๊ฑฐ๋ผ๊ณ  ์ง€์ •

setReorderingAllowed : ์• ๋‹ˆ๋ฉ”์ด์…˜๊ณผ ์ „ํ™˜์ด ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์ž‘๋™ํ•˜๋„๋ก ํŠธ๋žœ์žญ์…˜๊ณผ ๊ด€๋ จ๋œ ํ”„๋ž˜๊ทธ๋จผํŠธ์˜ ์ƒํƒœ ๋ณ€๊ฒฝ์„ ์ตœ์ ํ™”
์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์˜ˆ์˜๊ฒŒ ๋ณด์ด๋ ค๋ฉด ํ•ญ์ƒ ํ•ด์•ผํ•จ(?)

addToBackStack : ๋’ค๋กœ๊ฐ€๊ธฐ ๋ฒ„ํŠผ ํด๋ฆญ์‹œ ๋‹ค์Œ ์•ก์…˜ (์ด์ „ fragment๋กœ ๊ฐ€๊ฑฐ๋‚˜ ์•ฑ์ด ์ข…๋ฃŒ๋˜๊ฑฐ๋‚˜)


๐Ÿ“Œ์š”์•ฝ

  1. ๋™์ /์ •์ 
    ๋™์  ์ถ”๊ฐ€ : ํ”„๋กœ๊ทธ๋žจ ์‹คํ–‰ ์ค‘์— ํ”„๋ž˜๊ทธ๋จผํŠธ๋ฅผ ์œ ์—ฐํ•˜๊ฒŒ ์ถ”๊ฐ€, ์ œ๊ฑฐ, ๊ต์ฒดํ•  ์ˆ˜ ์žˆ์Œ. ์‚ฌ์šฉ์ž ์ƒํ˜ธ์ž‘์šฉ์— ๋”ฐ๋ผ UI๋ฅผ ๋ณ€๊ฒฝํ•ด์•ผ ํ•  ๋•Œ ์‚ฌ์šฉ.
    ์ •์  ์ถ”๊ฐ€ : XML ๋ ˆ์ด์•„์›ƒ์— ํ”„๋ž˜๊ทธ๋จผํŠธ๋ฅผ ์ง์ ‘ ์ •์˜ํ•˜๊ณ , ์•ฑ ์‹คํ–‰ ์‹œ ์ž๋™์œผ๋กœ ํ‘œ์‹œ. UI์˜ ๊ณ ์ •๋œ ๋ถ€๋ถ„์— ์ ํ•ฉ.

  2. Activity์— Fragment ์ถ”๊ฐ€
    ์•ˆ๋“œ๋กœ์ด๋“œ๋Š” FragmentContainerView๋ฅผ ๊ถŒ์žฅํ•œ๋‹ค.

profile
์ž์œ ๋กญ๊ฒŒ ์“ด ๋‚˜์˜ ์ž์œ ๋กœ์šด Development voyageโ›ต

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