Android Academy · leksjon

Navigation Component

Administrer navigasjon mellom flere skjermer med en visuell NavGraph, typesikre argumenter med Safe Args, NavController og støtte for deep links.

Leksjon 5 av 613 trinn

Navigation Component er en gratis leksjon i Android Academy på CoddyKit. Dette er leksjon 5 av 6. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Android Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Android Academy inneholder totalt 6 leksjoner.

Hva er Navigation Component?

Navigation Component er et Android Jetpack-bibliotek som håndterer fragmentnavigasjon, tilbake-stakken, deep links og overgangsanimasjoner i én samlet, visuell graf.

Viktige fordeler:

Visuell navigasjonsgraf i Android Studio
Typesikker overføring av argumenter (Safe Args)
Automatisk håndtering av tilbake-stakken
Innebygd støtte for deep links

Oppsett: Avhengigheter

Legg til i app/build.gradle:

// app/build.gradle
dependencies {
    implementation 'androidx.navigation:navigation-fragment-ktx:2.7.7'
    implementation 'androidx.navigation:navigation-ui-ktx:2.7.7'
}

// project/build.gradle (for Safe Args):
buildscript {
    dependencies {
        classpath 'androidx.navigation:navigation-safe-args-gradle-plugin:2.7.7'
    }
}

// app/build.gradle — apply the plugin:
plugins {
    id 'androidx.navigation.safeargs.kotlin'
}

Navigasjonsgraf (nav_graph.xml)

Opprett res/navigation/nav_graph.xml. Den definerer destinasjoner (fragmenter) og handlinger (navigasjonsbaner):

<!-- res/navigation/nav_graph.xml -->
<navigation
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/nav_graph"
    app:startDestination="@id/homeFragment">

    <fragment
        android:id="@+id/homeFragment"
        android:name="com.example.HomeFragment">
        <action
            android:id="@+id/action_home_to_detail"
            app:destination="@id/detailFragment" />
    </fragment>

    <fragment
        android:id="@+id/detailFragment"
        android:name="com.example.DetailFragment">
        <argument
            android:name="itemId"
            app:argType="integer" />
    </fragment>
</navigation>

NavHostFragment i Activity-layout

Bytt ut FrameLayout-beholderen med NavHostFragment. Den fungerer som vert for alle navigasjonsdestinasjonene:

<!-- activity_main.xml -->
<androidx.fragment.app.FragmentContainerView
    android:id="@+id/navHostFragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:navGraph="@navigation/nav_graph"
    app:defaultNavHost="true" />

NavController — navigere mellom fragmenter

Hent en NavController og kall navigate() med en handlings-ID:

class HomeFragment : Fragment() {

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        binding.btnOpenDetail.setOnClickListener {
            // Navigate using action ID from nav_graph
            findNavController().navigate(R.id.action_home_to_detail)
        }
    }
}

Safe Args — typesikre argumenter

Safe Args genererer klasser for overføring av argumenter mellom fragmenter uten casting eller skrivefeil i nøkler:

// In HomeFragment — pass itemId:
binding.btnOpenDetail.setOnClickListener {
    val action = HomeFragmentDirections.actionHomeToDetail(itemId = 42)
    findNavController().navigate(action)
}

// In DetailFragment — receive itemId:
class DetailFragment : Fragment() {
    private val args: DetailFragmentArgs by navArgs()

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        val id = args.itemId   // Int, type-safe
        viewModel.loadItem(id)
    }
}

Opp-navigasjon

Koble verktøylinjens opp-knapp til NavController for automatisk navigasjon tilbake:

class MainActivity : AppCompatActivity() {

    private lateinit var navController: NavController

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val navHostFragment = supportFragmentManager
            .findFragmentById(R.id.navHostFragment) as NavHostFragment
        navController = navHostFragment.navController

        // Wire toolbar Up button
        setupActionBarWithNavController(navController)
    }

    override fun onSupportNavigateUp(): Boolean {
        return navController.navigateUp() || super.onSupportNavigateUp()
    }
}

Bunnnavigasjon med NavController

Koble en BottomNavigationView til NavController — den håndterer automatisk fanevalg og tilbake-stakken:

// In Activity.onCreate():
val navHostFragment = supportFragmentManager
    .findFragmentById(R.id.navHostFragment) as NavHostFragment
val navController = navHostFragment.navController

// Wire BottomNavigationView
binding.bottomNav.setupWithNavController(navController)

// Each menu item ID must match a fragment destination ID in nav_graph.xml

Pop tilbake-stakken

Naviger tilbake programmatisk eller til en bestemt destinasjon:

// Go back one step
findNavController().popBackStack()

// Navigate back to a specific destination (popping everything on top)
findNavController().popBackStack(R.id.homeFragment, inclusive = false)

// Navigate and clear back stack (e.g., after login)
findNavController().navigate(
    R.id.action_login_to_home,
    null,
    NavOptions.Builder()
        .setPopUpTo(R.id.loginFragment, inclusive = true)
        .build()
)

Deep links

Legg til en deep link for en destinasjon, slik at appen kan åpnes fra en URL:

<!-- In nav_graph.xml, inside the destination fragment: -->
<deepLink
    android:id="@+id/deepLinkDetail"
    app:uri="https://example.com/items/{itemId}" />

<!-- Also add intent-filter in AndroidManifest.xml for the Activity: -->
<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="https" android:host="example.com" />
</intent-filter>

Overganger mellom fragmenter

Legg til egendefinerte animasjoner for navigasjonshandlinger i navigasjonsgrafen:

<action
    android:id="@+id/action_home_to_detail"
    app:destination="@id/detailFragment"
    app:enterAnim="@anim/slide_in_right"
    app:exitAnim="@anim/slide_out_left"
    app:popEnterAnim="@anim/slide_in_left"
    app:popExitAnim="@anim/slide_out_right" />

Kort kontroll

Hva må samsvare mellom ID-en til menyelementet i BottomNavigationView og navigasjonsgrafen for at fanehåndteringen skal fungere automatisk?

Besvar den i den interaktive leksjonen

Oppsummering: Navigation Component

Navigation Component forenkler apper med flere skjermer:

Visuell nav_graph.xml — destinasjoner og handlinger
NavHostFragment i Activity-layouten
findNavController().navigate(actionId) for å gå mellom skjermer
Safe Args — typesikker overføring av argumenter (ingen casting eller skrivefeil)
setupActionBarWithNavController() — automatisk opp-knapp
setupWithNavController() — automatisk BottomNavigationView

Neste: Legg til Dependency Injection med Hilt for en ryddig arkitektur.

Gratis å komme i gang

Lær deg Kotlin med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 36
Leksjoner: 152

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Navigation Component» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Android Academy, inkludert «Navigation Component», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Android Academy inneholder totalt 6 leksjoner.

Hva lærer jeg i «Navigation Component»?

Administrer navigasjon mellom flere skjermer med en visuell NavGraph, typesikre argumenter med Safe Args, NavController og støtte for deep links. Du øver på Android Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Android Academy?

Ingen tidligere erfaring er nødvendig. Android Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 5 av 6.

Hvor lang tid tar leksjonen «Navigation Component»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Android Academy-leksjonen?

Ja. Alle Android Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Android Academy