Published on: Monday, February 9, 2026

TabView

Authors

Name
ShoxruxC
@iOSdasturchi

Tab bar navigatsiyasi — iOS-da eng taniqli patternlardan biri. Instagram, App Store yoki Soat ilovasini ishlatgan bo'lsangiz, tab bar-dan foydalangansiz. Ekranning pastidagi ilovaning to'liq mustaqil bo'limlariga o'tish imkonini beruvchi ushbu ikonkalar — TabView.

TabView uchun asosiy mental model: har bir tab — mustaqil bo'lim. Ekranlar ustma-ust qo'yiladigan push navigatsiyadan farqli ravishda, tablar yonma-yon joylashadi. Har bir tab o'z navigatsiya holatiga ega — bir tabda push stack-da chuqur bo'lishingiz mumkin, bu boshqa tabda nima bo'layotganiga ta'sir qilmaydi.

Oddiy tab bar sozlash faqat bir necha satr koddan iborat: viewlaringizni TabView-ga o'rang va har biriga ikonkasi va yorlig'ini tavsiflovchi .tabItem modifikatorini bering.

Swift•

ContentView.swift

import SwiftUI

struct ContentView: View {
var body: some View {
// TabView konteyner — har bir to'g'ridan-to'g'ri child tab bo'ladi
TabView {
// Har bir view-ga ikonka va yorliq belgilovchi .tabItem qo'shiladi
BoshSahifaView()
.tabItem {
Label("Bosh sahifa", systemImage: "house.fill")
}

          QidiruvView()
              .tabItem {
                  Label("Qidiruv", systemImage: "magnifyingglass")
              }

          ProfilView()
              .tabItem {
                  Label("Profil", systemImage: "person.fill")
              }
      }
  }

}

struct BoshSahifaView: View {
var body: some View {
// Har bir tab mustaqil navigatsiya uchun o'z NavigationStack-iga ega
NavigationStack {
Text("Bosh sahifa")
.navigationTitle("Bosh sahifa")
}
}
}

struct QidiruvView: View {
var body: some View {
NavigationStack {
Text("Qidiruv")
.navigationTitle("Qidiruv")
}
}
}

struct ProfilView: View {
var body: some View {
NavigationStack {
Text("Profil")
.navigationTitle("Profil")
}
}
}

TabView sozlamalari

.tag() + selection

// @State o'zgaruvchisi joriy faol tabni kuzatadi
@State private var selectedTab = 0

// TabView tanlangan tabni o'qib yoza olsin uchun binding beramiz
TabView(selection: $selectedTab) {
    BoshSahifaView()
        .tabItem { Label("Bosh sahifa", systemImage: "house") }
        // .tag() identifikator belgilaydi — selectedTab turi bilan mos bo'lishi kerak
        .tag(0)
    ProfilView()
        .tabItem { Label("Profil", systemImage: "person") }
        .tag(1)
}

// Koddan Profil tabiga o'tish
Button("Profilga o'tish") {
    selectedTab = 1
}

Tag va selection binding qo'shilgandan keyin tablarni koddan almashtirish mumkin — ilovaning bir qismidagi tugma foydalanuvchini boshqa tabga o'tkazishi kerak bo'lganda foydali. @State o'zgaruvchisi har doim qaysi tab faol ekanini bildiradi.

.badge()

XabarlarView()
    .tabItem {
        Label("Xabarlar", systemImage: "envelope")
    }
    // Raqamli qizil belgi ko'rsatadi — ma'lumot modelingizdan oling
    .badge(3)

Mail yoki Messages ilovasiga o'xshash kichik qizil bildirishnoma belgisi qo'shadi. Sanoq uchun butun son bering, yoki 0 bering — yashirish uchun. Haqiqiy ilovada raqamni hardcode qilish o'rniga ma'lumot modelingizdan computed property ishlating.

.tint()

TabView {
    // tablar shu yerda
}
// Tanlangan tab rangini o'zgartirish uchun TabView-ga .tint qo'llang
.tint(.orange)

Tanlangan tab ikonkasi va yorliq odatda ko'k bo'ladi. Ilovangizning brend rangi bilan moslashtirish uchun TabView o'ziga .tint() qo'llang. iOS 16+. Eski deployment target uchun .accentColor() ishlating.

Keng tarqalgan xato: Biror tabga .tabItem modifikatorini qo'yishni unutish. Usiz u tab panelda bo'sh ko'rinadi — belgi ham yo'q, yozuv ham yo'q. SwiftUI ogohlantirmaydi. Har bir TabView ichidagi view o'zining .tabItemiga ega bo'lishi kerak.

Tezkor ma'lumotnoma

Modifikator	Nima qiladi
`.tabItem { Label("Sarlavha", systemImage: "ikon") }`	Shart — har bir tab uchun tab bar ikonka va yorlig'ini belgilaydi
`.tag(qiymat)`	Dasturiy almashtirish uchun tabga identifikator belgilaydi
`TabView(selection: $selectedTab)`	@State o'zgaruvchisini faol tabga bog'laydi
`.badge(sanoq)`	Tab ikonkasida qizil sanoq belgi ko'rsatadi
`.tint(.rang)`	Tanlangan tabning ajratish rangini o'zgartiradi

Topshiriq: 3 tabli ilova

3 tabli ilova yarating: Bosh sahifa, Sevimlilar va Profil. Har bir tabga o'z NavigationStack-ini bering. Sevimlilar tabiga 5 badge qo'shing. Bosh sahifa tabida @State selection binding va .tag() yordamida dasturiy tarzda Profil tabiga o'tadigan tugma qo'shing. Simulyatorda sinab ko'ring.