๊นจ์•Œ ๊ฐœ๋… ๐Ÿ“‘/Android

[Android] Navigation - ํ™˜๊ฒฝ ์„ค์ •

interfacer_han 2024. 1. 25. 13:01

#1 Navigation

#1-1 ์•กํ‹ฐ๋น„ํ‹ฐ ๋ฐ ํ”„๋ž˜๊ทธ๋จผํŠธ ๊ตฌ์„ฑ์˜ ํŠธ๋ Œ๋“œ

์š”์ฆ˜ ์•ˆ๋“œ๋กœ์ด๋“œ ๊ฐœ๋ฐœ์˜ ํŠธ๋ Œ๋“œ๋Š” ํ•˜๋‚˜์˜ ์•กํ‹ฐ๋น„ํ‹ฐ, ์—ฌ๋Ÿฌ ๊ฐœ์˜ ํ”„๋ž˜๊ทธ๋จผํŠธ๋‹ค. ์ด๋Š” ๊ตฌ๊ธ€์˜ ๊ถŒ์žฅ์‚ฌํ•ญ์ด๊ธฐ๋„ ํ•˜๋‹ค. ์ด ํŠธ๋ Œ๋“œ์—์„œ ๋‹จ์ผ ์•กํ‹ฐ๋น„ํ‹ฐ๋Š” ์ผ์ข…์˜ '๋นˆ ๊ทธ๋ฆ‡'์œผ๋กœ์„œ๋งŒ ์˜๋ฏธ๋ฅผ ๊ฐ€์ง„๋‹ค. ์œ ์˜๋ฏธํ•œ ํ™”๋ฉด ์ปจํ…์ธ ๋Š” ์ „๋ถ€ ํ”„๋ž˜๊ทธ๋จผํŠธ๋กœ ๊ตฌํ˜„ํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
 

#1-2 Navigation architecture component library

 

ํƒ์ƒ‰  |  Android ๊ฐœ๋ฐœ์ž  |  Android Developers

Android Jetpack์˜ ํƒ์ƒ‰ ๊ตฌ์„ฑ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์•ฑ์—์„œ ํƒ์ƒ‰ ๊ตฌํ˜„

developer.android.com

๊ทธ๋Ÿฌ๋‚˜, ์•กํ‹ฐ๋น„ํ‹ฐ์™€ ํ”„๋ž˜๊ทธ๋จผํŠธ ๊ฐ„์˜ ์ „ํ™˜(Navigation)๊ณผ ํ๋ฆ„์„ ์ผ์ผ์ด ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ์€ ๊ณจ์น˜์•„ํ”ˆ ์ผ์ด๋‹ค. ์ด ๋•Œ, ์•ˆ๋“œ๋กœ์ด๋“œ Jetpack์˜ Navigation architecture component library๋Š” Navigation์˜ ์† ์‰ฌ์šด ์ฒ˜๋ฆฌ๋ฅผ ์ œ๊ณตํ•œ๋‹ค. ์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—๋Š” 3๊ฐœ์˜ ํ•ต์‹ฌ ์š”์†Œ๊ฐ€ ์กด์žฌํ•œ๋‹ค. ๋ฐ”๋กœ Navigation graph, NavHostFragment, NavController๋‹ค.
 

#1-3 Navigation graph

Navigation graph๋Š” xml ํŒŒ์ผ์˜ ํ˜•ํƒœ์ด๋ฉฐ, Navigation(ํ”„๋ž˜๊ทธ๋จผํŠธ ์ „ํ™˜)๊ณผ ๊ด€๋ จ๋œ ๋ชจ๋“  ์ •๋ณด๊ฐ€ ๋‹ด๊ธด Resource File์ด๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ nav_graph.xml๋ผ๋Š” ์ด๋ฆ„์œผ๋กœ ์กด์žฌํ•œ๋‹ค.
 

#1-4 NavHostFragment

