Architektura obrazovek a navigace v mobilním vývoji: co to je, typy a jak to funguje

Co je architektura obrazovek a navigace

Architektura obrazovek a navigace je rámec mobilní aplikace, který definuje dostupné obrazovky a způsoby pohybu mezi nimi. Každá obrazovka řeší konkrétní úkol: seznam produktů, karta produktu, košík nebo platební formulář. Podle Apple Human Interface Guidelines (2025) promyšlená navigace snižuje kognitivní zátěž uživatele o 40 %. Začínající vývojáři by měli začít s jednoduchým schématem tří až pěti obrazovek.

Z čeho se skládá architektura obrazovek

Každá architektura obrazovek zahrnuje tři základní prvky: obrazovky, přechody a kontejnery navigace. Obrazovky zobrazují obsah, přechody spravují animace změny obrazovky a kontejnery ukládají historii pohybů uživatele. Na Androidu tuto roli hraje FragmentManager, na iOS — UINavigationController. Porozumění těmto třem komponentám je prvním krokem k navrhování uživatelsky přívětivého rozhraní.

Hlavní typy navigace v mobilních aplikacích

V mobilních aplikacích existují čtyři hlavní typy navigace: zásobníková, modální, záložková a gestická. Zásobníkový model funguje jako hromada karet — každá nová obrazovka se položí navrch a tlačítko "Zpět" odstraní horní kartu. Podle Nielsen Norman Group (2024) je zásobníková navigace nejpředvídatelnější vzor, srozumitelný 94 % uživatelů bez školení. Začít se zásobníkem se doporučuje, protože je intuitivně jasný uživatelům jakékoli platformy.

Kdy používat modální okna

Modální okna jsou dočasné obrazovky, které vyžadují akci před návratem k hlavnímu obsahu. Používají se pro jeden úkol: potvrzení akce, přihlašovací formulář nebo výběr možnosti. Na rozdíl od zásobníku se modální okno neukládá do historie navigace. Typ navigace se volí na základě případů použití aplikace.

Navigace na iOS s UINavigationController

Na iOS je navigace postavena kolem UINavigationController — kontroléru, který spravuje zásobník obrazovek. UINavigationController automaticky přidává navigační lištu s názvem a tlačítkem "Zpět". Podle Apple Developer Documentation (2025) používá 85 % aplikací v App Store UINavigationController jako hlavní navigační vzor. Začínající iOS vývojáři potřebují zvládnout pouze push a pop v kombinaci se základy UX/UI designu.

Jak funguje zásobník obrazovek v iOS

Při push přechodu je nová obrazovka umístěna do navigačního zásobníku a uživatel vidí animaci zasouvání zprava. Při pop přechodu je aktuální obrazovka odstraněna ze zásobníku a uživatel se vrací k předchozí. UINavigationController ukládá odkazy na všechny obrazovky v zásobníku, což uživateli umožňuje vrátit se o několik kroků zpět. V IT Sectr používáme tento přístup ve všech iOS projektech pro vytváření lineárních uživatelských scénářů.

Jak funguje navigace na Androidu

Na Androidu je architektura obrazovek implementována prostřednictvím Navigation Component — knihovny od Google pro vytváření navigace. Navigation Component používá navigační graf (nav graph), kde každá obrazovka je uzel a přechody jsou hrany mezi nimi. Podle Android Developers Guide (2025) Navigation Component snižuje navigační chyby o 60 % ve srovnání s ručním FragmentManager. Začínajícím Android vývojářům se doporučuje okamžitě zvládnout Navigation Component.

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

// V nav_graph.xml:
<!-- 
  <fragment android:id="@+id/homeFragment"
    android:name=".HomeFragment" />
  <fragment android:id="@+id/detailFragment"
    android:name=".DetailFragment" />
  <action android:id="@+id/toDetail"
    app:destination="@id/detailFragment" />
-->

// Navigace po kliknutí na tlačítko:
view.findViewById<Button>(R.id.open_detail).setOnClickListener {
    findNavController().navigate(R.id.toDetail)
}

FragmentManager a jeho role

Před Navigation Component vývojáři spravovali přechody pomocí FragmentManager — systémové třídy pro nahrazování fragmentů. FragmentManager pracuje s transakcemi: replace, add, remove pro změnu fragmentů na obrazovce. Vyžaduje však ruční správu zásobníku a stavů, což často vede k chybám. Google oficiálně doporučuje Navigation Component jako bezpečnější alternativu k ručnímu FragmentManager.

Časté chyby začátečníků v architektuře obrazovek

Začínající vývojáři často dělají typické chyby při navrhování architektury obrazovek. Nejčastější je absence jediného centra řízení navigace, když jsou přechody rozptýleny po celém kódu. Podle analýzy Google Play Console (2025) mají aplikace s chaotickou navigací o 37 % více hlášení pádů souvisejících s přechody. Jediný směrovač nebo navigační graf tento problém řeší.

Ignorování tlačítka "Zpět"

Mnoho začátečníků zapomíná zpracovat systémové tlačítko "Zpět" na Androidu nebo gesto přejetí na iOS. Neošetřený návrat vede k zamrznutí aplikace nebo neočekávanému ukončení. Na Androidu Navigation Component zpracovává tlačítko "Zpět" automaticky, pokud je navigační graf nakonfigurován. Níže je příklad zpracování tlačítka "Zpět" pomocí OnBackPressedDispatcher.

class MyFragment : Fragment() {
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        val callback = OnBackPressedCallback(true) {
            if (isSheetExpanded) {
                collapseSheet()
                isEnabled = false
            } else {
                isEnabled = false
                requireActivity().onBackPressedDispatcher.onBackPressed()
            }
        }
        requireActivity().onBackPressedDispatcher.addCallback(
            viewLifecycleOwner, callback
        )
    }
}

Kód kontroluje, zda je panel Bottom Sheet rozbalen: pokud ano — sbalí jej, pokud ne — předá událost systémovému dispečerovi. Toto je standardní vzor pro vlastní zpracování "zpět" v Androidu.