Published on

SwiftUI-da App Icon va Launch Screen qo'shish

Authors

Bu β€” Todo List ilovasi seriyasining yakuniy videosi. Bu videoda ilovani App Store-ga joylashtirishga tayyorlaymiz: Launch Screen (ochilish ekrani) va App Icon (ilova belgisi) qo'shamiz. Ikkalasi ham App Store-ga ilova joylashtirish uchun majburiy talab.


Launch Screen nima?

Launch Screen β€” ilova ochilganda, asosiy ekran yuklanguncha ko'rinadigan qisqa yuklanish ekrani. Kichik ilovalarda bu juda tez o'tib ketadi va deyarli sezilmaydi, lekin katta ilovalarda yuklanish davomida bir necha soniya ko'rinib turadi.


1-usul: Info.plist orqali (tavsiya etilmaydi)

Xcode loyihasida Info.plist ichida Launch Screen bo'limi bor. Unda fon rangi yoki rasm nomi qo'shish mumkin.

Kamchiligi: Bu usul ko'pincha to'g'ri ishlamaydi, moslashuvchanligi past va kutilganidek natija bermaydi. Shuning uchun bu usulni hozircha ishlatmaslik tavsiya etiladi.


2-usul: Storyboard β€” tavsiya etilgan usul

Storyboard β€” SwiftUI-dan oldin UIKit-da keng ishlatilgan vosita. Launch Screen uchun esa hozir ham eng ishonchli usul hisoblanadi.

Storyboard yaratish

Xcode-da: o'ng tugma bosing β†’ New File β†’ Launch Screen β†’ faylga nom bering (masalan, LaunchScreen).

Sozlash qadamlari

  1. Fon rangini o'zgartirish β€” View Controller-ni tanlang β†’ Background β†’ Named Colors β†’ Accent Color (yoki o'zingiz xohlagan rang)

  2. Rasm qo'shish β€” Library-dan Image View qo'shing, ekran markaziga joylashtiring:

    • Alignment constraints orqali β€” horizontal va vertical markazga tekislash
    • Width va Height β€” masalan, 150x150
    • System image sifatida checkmark.circle.fill belgisini tanlash mumkin
    • Tint rangini oq qilish
  3. Matn qo'shish β€” Image ostiga Label qo'shing:

    • Top constraint β€” image bilan orasiga 16 piksel
    • Horizontal markazga tekislash
    • Rangini oq qilish
    • Shrift β€” Large Title
    • Matn β€” ilovangiz nomi yoki shiori

Loyihaga bog'lash

Project Navigator β†’ loyiha nomi β†’ General bo'limi β†’ Launch Screen File β€” yaratilgan storyboard faylini tanlang.

Simulyatorda ishga tushirilganda, yangi Launch Screen ko'rinadi va asosiy ekranga o'tadi.


App Icon qo'shish

Ilova nomini o'zgartirish

Xcode loyihasi sozlamalarida Display Name maydonida ilova nomini xohlagancha o'zgartirish mumkin. Bo'sh joy ishlatsa bo'ladi, lekin maxsus belgilardan saqlanish kerak β€” ular build xatolariga olib kelishi mumkin.

App Icon yasash β€” Canva orqali

App Icon yasash uchun istalgan dizayn vositasini ishlatish mumkin, masalan Canva:

  1. Canva-da yangi loyiha yarating β€” o'lcham 1024x1024 piksel (eng katta talab qilinadigan o'lcham, iPad uchun)
  2. Fon va rasm qo'shing, dizaynni xohlagancha moslashtiring
  3. Yakunlangan rasm sifatida yuklab oling

Barcha o'lchamlarni olish β€” makeappicon.com

Xcode-ning Assets.xcassets papkasida AppIcon bo'limida ko'plab turli o'lchamlar talab qilinadi (20x20, 29x29, 76x76 va boshqalar β€” 1x, 2x, 3x ko'paytmalari bilan). Har birini qo'lda yasash o'rniga, makeappicon.com kabi xizmatlar 1024x1024 rasmni yuklab, barcha kerakli o'lchamlarni avtomatik tayyorlab beradi.

Rasmlarni qo'shish

Tayyor o'lchamlar olinganidan keyin, har birini Xcode-dagi AppIcon katakchalariga mos o'lchamga qarab sudrab tashlash kerak. Agar noto'g'ri o'lcham qo'yilsa, Xcode xato belgisi (qizil uchburchak) ko'rsatadi β€” bu orqali to'g'ri yoki noto'g'ri qilganingizni bilib olasiz.


Yakuniy natija

Ilova endi:

  • O'z Launch Screen-iga ega β€” yuklanish vaqtida professional ko'rinish
  • O'z App Icon-iga ega β€” bosh ekranda aniq ko'rinadi
  • App Store-ga joylashtirish uchun texnik talablarga javob beradi

Loyiha xulosasi β€” MVVM arxitekturasi

Ushbu seriyada to'liq ilova yaratildi va quyidagi tamoyillarga amal qilindi:

  • MVVM arxitekturasi β€” Model, View va ViewModel qatlamlari aniq ajratilgan
  • Xavfsiz kodlash β€” guard let orqali Optional-larni xavfsiz ochish
  • CRUD funksiyalari β€” Create, Read, Update, Delete amallarining barchasi ViewModel-da amalga oshirilgan
  • Moslashuvchan dizayn β€” ilova light va dark rejimda, shuningdek iPad va portrait/landscape orientatsiyalarda to'g'ri ishlaydi
  • App Store tayyorligi β€” Launch Screen va App Icon qo'shilgan

Bu β€” to'liq, ishlaydigan va App Store-ga joylashtirishga tayyor SwiftUI ilovasi namunasi.

Buy mea coffee