ํ”„๋ž˜๊ทธ๋จผํŠธ๋Š” ์•กํ‹ฐ๋น„ํ‹ฐ์— ๋‹ด๊ธฐ๋Š” ๊ฒƒ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๋‹ค๋ฅธ ํ”„๋ž˜๊ทธ๋จผํŠธ๋ฅผ ํ’ˆ์„ ์ˆ˜๋„ ์žˆ๋‹ค. NavHostFragment๋Š” ๋‹ค๋ฅธ Fragment ํ’ˆ๋Š”, ๋ง ๊ทธ๋Œ€๋กœ Hostํ•˜๋Š” Fragment๋‹ค. NavHostFragment๊ฐ€ ์ œ๊ณตํ•˜๋Š” Host์— '์†๋‹˜'์œผ๋กœ์„œ ๋“ค์–ด๊ฐ€๋Š” ํ”„๋ž˜๊ทธ๋จผํŠธ๋“ค์„ ๋ชฉ์ ์ง€(Destination) ํ”„๋ž˜๊ทธ๋จผํŠธ๋ผ ๋ถ€๋ฅธ๋‹ค. ์—ฌ๊ธฐ์„œ ๋งํ•˜๋Š” '๋ชฉ์ ์ง€'๋Š” Navigation์˜ ๋„์ฐฉ์ง€๋ผ๋Š” ์˜๋ฏธ๋‹ค. ๊ณ„์ธต ๊ตฌ์กฐ๋ฅผ ๋ณด๋ฉด, Activity์— NavHostFragment๊ฐ€ ๋‹ด๊ธฐ๊ณ , NavHostFragment์— Destination Fragment๊ฐ€ ๋‹ด๊ธด๋‹ค.
 

#1-5 NavController

NavController๋Š” Navigation graph์—์„œ ์ถ”๊ฐ€ํ–ˆ๋˜ Destination Fragment๋“ค์˜ Navigation(์ „ํ™˜)์„ ๊ด€๋ฆฌํ•˜๋Š” ๊ฐ์ฒด๋‹ค.
 

#2 Navigation ์‚ฌ์šฉ์„ ์œ„ํ•œ ์ค€๋น„

#2-1 ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ์ด ๊ตฌํ˜„๋œ ์ƒ˜ํ”Œ ์•ฑ

 

[Android] Data Binding - ๊ธฐ์ดˆ

#1 ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ ์‚ฌ์šฉ ์ „ #1-1 ์˜ˆ์‹œ ์•ฑ ์œ„๊ณผ ๊ฐ™์€ ๊ฐ„๋‹จํ•œ ์•ฑ์ด ์žˆ๋‹ค. Button์„ ๋ˆ„๋ฅด๋ฉด, EditText์˜ text๊ฐ€ ๋ฐ”๋กœ ์œ„์— ์žˆ๋Š” TextView์˜ text์— ๋Œ€์ž…๋œ๋‹ค. ์ด ์•ฑ์˜ ์ฝ”๋“œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค. #1-2 activity_main.xml #1-3 Main

kenel.tistory.com

์–ด๋–ค ์•ฑ์„ ๋งŒ๋“ค๋“  ์•ฑ์˜ ์ž ์žฌ์ ์ธ ๊ฒฐํ•ฉ๋„๋ฅผ ๋‚ฎ์ถœ ์ˆ˜ ์žˆ๋‹ค๋ฉด ์ข‹์„ ๊ฒƒ์ด๋‹ค. ๋”ฐ๋ผ์„œ ์œ„ ๊ฒŒ์‹œ๊ธ€์— ์žˆ๋Š” ๋ฐฉ๋ฒ•๋Œ€๋กœ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ์„ ๊ตฌํ˜„ํ•œ๋‹ค. Module ์ˆ˜์ค€ build.gradle์—์„œ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ์„ ํ—ˆ์šฉํ•˜๊ณ , activity_main.xml์„ <layout> ํƒœ๊ทธ๋กœ ๊ฐ์‹ผ๋‹ค. MainActivity.kt์—์„  setContentView()๋ฅผ DataBindingUtil์„ ํ†ตํ•ด ์ˆ˜ํ–‰ํ•˜๊ณ , ์ด๋ฅผ ActivityMainBinding ํด๋ž˜์Šค์˜ ๊ฐ์ฒด์ธ binding์— ํ• ๋‹นํ•œ๋‹ค.
 

