Published on: Tuesday, February 3, 2026

ViewThatFits

Authors

Name
ShoxruxC
@iOSdasturchi

Ba'zan katta ekranda to'liq, keng layoutni va kichik ekranda ixcham versiyani ko'rsatish kerak bo'ladi — murakkab shartli mantiq yozmasdan. ViewThatFits bu qarorni SwiftUI-ga yuklatish imkonini beradi.

Siz bir nechta muqobil view-larni afzallik tartibida berasiz. SwiftUI birinchisini mavjud joyga sig'tirishga harakat qiladi. Sig'masa, keyingisini sinaydi. Birinchi sig'ganini ishlatadi. Hech biri sig'masa, oxirgi variantni qo'llaydi. Bu ro'yxatni eng rasmiydan eng oddiyga qadar berish kabi tasavvur qiling — birinchi imkon beriladigan variantni kiy.

ViewThatFits keng ekranda gorizontal va tor ekranda vertikal bo'lishi kerak bo'lgan tugmalar qatori uchun, yoki katta qurilmalarda to'liq matnni ko'rsatib, kichikda qisqaroq versiyani ishlatish uchun ayniqsa foydali.

Swift•

ContentView.swift

import SwiftUI

struct ContentView: View {
var body: some View {
// ViewThatFits har bir variantni tartib bo'yicha sinaydi va birinchi sig'ganini ko'rsatadi
ViewThatFits {

          // Afzal: keng konteynerlar uchun gorizontal layout
          HStack(spacing: 12) {
              Button("Qoralamani saqlash") { }.buttonStyle(.bordered)
              Button("Ko'rinishi") { }.buttonStyle(.bordered)
              Button("Nashr etish") { }.buttonStyle(.borderedProminent)
          }

          // Zaxira: tor konteynerlar uchun vertikal layout
          VStack(spacing: 10) {
              Button("Qoralamani saqlash") { }
                  .buttonStyle(.bordered)
                  .frame(maxWidth: .infinity)
              Button("Ko'rinishi") { }
                  .buttonStyle(.bordered)
                  .frame(maxWidth: .infinity)
              Button("Nashr etish") { }
                  .buttonStyle(.borderedProminent)
                  .frame(maxWidth: .infinity)
          }
      }
      .padding()
  }

}

ViewThatFits variantlari

In: .horizontal — faqat gorizontal sig'ishni tekshirish

// Faqat view-lar gorizontal sig'adimi deb tekshiradi — balandlikni e'tiborsiz qoldiradi
ViewThatFits(in: .horizontal) {
    Text("CodeWithChris bilan boshlang").font(.title)
    Text("Boshlang").font(.title)
    Text("Start").font(.title)
}

Odatda ViewThatFits ikkala o'lchamni ham tekshiradi. in: .horizontal ni uzatish faqat gorizontal sig'ishni baholashga majbur qiladi — matn qisqartirish uchun foydali, chunki eng sig'adigan uzun satrni topishingiz kerak.

In: .vertical — faqat vertikal sig'ishni tekshirish

// Faqat balandlik sig'ishini tekshiradi — qat'iy balandlikdagi konteyner ichidagi kontent uchun foydali
ViewThatFits(in: .vertical) {
    // To'liq batafsil layout
    DetailedInfoView()
    // Vertikal joy yetarli bo'lmasa ixcham layout ishlatiladi
    CompactInfoView()
}

Muammo balandlik bo'lganda in: .vertical ni ishlatilsin — masalan, ideal uzun layoutga mos bo'lmasligi mumkin bo'lgan varaq (sheet) yoki qat'iy balandlikdagi konteyner ichida.

Tezkor ma'lumotnoma

