SwiftUI ilovani iPad, Landscape va Dark Mode uchun moslashtirish

iPad simulatorida tekshirish

Xcode-da deployment targetni iPad Pro 12.9 inchga o'zgartirib, iPad simulatorida ishga tushiramiz.

Ilova unchalik yomon ko'rinmaydi — lekin list va pastki bar ekranning to'liq kengligi bo'ylab cho'zilib ketgan. iPad-da kontent odatda to'liq kenglikda emas, balki markazga tortilgan ko'rinadi. Shu muammoni tuzatamiz.

maxWidth — iPad uchun kenglik cheklovi

LocationsView-da yuqorida konstanta yaratamiz:

let maxWidthForIPad: CGFloat = 700

Header section uchun

Padding-dan keyin frame qo'shamiz:

.padding()
.frame(maxWidth: maxWidthForIPad)

iPhone — 700px-dan kichik, shuning uchun bu modifikator iPhone-ga ta'sir qilmaydi. iPad-da esa content 700px-dan kengayib ketmaydi.

Location preview section uchun

Bu yerda biroz murakkabroq: preview-ga maxWidth qo'shamiz, lekin transition animatsiyasi ekranning chetidan emas, content chetidan boshlanib qoladi. Buning vizual natijasi — content "pop" bo'lib paydo bo'ladi, silliq animatsiya bo'lmaydi.

Muammoni aniqlash uchun:

.frame(maxWidth: maxWidthForIPad)
.background(Color.green) // test uchun

Yashil rangdan ko'ramizki, transition — bu yashil maydonning chetigidan boshlanadi, ekran chetigidan emas.

Yechim: maxWidth frame-idan keyin, ekran kengligiga teng yana bir frame qo'shamiz:

.frame(maxWidth: maxWidthForIPad)
.frame(maxWidth: .infinity)

Endi transition birinchi (content) frame-dan emas, ikkinchi (ekran kengligidagi) frame-dan boshlanadi — animatsiya to'g'ri ishlaydi.

// Test ranglarini o'chiramiz
.frame(maxWidth: maxWidthForIPad)
.frame(maxWidth: .infinity)

Rasm karuselini iPad-ga moslashtirish

LocationDetailView-dagi imageSection-da:

.frame(width: UIScreen.main.bounds.width)

Bu qator — iPad-da sheet to'liq ekran kengligi bo'lmasligi sababli, rasmlar juda keng chiqib ketadi.

Yechim — ternary operator:

.frame(width: UIDevice.current.userInterfaceIdiom == .pad ? nil : UIScreen.main.bounds.width)

