Android Academy · Lektion

Bottennavigering och flikar

Implementera navigering mellan flera sektioner med BottomNavigationView kopplad till NavController samt svepbara flikar med TabLayout, ViewPager2 och TabLayoutMediator.

Lektion 5 av 513 steg

Bottennavigering och flikar är en gratis lektion i Android Academy på CoddyKit. Detta är lektion 5 av 5. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Android Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Android Academy innehåller totalt 5 lektioner.

Navigeringsmönster

Två vanliga mönster för navigering på toppnivå i Android-appar:

Nederkantsnavigering — för 3–5 primära destinationer. Alltid synlig. Passar bäst för sektioner med samma vikt (t.ex. Hem, Sök, Profil).
Flikar — för relaterat innehåll på en skärm (t.ex. Alla / Aktiva / Klara). Används ofta med ViewPager2 för stöd för svepning.

Layout för BottomNavigationView

Lägg till BottomNavigationView och en FragmentContainerView i Activity-layouten:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/navHostFragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        app:navGraph="@navigation/nav_graph"
        app:defaultNavHost="true" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_nav_menu" />

</LinearLayout>

Menyalternativ i nederkantsnavigeringen

Definiera alternativ i res/menu/bottom_nav_menu.xml. ID:t för varje alternativ måste motsvara ID:t för en destination i navigeringsgrafen:

<!-- res/menu/bottom_nav_menu.xml -->
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/homeFragment"
        android:icon="@drawable/ic_home"
        android:title="Home" />
    <item
        android:id="@+id/searchFragment"
        android:icon="@drawable/ic_search"
        android:title="Search" />
    <item
        android:id="@+id/profileFragment"
        android:icon="@drawable/ic_person"
        android:title="Profile" />
</menu>

Ansluta till NavController

Koppla BottomNavigationView till NavController i onCreate():

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

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

        binding.bottomNav.setupWithNavController(navController)

        // Hide bottom nav on detail screens:
        navController.addOnDestinationChangedListener { _, destination, _ ->
            binding.bottomNav.visibility = when (destination.id) {
                R.id.detailFragment -> View.GONE
                else -> View.VISIBLE
            }
        }
    }
}

Märken i nederkantsnavigeringen

Visa aviseringsmärken på alternativ i nederkantsnavigeringen:

// Show a numbered badge:
val badge = binding.bottomNav.getOrCreateBadge(R.id.homeFragment)
badge.number = 5
badge.isVisible = true

// Show dot badge (no number):
val dotBadge = binding.bottomNav.getOrCreateBadge(R.id.searchFragment)
dotBadge.isVisible = true

// Remove badge:
binding.bottomNav.removeBadge(R.id.homeFragment)

TabLayout

TabLayout visar horisontella flikar och används vanligtvis med ViewPager2 för innehåll som kan svepas:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>

ViewPager2 + FragmentStateAdapter

Skapa en adapter som tillhandahåller ett fragment för varje flikposition:

class TasksPagerAdapter(fragment: Fragment) : FragmentStateAdapter(fragment) {

    override fun getItemCount() = 3

    override fun createFragment(position: Int): Fragment = when (position) {
        0 -> AllTasksFragment()
        1 -> ActiveTasksFragment()
        2 -> CompletedTasksFragment()
        else -> throw IllegalStateException("Unknown tab $position")
    }
}

TabLayoutMediator

Anslut ViewPager2 och TabLayout med TabLayoutMediator:

// In Fragment.onViewCreated():
val adapter = TasksPagerAdapter(this)
binding.viewPager.adapter = adapter

TabLayoutMediator(binding.tabLayout, binding.viewPager) { tab, position ->
    tab.text = when (position) {
        0 -> "All"
        1 -> "Active"
        2 -> "Done"
        else -> ""
    }
}.attach()

// Disable swipe if needed:
binding.viewPager.isUserInputEnabled = false

Flik med ikoner

Lägg till ikoner på flikarna i TabLayout:

TabLayoutMediator(binding.tabLayout, binding.viewPager) { tab, position ->
    when (position) {
        0 -> {
            tab.text = "Home"
            tab.setIcon(R.drawable.ic_home)
        }
        1 -> {
            tab.text = "Search"
            tab.setIcon(R.drawable.ic_search)
        }
        2 -> {
            tab.text = "Profile"
            tab.setIcon(R.drawable.ic_person)
        }
    }
}.attach()

Gräns för sidor utanför skärmen

Som standard behåller ViewPager2 endast den intilliggande sidan i minnet. Öka offscreenPageLimit om flikarna ska fortsätta vara aktiva när användaren byter flik:

// Keep 2 pages on each side alive:
binding.viewPager.offscreenPageLimit = 2

// Note: FragmentStateAdapter saves and restores state for off-screen
// fragments even when offscreenPageLimit is 1 (default).
// Only increase this when you need views (not just state) to survive.

Nederkantsnavigering eller flikar: välj rätt

Snabbguide för att välja rätt mönster:

Använd nederkantsnavigering när: 3–5 destinationer på toppnivå har olika syften (Hem, Sök, Aviseringar, Profil)
Använd flikar när: samma typ av innehåll filtreras eller kategoriseras (Alla / Aktiva / Arkiverade uppgifter)
Kombinera båda: nederkantsnavigering för sektioner på toppnivå och flikar i en sektion för underfiltrering

Snabbkontroll

Vilken klass ansluter en TabLayout till en ViewPager2 och anger flikarnas etiketter?

Besvara frågan i den interaktiva lektionen

Sammanfattning: nederkantsnavigering och flikar

Navigering mellan flera sektioner, på rätt sätt:

BottomNavigationView — 3–5 destinationer med samma vikt; meny-ID:n motsvarar destinationernas ID:n i navigeringsgrafen
setupWithNavController() — automatiskt flikbyte och bakåtstack
Märken med getOrCreateBadge()
TabLayout + ViewPager2 — vyer av samma innehåll som kan svepas och filtreras
TabLayoutMediator — ansluter de två och anger etiketterna

Nästa avsnitt: enhetstestning med JUnit för att hålla koden tillförlitlig.

Gratis att börja

Lär dig Kotlin med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 36
Lektioner: 152

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Bottennavigering och flikar” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Android Academy, inklusive ”Bottennavigering och flikar”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Android Academy innehåller totalt 5 lektioner.

Vad lär jag mig i ”Bottennavigering och flikar”?

Implementera navigering mellan flera sektioner med BottomNavigationView kopplad till NavController samt svepbara flikar med TabLayout, ViewPager2 och TabLayoutMediator. Ni övar på Android Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Android Academy?

Du behöver inga förkunskaper. Utbildningen i Android Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 5 av 5.

Hur lång tid tar lektionen ”Bottennavigering och flikar”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Android Academy-lektionen?

Ja. Varje Android Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Android Academy