Android Academy · Lekcja

Dolna nawigacja i karty

Zaimplementuj nawigację między sekcjami za pomocą BottomNavigationView połączonego z NavController oraz przesuwane karty z użyciem TabLayout, ViewPager2 i TabLayoutMediator.

Dolna nawigacja i karty to bezpłatna lekcja Android Academy na CoddyKit. To lekcja 5 z 5. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Android Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Android Academy zawiera 5 lekcji w sumie.

Wzorce nawigacji

Dwa popularne wzorce nawigacji najwyższego poziomu w aplikacjach Android:

Bottom Navigation — dla 3–5 głównych miejsc docelowych. Zawsze widoczna. Najlepsza w przypadku sekcji o równym znaczeniu (np. Strona główna, Wyszukiwanie, Profil).
Tabs — dla powiązanych treści w obrębie jednego ekranu (np. Wszystkie / Aktywne / Ukończone). Często używane z ViewPager2, aby umożliwić przesuwanie.

Układ BottomNavigationView

Dodaj BottomNavigationView i FragmentContainerView do układu Activity:

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

Elementy menu dolnej nawigacji

Zdefiniuj elementy w res/menu/bottom_nav_menu.xml. Identyfikator każdego elementu musi odpowiadać identyfikatorowi miejsca docelowego w grafie nawigacji:

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

Łączenie z NavController

Połącz BottomNavigationView z NavController w 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
            }
        }
    }
}

Plakietki w dolnej nawigacji

Wyświetlaj plakietki powiadomień przy elementach dolnej nawigacji:

// 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 wyświetla karty ułożone poziomo i jest zwykle używany z ViewPager2 do obsługi treści przewijanej gestem:

<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

Utwórz adapter, który udostępnia fragment dla każdej pozycji karty:

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

Połącz ViewPager2 i TabLayout za pomocą 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

Karta z ikonami

Dodaj ikony do kart 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()

Limit stron poza ekranem

Domyślnie ViewPager2 przechowuje w pamięci tylko sąsiednią stronę. Zwiększ wartość offscreenPageLimit, jeśli karty powinny pozostać aktywne podczas przełączania:

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

Dolna nawigacja a karty: wybór

Krótki przewodnik ułatwiający wybór właściwego wzorca:

Użyj dolnej nawigacji, gdy: masz 3–5 miejsc docelowych najwyższego poziomu o różnych zastosowaniach (Strona główna, Wyszukiwanie, Powiadomienia, Profil)
Użyj kart, gdy: filtrujesz lub kategoryzujesz treści tego samego typu (Wszystkie / Aktywne / Zarchiwizowane zadania)
Połącz oba rozwiązania: użyj dolnej nawigacji dla sekcji najwyższego poziomu, a kart wewnątrz sekcji do filtrowania podrzędnego

Szybki test

Która klasa łączy TabLayout z ViewPager2 i ustawia etykiety kart?

Podsumowanie: dolna nawigacja i karty

Wielosekcyjna nawigacja zrealizowana prawidłowo:

BottomNavigationView — 3–5 miejsc docelowych o równym znaczeniu; identyfikatory menu odpowiadają identyfikatorom miejsc docelowych w grafie nawigacji
setupWithNavController() — automatyczne przełączanie kart i obsługa stosu wstecz
Plakietki za pomocą getOrCreateBadge()
TabLayout + ViewPager2 — widoki tej samej treści, które można przełączać gestem i filtrować
TabLayoutMediator — łączy oba elementy i ustawia etykiety

Następnie: testy jednostkowe z JUnit, które pomogą zachować niezawodność kodu.

Często zadawane pytania

Czy lekcja „Dolna nawigacja i karty” jest bezpłatna?

Tak — pełny tekst „Dolna nawigacja i karty” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Android Academy, przejdź na CoddyKit PRO. Kurs Android Academy zawiera 5 lekcji w sumie.

Co nauczysz się w „Dolna nawigacja i karty”?

Zaimplementuj nawigację między sekcjami za pomocą BottomNavigationView połączonego z NavController oraz przesuwane karty z użyciem TabLayout, ViewPager2 i TabLayoutMediator. Ćwiczysz Android Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Android Academy?

Nie wymagamy żadnego doświadczenia. Android Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 5 z 5.

Ile czasu zajmuje lekcja „Dolna nawigacja i karty”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Android Academy?

Tak. Każda lekcja Android Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Android Academy