Published on

SwiftUI crypto app — loyihani sozlash va ranglar mavzusini yaratish

Authors

SwiftUI crypto app — loyihani sozlash

Ushbu darsda biz SwiftUI Crypto App loyihasi uchun Xcode loyihasini yaratamiz, boshlang'ich sozlamalarni bajaramiz va butun ilova davomida ishlatiladigan moslashuvchan ranglar tizimini (Color Theme) sozlaymiz.

1. Xcode loyihasini yaratish

Birinchi navbatda Xcode dasturini ochamiz va yangi loyiha yaratamiz:

  1. iOS ruknidan App shablonini tanlaymiz va Next tugmasini bosamiz.
  2. Loyiha nomini (Product Name) SwiftfulCrypto deb nomlaymiz.
  3. Interface qismida SwiftUI, Language qismida esa Swift tanlanganligiga ishonch hosil qilamiz.
  4. Core Data va Tests katakchalarini belgilanmagan (unchecked) holatda qoldiramiz (Core Data-ni keyinchalik o'zimiz noldan qo'shamiz).
  5. Loyihani kompyuterimizda saqlaymiz va yaratamiz.

2. Loyiha sozlamalarini sozlash

Loyiha yaratilgandan so'ng, loyiha sozlamalariga o'tamiz (chap paneldagi ko'k loyiha belgisi):

  • Display Name (Ko'rsatiladigan nom): Telefon ekranida ilova belgisi ostida chiqadigan nomni Crypto Tracker deb o'zgartiramiz.
  • Devices (Qurilmalar): Ilova faqat iPhone va iPad uchun mo'ljallangan, macOS-ni o'chirib qo'yamiz.
  • Orientation (Yo'nalish): Ilova faqat tik holatda (Portrait) ishlashi uchun Landscape Left va Landscape Right yo'nalishlaridan belgilarni olib tashlaymiz.

3. Assets katalogiga rang va rasmlarni yuklash

Ilovamiz light (yorug') va dark (qorong'i) rejimlarda chiroyli ko'rinishi uchun moslashuvchan ranglar va rasmlarni Assets.xcassets ichiga yuklaymiz.

Assets papkasi ichida ikkita yangi guruh (Folder) yaratamiz:

  1. images — bu yerga CoinGecko logotiplari va rasmlarni joylashtiramiz.
  2. theme colors — bu yerga ilovamizning ranglar mavzusini yaratamiz.

Ranglar to'plami (Color Sets)

Har bir rang uchun Appearance sozlamasini Any, Dark rejimiga o'tkazamiz va Light hamda Dark rejimlari uchun mos ranglarni kiritamiz:

  • AccentColor (Urg'u rangi): Light rejimda toza qora (pitch black), Dark rejimda och pushti (#FACFFC).
  • BackgroundColor (Fon rangi): Light rejimda oq, Dark rejimda toza qora.
  • GreenColor (Yashil rang — o'sish ko'rsatkichi): Light rejimda to'q yashil (Clover), Dark rejimda och yashil (Flora).
  • RedColor (Qizil rang — pasayish ko'rsatkichi): Light rejimda to'q qizil (Maroon), Dark rejimda och qizil (Strawberry).
  • SecondaryTextColor (Ikkinchi darajali matn rangi): Light rejimda to'q kulrang (Tin), Dark rejimda och kulrang (Magnesium).

4. Swift-da Color klassini kengaytirish

Kiritilgan ranglarni kod ichida oson va tizimli ishlatish uchun Color klassiga extension yozamiz.

Loyihada extensions nomli yangi guruh yaratib, uning ichida Color.swift faylini ochamiz:

import SwiftUI

extension Color {
    static let theme = ColorTheme()
}

struct ColorTheme {
    let accent = Color("AccentColor")
    let background = Color("BackgroundColor")
    let green = Color("GreenColor")
    let red = Color("RedColor")
    let secondaryText = Color("SecondaryTextColor")
}

Bu extension bizga butun loyiha bo'ylab Color.theme.accent yoki Color.theme.background ko'rinishida ranglarni chaqirish imkonini beradi.

5. Ranglarni ContentView-da sinab ko'rish

Yaratgan ranglar tizimimiz to'g'ri ishlayotganini tekshirish uchun ContentView.swift faylida quyidagi test interfeysini tuzib ko'ramiz:

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            // Moslashuvchan fon rangi
            Color.theme.background
                .ignoresSafeArea()

            VStack(spacing: 20) {
                Text("Accent color")
                    .foregroundColor(Color.theme.accent)

                Text("Secondary text color")
                    .foregroundColor(Color.theme.secondaryText)

                Text("Red color")
                    .foregroundColor(Color.theme.red)

                Text("Green color")
                    .foregroundColor(Color.theme.green)
            }
            .font(.headline)
        }
    }
}

Ilovani Light va Dark rejimda tekshirib ko'rsangiz, fon va matn ranglari avtomatik tarzda moslashayotganini ko'rishingiz mumkin. Bu yondashuv loyiha arxitekturasini toza saqlash va kelajakda butun ilova dizaynini soniyalar ichida o'zgartirish imkonini beradi.

Keyingi darsda biz API ma'lumotlarini yuklash va birinchi View Model-ni yozishni boshlaymiz! 🚀

Buy mea coffee