• iPad → nil (frame-ni kontent o'zi belgilaydi)
• iPhone → UIScreen.main.bounds.width (oldingi xulq)

Endi iPad-da rasmlar sheet kengligiga mos bo'lib ko'rinadi.

Dark mode — nima uchun deyarli hech narsa qilish kerak bo'lmadi

iPad simulatorida Settings → Developer → Dark Appearance orqali qora rejimni yoqib ko'ramiz — ilova deyarli mukammal ko'rinadi.

Sababi — to'g'ri ranglardan foydalanganmiz:

Matnlar:

// titleSection-da foregroundColor ko'rsatilmagan
Text(location.name)
    .font(.largeTitle)
    .fontWeight(.semibold)
// foregroundColor ko'rsatilmasa, standart holda .primary ishlatiladi
// .primary — yorug' rejimda qora, qora rejimda oq (avtomatik)

Text(location.cityName)
    .font(.title3)
    .foregroundColor(.secondary)
// .secondary — ham avtomatik moslashadi

Agar biz Color.black yoki Color.white deb aniq yozganimizda, bu qora rejimda muammo keltirar edi. Ammo .primary va .secondary — ikkalasi ham avtomatik moslashadi.

Materiallar:

.background(.ultraThinMaterial)  // LocationPreviewView
.background(.thickMaterial)      // Back button

Barcha SwiftUI materiallar (ultraThinMaterial, thickMaterial va boshqalar) avtomatik ravishda yorug' va qora rejim uchun moslashadi — shu sababdan qo'shimcha hech narsa qilish kerak bo'lmadi.

Landscape rejimi

iPad — landscape qo'llab-quvvatlanadi

iPad-ni landscape rejimiga o'zgartiramiz — ilova chiroyli ko'rinadi, hech narsa o'zgartirishga hojat yo'q.

iPhone — faqat portrait

iPhone landscape rejimida ilova to'g'ri ko'rinmaydi — pastki preview juda katta joy egallaydi, sheet g'alati ko'rinadi. Shuning uchun iPhone uchun faqat portrait rejimini qo'llab-quvvatlaymiz.

Xcode → Project Navigator → Blue bar (project) → General → Deployment Info:

1. iPhone tanlang → faqat Portrait belgisini qoldiring
2. iPad tanlang → Portrait, Landscape Left, Landscape Right (barcha orientatsiyalar yaxshi ko'rinadi)
3. Yana iPhone + iPad (ikkala qurilma) tanlang — deployment ikkalasiga bo'ladi

info.plist orqali tuzatish (Xcode 13 bug)

Ba'zan Xcode-da belgilangan orientatsiyalar info.plist-ga to'g'ri saqlanmaydi. Project Navigator → Info tab orqali tekshiramiz:

Supported interface orientations (iPad):
  - Portrait (bottom home button)
  - Landscape left (home button on right)
  - Landscape right (home button on left)

Supported interface orientations (iPhone):
  - Portrait (bottom home button)
  - Landscape left  ← BU YO'Q BO'LISHI KERAK
  - Landscape right ← BU YO'Q BO'LISHI KERAK

Agar iPhone uchun landscape orientatsiyalar hamon ro'yxatda tursa, ularning yonidagi minus (-) tugmasini bosib o'chiramiz.

Endi iPhone landscape rejimida ishga tushirilsa ham, ilova portraitda qoladi.

Launch Screen qo'shish

Ilova birinchi ochilganda ko'rinadigan kirish ekrani (launch screen) qo'shamiz.

Project → Info tab → Launch Screen:

1. "+" tugmasini bosib Image Name qo'shamiz
   • Qiymat: logo-launch (Assets-dagi rasm nomi bilan bir xil)
2. "+" tugmasini bosib Background Color qo'shamiz
   • Qiymat: AccentColor (Assets-dagi accent color nomi bilan bir xil)
3. Image respects safe area insets → YES
   • Rasm ekranning chetlariga emas, safe area ichida ko'rinadi

Launch screen yangilanmasa

Agar simulator-da launch screen yangilanmasa:

1. Simulatordagi ilovani o'chiring (delete)
2. Simulatorni to'liq yoping
3. Qaytadan build qiling — yangi simulator ochiladi, yangi launch screen o'rnatiladi

Storyboard bilan murakkab launch screen

Oddiy holatlar uchun info.plist usuli yetarli. Murakkabroq, to'liq moslashtirilgan launch screen kerak bo'lsa — Storyboard bilan alohida fayl yaratish tavsiya etiladi (bu usul ancha ko'p sozlanish imkoni beradi).

Ilova nomini o'zgartirish

Project → General → Display Name:

Swiftle Map App → My Locations

(Yoki o'zingiz xohlagan nom.)

Simulatorda qayta ishga tushirganda, ilova endi yangi nom bilan ko'rinadi.

Xulosa

Ilovani uchta yo'nalishda moslashtirishda qilgan ishlarimiz:

Asosiy xulosa: Ilovani qurayotganingizda dastlabki bosqichlardan boshlab adaptive ranglar (.primary, .secondary) va material fonlardan foydalanish — keyinchalik dark mode va iPad moslashtirishni deyarli avtomatik hal qiladi.