Push Presentation i mobil utveckling: vad är det, skärmstack

Vad är Push Presentation?

Push Presentation — är en navigeringsmekanism där varje ny skärm placeras överst i stacken, medan den föregående skärmen finns kvar i minnet under den. Användaren går djupare in i innehållet genom att sekventiellt öppna detaljerade skärmar, och bakåtknappen återför honom till föregående steg.

Arkitekturen för Push-navigering är baserad på datastrukturen LIFO (Last In, First Out). En ny skärm läggs alltid till i slutet av stacken och borttagning sker endast från toppen. Detta garanterar förutsägbart beteende: användaren vet alltid att bakåtknappen återför honom exakt ett steg tillbaka. Navigeringsstacken kan innehålla 2 till 10+ skärmar beroende på appens komplexitet.

Push Presentation är det primära mönstret i appar med hierarkiskt innehåll: nyhetsflöden, produktkataloger, flernivåmenyer och dokumentation. Enligt Material Design är stacknavigering lämplig för scenarier där användaren utforskar innehåll från allmänt till specifikt och varje efterföljande skärm fördjupar förståelsen av ämnet.

Navigeringsstack: funktionsprincip

Navigeringsstacken — är en ordnad uppsättning skärmar, där varje element lagrar tillståndet för sin ViewController eller Fragment. Under Push-operationen läggs en ny skärm till i stacken, dess visning animeras (slide från höger i iOS, slide från botten eller Fade i Android) och blir aktiv.

Under Pop-operationen (tryck på bakåt) tas den översta skärmen bort från stacken, förstörs eller går till minnet, och den föregående skärmen blir aktiv. iOS förstör som standard den poppade ViewController och frigör minne. Android kan bevara Fragment i back stack med möjlighet att återställa utan att återskapa.

Stackens djup påverkar prestanda: varje skärm i stacken förbrukar minne. Det rekommenderas att inte lagra mer än 10 skärmar i stacken. För djup navigering, använd PopToRoot eller omstart av stacken med en ny root-skärm. Navigation Component i Android hanterar automatiskt stackens tillstånd via SavedStateHandle.

Push-navigering i iOS: UINavigationController

UINavigationController — en behållarkontroller i iOS som hanterar stacken av UIViewController. Den visar automatiskt navigeringsfältet (navigation bar) med titeln på den aktuella skärmen och en bakåtknapp. Standard Push-animering — slide från höger till vänster, vilket skapar en känsla av fördjupning i innehållet hos användaren.

Stackhantering

Att lägga till en skärm görs via pushViewController(_:animated:). Borttagning — via popViewController(animated:). För att återgå till root-skärmen används popToRootViewController(animated:). UINavigationController stöder också programmatisk stackhantering via egenskapen viewControllers — en array av alla kontroller i stacken.

Navigation Bar och Large Titles

Navigeringsfältet innehåller skärmens titel (title), bakåtknapp och valfria åtgärdsknappar. Från och med iOS 11 möjliggör Large Titles (prefersLargeTitles) visning av titeln med förstorad text som animerat krymper vid scrollning. Detta förbättrar navigeringshierarkin och informerar användaren om den aktuella sektionen.

let detailVC = DetailViewController()
detailVC.title = "Item Details"
navigationController?.pushViewController(detailVC, animated: true)

// Återgå till föregående skärm
navigationController?.popViewController(animated: true)

// Återgå till root-skärm
navigationController?.popToRootViewController(animated: true)

Push-navigering i Android: Navigation Component

Navigation Component — ett Android Jetpack-bibliotek för deklarativ navigering. Det tillhandahåller NavController som hanterar fragment eller compose-skärmar via en navigeringsgraf (nav_graph). Push i Android är analogt med iOS: varje ny Fragment läggs till i back stack och bakåtknappen återställer den föregående.

NavHost och NavGraph

NavHost — en behållare som visar den aktuella destinationen från NavGraph. NavGraph — en XML-fil som beskriver alla skärmar i appen och kopplingarna mellan dem. Övergångar definieras via actions med angivande av destination och valfria argument. Navigation Component hanterar automatiskt systemets bakåtknapp, animeringar och tillståndssparande.

