Published on

SwiftUI Map App β€” MVVM va MapKit bilan ilova qurish (kirish)

Authors

SwiftUI Map App β€” kirish

Bu seriyada MVVM arxitekturasi va SwiftUI-ning native Map komponenti yordamida real dunyo diqqatga sazovor joylarini ko'rsatuvchi ilova quriladi: Kolizey, Eyfel minorasiga o'xshagan mashhur joylar xaritada maxsus pinlar sifatida ko'rsatiladi, har bir joy uchun batafsil ma'lumot ekrani yaratiladi.

Ilova nimadan iborat

Asosiy ekran

  • Xarita β€” orqa fonda, foydalanuvchi siljitish va kattalashtirish imkoniga ega
  • Maxsus pinlar β€” Apple-ning standart pinlari emas, o'zim qurilgan maxsus belgilar
  • Yuqori menyu β€” bosilganda barcha joylar ro'yxati slaydlab tushadi, strelka ham animatsiya qiladi
  • Quyi karta β€” tanlangan joy haqida qisqa ma'lumot, chap-o'ng animatsiya bilan almashinadi

Pin yoki menyu elementiga bosilganda bir vaqtda bir nechta narsa o'zgaradi: yuqoridagi nom, xarita animatsiya bilan ko'chadi, pin kattaroq bo'ladi, quyi karta yangi joy ma'lumotini chap-o'ngdan slaydlab keltiradi.

Batafsil ma'lumot ekrani (Sheet)

  • Rasmlar galereyasi β€” chapga-o'ngga siljitish mumkin
  • Joy haqida tavsif
  • Wikipedia havolasi β€” Safari-ga o'tadi
  • Kichik xarita β€” faqat shu joy uchun
  • Keyingi joyga o'tish tugmasi β€” barcha ma'lumotlar sinxron yangilanadi

Moslanish

  • iPhone va iPad ekranlarida ishlaydi
  • Yorug' va qorong'i rejimda ishlaydi
  • Portret va albom yo'nalishlarida ishlaydi

Nima o'rganiladi

Navigatsiya: NavigationView o'rniga Sheet ishlatiladi.

Ma'lumot oqimi: model yaratib, uni ViewModel orqali butun ilovaga tarqatish β€” barcha ekranlar sinxron holda yangilanadi.

Animatsiyalar va o'tishlar: professional ko'rinishdagi harakatlar β€” pin kattaroq bo'lishi, xarita ko'chishi, karta slaydlanishi.

Loyiha tuzilmasi: butun eng murakkab ekran quyidagi qisqa body-ga sig'adi:

var body: some View {
    ZStack {
        mapLayer
        headerView
        locationsPreviewStack
    }
    .sheet(item: $vm.sheetLocation) { location in
        LocationDetailView(location: location)
    }
}

Bu MVVM arxitekturasining natijasi β€” view faqat ko'rinish bilan shug'ullanadi, barcha mantiq ViewModel-da.

Loyiha tuzilmasi

Models/
Views/
ViewModels/
DataServices/    ← tayyor ma'lumotlar (joylar ro'yxati)

Muhim eslatma: SwiftUI native Map

Bu seriyada UIKit Map emas, SwiftUI-ning native Map komponenti ishlatiladi. Native Map hozir yo'nalishlar (directions) va ba'zi ilg'or xususiyatlarni qo'llab-quvvatlamaydi. Bu seriya yo'nalishlar, Uber-ga o'xshash navigatsiya emas β€” balki joylarni xaritada belgilash va ular haqida ma'lumot ko'rsatishga bag'ishlangan.

Keyingi videoda loyiha fayllari va dastlabki tuzilma yaratiladi.

Buy mea coffee