#2-2 build.gradle.kts (Module)์—์„œ Navigation ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋‹ค์šด๋กœ๋“œ

plugins {
    ...
}

android {
    ...
}

dependencies {
    val nav_version = "2.7.6"
    implementation("androidx.navigation:navigation-fragment-ktx:$nav_version") // Navigation
    implementation("androidx.navigation:navigation-ui-ktx:$nav_version") // Navigation

    ...
}

dependencies { ... }์— ์—ฌ๊ธฐ์— ์žˆ๋Š” ๊ตฌ๋ฌธ์„ ์ถ”๊ฐ€ํ•œ๋‹ค. 
 

#2-3 build.gradle.kts (Project)์—์„œ Safe Args ํ”Œ๋Ÿฌ๊ทธ์ธ ๋“ฑ๋ก

// Top-level build file where you can add configuration options common to all sub-projects/modules.
plugins {
    id("com.android.application") version "8.1.2" apply false
    id("org.jetbrains.kotlin.android") version "1.9.0" apply false
}

buildscript {
    repositories {
        google() // ๊ตฌ๊ธ€์˜ Maven repository์—์„œ ๋‹ค์šด๋กœ๋“œํ•˜๊ธฐ ์œ„ํ•ด์„œ
    }
    dependencies {
        val nav_version = "2.7.6"
        classpath("androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version")
    }
}

ํ”„๋ž˜๊ทธ๋จผํŠธ ๊ฐ„ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•  ๋•Œ ์‚ฌ์šฉํ•  Safe Args ํ”Œ๋Ÿฌ๊ทธ์ธ๋„ ๋“ฑ๋กํ•œ๋‹ค.
 

#2-4 Navagation graph ๋งŒ๋“ค๊ธฐ

๋ชจ๋“ˆ์˜ ์ด๋ฆ„(์—ฌ๊ธฐ์„œ๋Š” "app")์„ ์šฐํด๋ฆญํ•˜๋ฉด ๋‚˜์˜ค๋Š” ๋ฉ”๋‰ด์—์„œ [New] - [Android Resource File]์„ ํด๋ฆญํ•œ๋‹ค.
 

์ด๋ฆ„์—๋Š” nav_graph๋ฅผ, Resource type์€ Navigation์œผ๋กœ ์„ค์ •ํ•˜๊ณ , OK ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅธ๋‹ค.

#2-5 activity_main.xml์—์„œ NavHostFragment ๋งŒ๋“ค๊ธฐ

<?xml version="1.0" encoding="utf-8"?>
<layout ...>

    <androidx.constraintlayout.widget.ConstraintLayout ...>


        <androidx.fragment.app.FragmentContainerView
            android:id="@+id/fragmentContainerView"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginStart="1dp"
            android:layout_marginTop="1dp"
            android:layout_marginEnd="1dp"
            android:layout_marginBottom="1dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

activity_main.xml์— <androidx.fragment.app.FragmentContainerView>๋ฅผ ๋„ฃ๋Š”๋‹ค. ๊ทธ๋ฆฌ๊ณ  id์™€ layout ๊ด€๋ จ ์†์„ฑ์— ํ”„๋กœ๊ทธ๋ž˜๋จธ ๋งˆ์Œ๋Œ€๋กœ ๊ฐ’์„ ํ• ๋‹นํ•œ๋‹ค.
 

<?xml version="1.0" encoding="utf-8"?>
<layout ...>

    <androidx.constraintlayout.widget.ConstraintLayout ...>


        <androidx.fragment.app.FragmentContainerView
            ...
            android:name="androidx.navigation.fragment.NavHostFragment"
            app:defaultNavHost="true"
            app:navGraph="@navigation/nav_graph" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

