Android Academy · Oppitunti

Navigation Component

Hallinnoikaa usean näytön navigointia visuaalisen NavGraphin, tyyppiturvallisten argumenttien Safe Argsin, NavControllerin ja deep link -tuen avulla.

Oppitunti 5/613 vaihetta

Navigation Component on ilmainen Android Academy-oppitunti CoddyKitissä. Tämä on oppitunti 5/6. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Android Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Android Academy-kurssilla on yhteensä 6 oppituntia.

Mikä on Navigation Component?

Navigation Component on Android Jetpack -kirjasto, joka hallitsee fragmenttien navigointia, paluupinoa, syvälinkkejä ja siirtymäanimaatioita yhdessä visuaalisessa kaaviossa.

Keskeiset hyödyt:

Visuaalinen navigointikaavio Android Studiossa
Tyypitysturvallinen argumenttien välitys (Safe Args)
Automaattinen paluupinon hallinta
Valmis tuki syvälinkeille

Käyttöönotto: riippuvuudet

Lisää seuraava riippuvuus tiedostoon 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'
}

Navigointikaavio (nav_graph.xml)

Luo tiedosto res/navigation/nav_graph.xml. Se määrittää kohteet (fragmentit) ja toiminnot (navigointipolut):

<!-- 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 Activityn asettelussa

Korvaa FrameLayout-säilö NavHostFragment-komponentilla. Se toimii kaikkien navigointikohteiden isäntänä:

<!-- 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 — fragmenttien välillä navigointi

Hae NavController ja kutsu navigate()-metodia toiminnon tunnisteella:

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 — tyypitysturvalliset argumentit

Safe Args luo luokat argumenttien välittämiseen fragmenttien välillä ilman tyyppimuunnoksia tai avainten kirjoitusvirheitä:

// 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)
    }
}

Ylöspäin navigointi

Yhdistä työkalupalkin ylös-painike NavControlleriin, jotta paluu taaksepäin toimii automaattisesti:

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()
    }
}

Alapalkkinavigointi NavControllerilla

Yhdistä BottomNavigationView NavControlleriin — se käsittelee välilehtien valinnan ja paluupinon automaattisesti:

// 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

Paluupinon purkaminen

Navigoi ohjelmallisesti takaisin tai tiettyyn kohteeseen:

// 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()
)

Syvälinkit

Lisää kohteeseen syvälinkki, jotta sovellus voidaan avata URL-osoitteesta:

<!-- 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>

Fragmenttien väliset siirtymät

Lisää mukautettuja animaatioita navigointikaavion navigointitoimintoihin:

<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" />

Pikakertaus

Minkä tunnisteen on vastattava BottomNavigationView-valikkokohteen ja navigointikaavion välillä, jotta välilehtien automaattinen käsittely toimii?

Vastaa interaktiivisessa oppitunnissa

Kertaus: Navigation Component

Navigation Component helpottaa usean näkymän sovellusten toteuttamista:

Visuaalinen nav_graph.xml — kohteet ja toiminnot
NavHostFragment Activityn asettelussa
findNavController().navigate(actionId) siirtymiseen näyttöjen välillä
Safe Args — tyypitysturvallinen argumenttien välitys (ei tyyppimuunnoksia eikä kirjoitusvirheitä)
setupActionBarWithNavController() — automaattinen ylös-painike
setupWithNavController() — automaattinen BottomNavigationView

Seuraavaksi: lisää riippuvuuksien injektointi Hiltillä puhtaan arkkitehtuurin saavuttamiseksi.

Aloita maksutta

Opi Kotlin tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 36
Oppitunnit: 152

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Navigation Component” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Android Academy-oppimispolun 3 oppituntia, myös oppitunnin “Navigation Component”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Android Academy-kurssilla on yhteensä 6 oppituntia.

Mitä opin oppitunnilla ”Navigation Component”?

Hallinnoikaa usean näytön navigointia visuaalisen NavGraphin, tyyppiturvallisten argumenttien Safe Argsin, NavControllerin ja deep link -tuen avulla. Harjoittelet Android Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Android Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Android Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 5/6.

Kuinka kauan ”Navigation Component”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Android Academy-oppitunnilla?

Kyllä. Jokainen Android Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Android Academy