Push Presentation mobil ishlab chiqishda: bu nima, ekranlar steki

Push Presentation nima?

Push Presentation — bu navigatsiya mexanizmi bo‘lib, unda har bir yangi ekran stekning tepasiga joylashtiriladi, oldingi ekran esa uning ostida xotirada qoladi. Foydalanuvchi ketma-ket batafsil ekranlarni ochib kontentga chuqur kiradi va orqaga tugmasi uni oldingi bosqichga qaytaradi.

Push navigatsiyasi arxitekturasi LIFO (Last In, First Out) ma‘lumotlar tuzilmasiga asoslanadi. Yangi ekran har doim stekning oxiriga qo‘shiladi va o‘chirish faqat tepadan amalga oshiriladi. Bu bashorat qilinadigan xatti-harakatni kafolatlaydi: foydalanuvchi har doim biladi, orqaga tugmasi uni aniq bir qadam orqaga qaytaradi. Navigatsiya steki ilova murakkabligiga qarab 2 dan 10+ gacha ekranni o‘z ichiga olishi mumkin.

Push Presentation iyerarxik kontentli ilovalarda asosiy namunadir: yangiliklar lentalari, mahsulot kataloglari, ko‘p darajali menyular va hujjatlar. Material Design ga ko‘ra, stek navigatsiyasi foydalanuvchi kontentni umumiydan xususiyga o‘rganadigan stsenariylar uchun mos keladi, har bir keyingi ekran mavzuni chuqurroq tushunishga yordam beradi.

Navigatsiya steki: ishlash prinsipi

Navigatsiya steki — bu har bir element o‘z ViewController yoki Fragment holatini saqlaydigan tartiblangan ekranlar to‘plamidir. Push operatsiyasi vaqtida yangi ekran stekga qo‘shiladi, uning ko‘rinishi animatsiya qilinadi (iOS-da o‘ngdan siljitish, Android-da pastdan siljitish yoki Fade) va faol holatga o‘tadi.

Pop operatsiyasi (orqaga bosish) vaqtida yuqori ekran stekdan o‘chiriladi, yo‘q qilinadi yoki xotiraga o‘tadi, oldingi ekran esa faol bo‘ladi. iOS sukut bo‘yicha popped ViewController-ni yo‘q qilib, xotirani bo‘shatadi. Android Fragment-ni back stack-da qayta yaratmasdan tiklash imkoniyati bilan saqlashi mumkin.

Stek chuqurligi unumdorlikka ta‘sir qiladi: stekdagi har bir ekran xotirani iste‘mol qiladi. Tavsiya etiladi stekda 10 tadan ortiq ekran saqlamaslik. Chuqur navigatsiya uchun PopToRoot yoki yangi ildiz ekrani bilan stekni qayta ishga tushirishdan foydalaning. Android-da Navigation Component SavedStateHandle orqali stek holatini avtomatik boshqaradi.

iOS-da Push navigatsiyasi: UINavigationController

UINavigationController — iOS konteyner kontrolleri, UIViewController stekini boshqaradi. U avtomatik ravishda joriy ekran sarlavhasi va orqaga qaytish tugmasi bilan navigatsiya panelini (navigation bar) ko‘rsatadi. Sukut bo‘yicha Push animatsiyasi — o‘ngdan chapga siljitish, foydalanuvchida kontentga kirib borish hissini yaratadi.

Stekni boshqarish

Ekran qo‘shish pushViewController(_:animated:) orqali amalga oshiriladi. O‘chirish — popViewController(animated:) orqali. Ildiz ekranga qaytish uchun popToRootViewController(animated:) ishlatiladi. UINavigationController shuningdek viewControllers xususiyati — stekdagi barcha kontrollerlar massivi orqali stekni dasturiy boshqarishni qo‘llab-quvvatlaydi.

Navigation Bar va Large Titles

Navigatsiya paneli ekran sarlavhasini (title), orqaga qaytish tugmasini va ixtiyoriy amal tugmalarini o‘z ichiga oladi. iOS 11 dan boshlab Large Titles (prefersLargeTitles) sarlavhani kattalashtirilgan shrift bilan ko‘rsatishga imkon beradi, bu aylantirish vaqtida animatsiya bilan kichiklashadi. Bu navigatsiya iyerarxiyasini yaxshilaydi va foydalanuvchini joriy bo‘lim haqida xabardor qiladi.

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

// Oldingi ekranga qaytish
navigationController?.popViewController(animated: true)