Argument och Safe Args

För dataöverföring mellan skärmar stöder Navigation Component Safe Args — kodgenerering av type-safe argumentklasser. Istället för att manuellt placera data i Bundle, deklarerar utvecklaren argument i NavGraph och tar emot dem via genererade Directions- och Args-klasser. Safe Args eliminerar typmatchningsfel och förenklar refaktorering.

// NavGraph-definition i XML
<!-- res/navigation/nav_graph.xml -->
@navigation {
    NavHost(startDestination = "list") {
        composable("list") { ListScreen() }
        composable(
            "detail/{itemId}",
            arguments = listOf(navArgument("itemId") { type = NavType.IntType })
        ) { DetailScreen(it.arguments()?.getInt("itemId") ?: 0) }
    }
}

// Programmatisk navigering
navController.navigate("detail/42")

BottomNavigation med Push-stack

Kombinationen av Bottom Navigation och Push-navigering — ett vanligt mönster i mobila appar. Varje flik i Bottom Navigation har sin egen skärmstack. Navigation Component stöder detta via NavHost per tab eller en enda NavHost med separata grafer för varje flik. Att växla flikar återställer inte tillståndet för Push-stackarna.

Push Presentation vs Modal Presentation

Push Presentation och Modal Presentation löser olika navigeringsuppgifter. Push är avsett för sekventiell visning av innehåll, där varje ny skärm fördjupar kontexten. Modal — för fokuserade uppgifter som kräver slutförande. I praktiken är det viktigt att välja rätt mönster för det specifika scenariot.

Huvudkriterier för val: om användaren ska kunna återvända fritt utan att förlora kontext — välj Push. Om uppgiften är tillfällig och blockerar huvudinnehållet (formulär, autentisering) — använd Modal. Blandning av mönster på samma skärm (Push inuti Modal) är tillåtet men kräver en tydlig visuell hierarki.

Det är ett misstag att använda Modal för skärmsekvenser som logiskt är en del av huvudflödet. Till exempel, orderns skapandeguide (Steg 1 → Steg 2 → Steg 3) implementeras bättre via Push inuti en modal behållare än via en kedja av modala fönster. Detta bevarar navigeringshierarkin och förutsägbarheten av återgång.

Implementeringsexempel i Swift och Kotlin

Låt oss titta på den fullständiga implementeringen av Push-navigering på båda plattformarna. Swift-exemplet demonstrerar UINavigationController med programmatisk stackhantering och bearbetning av djupa länkar. Kotlin-exemplet visar Navigation Component med NavHost, argument och animeringar.

class ListViewController: UIViewController {
    func showDetail(_ itemId: Int) {
        let storyboard = UIStoryboard(name: "Main", bundle: nil)
        let detailVC = storyboard.instantiateViewController(
            withIdentifier: "DetailViewController"
        ) as! DetailViewController
        detailVC.itemId = itemId
        navigationController?.pushViewController(detailVC, animated: true)
    }
}

class DetailViewController: UIViewController {
    var itemId: Int = 0

    override func viewDidLoad() {
        super.viewDidLoad()
        title = "Item #\(itemId)"
    }
}

@Composable
fun PushNavigationApp() {
    val navController = rememberNavController()

    NavHost(navController = navController, startDestination = "list") {
        composable("list") {
            ListScreen(
                onItemClick = { id -> navController.navigate("detail/$id") }
            )
        }
        composable(
            "detail/{itemId}",
            arguments = listOf(navArgument("itemId") { type = NavType.IntType })
        ) { backStackEntry ->
            val itemId = backStackEntry.arguments()?.getInt("itemId") ?: 0
            DetailScreen(itemId = itemId, onBack = { navController.popBackStack() })
        }
    }
}

Exemplen visar grundläggande Push-navigering: lista → detaljer. iOS använder storyboards och UINavigationController med manuell dataöverföring. Android använder NavHost med type-safe argument och automatisk back stack-hantering. Båda metoderna stöder djupa länkar, anpassade animeringar och tillståndssparande vid rotation.