๊ทธ๋ฆฌ๊ณ  NavHostFragment์˜ ๋™์ž‘์„ ์ขŒ์šฐํ•  3๊ฐ€์ง€์˜ ์ค‘์š”ํ•œ ์†์„ฑ๋„ ์ถ”๊ฐ€ํ•œ๋‹ค.

android:name ์†์„ฑ์€ ํ•ด๋‹น <androidx.fragment.app.FragmentContainerView> ํƒœ๊ทธ๊ฐ€ androidx.navigation.fragment.NavHostFragment ํด๋ž˜์Šค๋ฅผ ์ฐธ์กฐํ•˜๋ฉฐ, ์ด ํด๋ž˜์Šค์˜ ์ธ์Šคํ„ด์Šค๋กœ์„œ ๋Ÿฐํƒ€์ž„ ์ค‘์— ์ƒ์„ฑ๋  ๊ฒƒ์ž„์„ ์˜๋ฏธํ•œ๋‹ค.

app:defaultNavHost์˜ ๊ฐ’์ด true๋ฉด, ํ•ด๋‹น ํ”„๋ž˜๊ทธ๋จผํŠธ๊ฐ€ ์•ˆ๋“œ๋กœ์ด๋“œ ํœด๋Œ€ํฐ์˜ '๋’ค๋กœ ๊ฐ€๊ธฐ' ๋ฒ„ํŠผ์„ ํด๋ฆญํ–ˆ์„ ๋•Œ ๋ฐ˜์‘ํ•˜๋Š” Fragment๋ผ๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•œ๋‹ค. ํ•œ ๊ฐœ์˜ ์•กํ‹ฐ๋น„ํ‹ฐ์— 2๊ฐœ ์ด์ƒ์˜ ํ”„๋ž˜๊ทธ๋จผํŠธ ํ˜ธ์ŠคํŠธ๊ฐ€ ์กด์žฌํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์ด๋Ÿฐ ์†์„ฑ์ด ์žˆ๋Š” ๊ฒƒ์ด๋‹ค.

๋งˆ์ง€๋ง‰์œผ๋กœ app:navGraph ์†์„ฑ์—๋Š” ํ•ด๋‹น NavHostFragment๊ฐ€ ์‚ฌ์šฉํ•  Navigation graph๋ฅผ ํ• ๋‹นํ•œ๋‹ค. #2-4์—์„œ ๋งŒ๋“  ๋‚ด๋น„๊ฒŒ์ด์…˜ ๊ทธ๋ž˜ํ”„๋ฅผ ๋„ฃ์œผ๋ฉด ๋œ๋‹ค.
 

#3 ์š”์•ฝ

Navigation ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•œ ์ค€๋น„๋ฅผ ํ–ˆ๋‹ค.

#4 ์™„์„ฑ๋œ ์•ฑ

 

android-practice/navigation/SetupEnvironment at master · Kanmanemone/android-practice

Contribute to Kanmanemone/android-practice development by creating an account on GitHub.

github.com

 

#5 ์ด์–ด์ง€๋Š” ๊ธ€

 

[Android] Navigation - ๊ธฐ์ดˆ

#1 ์ด์ „ ๊ธ€ [Android] Navigation - ํ™˜๊ฒฝ ์„ค์ • #1 Navigation#1-1 ์•กํ‹ฐ๋น„ํ‹ฐ ๋ฐ ํ”„๋ž˜๊ทธ๋จผํŠธ ๊ตฌ์„ฑ์˜ ํŠธ๋ Œ๋“œ์š”์ฆ˜ ์•ˆ๋“œ๋กœ์ด๋“œ ๊ฐœ๋ฐœ์˜ ํŠธ๋ Œ๋“œ๋Š” ํ•˜๋‚˜์˜ ์•กํ‹ฐ๋น„ํ‹ฐ, ์—ฌ๋Ÿฌ ๊ฐœ์˜ ํ”„๋ž˜๊ทธ๋จผํŠธ๋‹ค. ์ด๋Š” ๊ตฌ๊ธ€์˜ ๊ถŒ์žฅ์‚ฌํ•ญ

kenel.tistory.com