// Ildiz ekranga qaytish
navigationController?.popToRootViewController(animated: true)

Android-da Push navigatsiyasi: Navigation Component

Navigation Component — deklarativ navigatsiya uchun Android Jetpack kutubxonasi. U navigatsiya grafi (nav_graph) orqali fragmentlar yoki compose ekranlarini boshqaradigan NavController ni taqdim etadi. Android-da Push iOS-ga o‘xshaydi: har bir yangi Fragment back stack-ga qo‘shiladi va orqaga tugmasi oldingisini tiklaydi.

NavHost va NavGraph

NavHost — NavGraph-dan joriy manzilni ko‘rsatadigan konteyner. NavGraph — ilovaning barcha ekranlari va ular orasidagi bog‘lanishlarni tavsiflovchi XML fayl. O‘tishlar actions orqali destination va ixtiyoriy argumentlar bilan belgilanadi. Navigation Component avtomatik ravishda tizim orqaga tugmasini, animatsiyalarni va holatni saqlashni boshqaradi.

Argumentlar va Safe Args

Ekranlar o‘rtasida ma‘lumot uzatish uchun Navigation Component Safe Args — type-safe argument sinflarining kod generatsiyasini qo‘llab-quvvatlaydi. Ma‘lumotni qo‘lda Bundle-ga joylashtirish o‘rniga, dasturchi NavGraph-da argumentlarni e‘lon qiladi va ularni yaratilgan Directions va Args sinflari orqali oladi. Safe Args tur nomuvofiqligi xatolarini bartaraf qiladi va refaktoringni soddalashtiradi.

// NavGraph-ni XML-da aniqlash
<!-- 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) }
    }
}

// Dasturiy navigatsiya
navController.navigate("detail/42")

BottomNavigation Push steki bilan

Bottom Navigation va Push navigatsiyasining kombinatsiyasi — mobil ilovalarda keng tarqalgan namuna. Bottom Navigation-ning har bir yorlig‘i o‘z ekran stekiga ega. Navigation Component buni NavHost per tab yoki har bir yorliq uchun alohida graflar bilan yagona NavHost orqali qo‘llab-quvvatlaydi. Yorliqlarni almashtirish Push steklari holatini tiklamaydi.

Push Presentation vs Modal Presentation

Push Presentation va Modal Presentation navigatsiyaning turli vazifalarini hal qiladi. Push ketma-ket kontent ko‘rish uchun mo‘ljallangan, bu erda har bir yangi ekran kontekstni chuqurlashtiradi. Modal — yakunlashni talab qiladigan fokus vazifalari uchun. Amalda muayyan stsenariy uchun to‘g‘ri namunani tanlash muhim.

Asosiy tanlash mezonlari: agar foydalanuvchi kontekstni yo‘qotmasdan erkin orqaga qaytishi kerak bo‘lsa — Push-ni tanlang. Agar vazifa vaqtinchalik bo‘lib, asosiy kontentni bloklasa (forma, avtorizatsiya) — Modal-dan foydalaning. Bir ekranda namunalarni aralashtirish (Modal ichida Push) joiz, lekin aniq vizual ierarxiyani talab qiladi.

Asosiy oqimning mantiqiy qismi bo‘lgan ekranlar ketma-ketligi uchun Modal ishlatish xato. Masalan, buyurtma yaratish ustasi (1-qadam → 2-qadam → 3-qadam) modal oynalar zanjiri o‘rniga modal konteyner ichida Push orqali amalga oshirilishi yaxshiroq. Bu navigatsiya ierarxiyasini va qaytishning bashorat qilinishini saqlaydi.

Swift va Kotlin-da qo‘llash misollari

Ikkala platformada Push navigatsiyasining to‘liq amalga oshirilishini ko‘rib chiqaylik. Swift misoli dasturiy stek boshqaruvi va chuqur havolalarni qayta ishlash bilan UINavigationController-ni namoyish etadi. Kotlin misoli NavHost, argumentlar va animatsiyalar bilan Navigation Component-ni ko‘rsatadi.

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

Misollar asosiy Push navigatsiyasini ko‘rsatadi: ro‘yxat → tafsilotlar. iOS storyboardlar va qo‘lda ma‘lumot uzatish bilan UINavigationController-dan foydalanadi. Android type-safe argumentlar va avtomatik back stack boshqaruvi bilan NavHost-dan foydalanadi. Ikkala yondashuv chuqur havolalarni, moslashtirilgan animatsiyalarni va aylantirishda holatni saqlashni qo‘llab-quvvatlaydi.