Foydalanish	Nima qiladi
`ViewThatFits { }`	Birinchi sig'adigan view-ni topish uchun ikkala kenglik va balandlikni tekshiradi
`ViewThatFits(in: .horizontal)`	Faqat gorizontal sig'ishni tekshiradi — balandlikni e'tiborsiz qoldiradi
`ViewThatFits(in: .vertical)`	Faqat vertikal sig'ishni tekshiradi — kenglikni e'tiborsiz qoldiradi
Birinchi bola	Eng afzal / keng layout — sig'sa ko'rsatiladi
Oxirgi bola	Zaxira — hech narsa sig'masa har doim ishlatiladi

Stage 3 xulosasi: layout chuqurroq

Endi view-laringizni qanday o'lchamlash, oralatirish va joylashtirish ustida aniq nazoratga egasiz. Bu bosqichda yettita dars davomida o'rgangan narsalaringiz:

Spacer va Divider — View-larni itarish uchun Spacer, yupqa ajratgich uchun Divider. Spacer VStack va HStack ichida har xil ishlaydi — u har doim stack yo'nalishida kengayadi.

frame(), padding(), offset() — frame() view o'lchamini belgilaydi, padding() atrofiga joy qo'shadi va offset() view-ni vizual siljitadi, atrofdagi view-larning layoutiga ta'sir qilmasdan. To'liq kenglikdagi view uchun maxWidth: .infinity ishlatilsin.

GeometryReader — GeometryReader konteynerning haqiqiy o'lchamini beradi — proportsional o'lchamlash uchun foydali, lekin oxirgi chora. Ko'pchilik o'lchamlash muammolari frame() yoki Spacer yordamida yaxshiroq hal qilinadi.

LazyVStack va LazyHStack — Dangasa stack-lar bola view-larni faqat ko'rinib qolayotganda yaratadi. Kontent ro'yxati katta yoki dinamik bo'lganda ScrollView ichida ularni ishlating. Kichik, qat'iy ro'yxatlar uchun oddiy VStack soddaroq.

Grid va LazyVGrid — LazyVGrid GridItem ustunlaridan foydalanib grid layoutlar yaratadi. Flexible ustunlar joyni teng taqsimlaydi, fixed ustunlar aniq o'lchamda, adaptive ustunlar esa har qanday ekran kengligiga maksimal ustunlar sig'diradi.

Safe Area va ignoresSafeArea() — SwiftUI Dynamic Island va home indicator dan uzoqda tarkibni saqlash uchun safe area-ni hurmat qiladi. Fon va rasmlar uchun .ignoresSafeArea() ni ataylab, tarkibni yashirmaydigan suzib yuruvchi overlaylar uchun .safeAreaInset() ni ishlating.

ViewThatFits — SwiftUI-ga afzallik tartibida bir nechta layout muqobilini bering va u mavjud joyga birinchi sig'ganini ishlatadi. Shartli mantiqsiz responsive layoutlar uchun ideal.

Agar topshiriqlardan birortasini o'tkazib yuborgan bo'lsangiz, qaytib bajaring. Layout tushunchalarini o'zlashtirishning eng yaxshi usuli — canvas-da biror narsa yaratib, vizual tekshirish. Hech qanday darslik buni o'rnini bosa olmaydi.

Keyingi bosqichda siz Navigatsiya ni o'rganasiz — view-larni stack-ga surish, varaqlar va ogohlantirishlar ko'rsatish va har bir real ilovaga kerak bo'lgan ko'p ekranli oqimlar yaratish.

Topshiriq: moslashuvchan sarlavha banneri yaratish

ViewThatFits(in: .horizontal) yordamida sarlavha banneri yarating. Birinchi variant .title shriftida uzun taglavha bo'lsin: "Bugun birinchi iOS ilovangizni yaratishni boshlang". Ikkinchisi — "Birinchi iOS ilovangizni yarating". Uchinchisi — "Boshlang". Canvas-da turli kenglikdagi konteynerlar ichida tekshiring — .frame(width: 200) va .frame(width: 350) bilan cheklashga urinib ko'ring va turli variantlarning ishlashini kuzating.