Published on

SwiftUI crypto app — rang sxemasini yangilash

Authors

SwiftUI crypto app — rang sxemasini yangilash

Ilova funktsional jihatdan tayyor. Lekin bir nechta ekranlarda fon rangi to'g'ri chiqmaydi — Color.theme.background o'rniga tizimning standart qora rang ishlatilayapti. Bu darsda barchasini to'g'rilab, bir joydan butun rang sxemasini o'zgartirish kuchini ko'rsatamiz.


1. Muammoni aniqlash

Vaqtincha fon rangni ko'rinadigan rangga (masalan asparagus) o'zgartirib, ilovani ishga tushiramiz:

// Assets.xcassets > Background (Dark) ni vaqtincha sariq ranggga o'zgartiring

Muammo ko'rindi:

  • List (tangalar ro'yxati) — qora qoldi
  • PortfolioView (scroll view) — qora qoldi
  • SettingsView (list) — qora qoldi
  • DetailView (scroll view) — qora qoldi

Bu yerlar Color.theme.background olmaganini anglatadi.


2. List fon rangini to'g'rilash — UITableView

SwiftUI List aslida UITableView ustiga qurilgan. Uni shaffof qilish uchun SwiftUICryptoApp.swift-da:

init() {
    UINavigationBar.appearance().largeTitleTextAttributes = [
        .foregroundColor: UIColor(Color.theme.accent)
    ]
    UINavigationBar.appearance().titleTextAttributes = [
        .foregroundColor: UIColor(Color.theme.accent)
    ]

    // ← Yangi: barcha List-larning fon rangi
    UITableView.appearance().backgroundColor = UIColor.clear
}

Keyin HomeView-dagi ro'yxat har bir satri uchun:

// allCoinsList-da:
ForEach(vm.allCoins) { coin in
    CoinRowView(coin: coin, showHoldingsColumn: false)
        .onTapGesture { segue(coin: coin) }
        .listRowBackground(Color.theme.background)  // ← yangi
}

// portfolioCoinsList-da ham xuddi shunday

3. PortfolioView (ScrollView) fon rangi

// PortfolioView.swift-da:
var body: some View {
    NavigationView {
        ScrollView {
            // ...
        }
        .background(Color.theme.background.ignoresSafeArea())  // ← yangi
    }
}

4. SettingsView fon rangi

// SettingsView.swift-da:
var body: some View {
    NavigationView {
        ZStack {
            Color.theme.background.ignoresSafeArea()  // ← fon layer

            List {
                // ...
            }
        }
    }
}

// Har bir Section uchun:
Section(...) {
    // ...
}
.listRowBackground(Color.theme.background.opacity(0.5))  // ← ozgina farqli

5. DetailView fon rangi

// DetailView.swift-da:
var body: some View {
    ScrollView {
        // ...
    }
    .background(Color.theme.background.ignoresSafeArea())  // ← yangi
    .navigationTitle(vm.coin.name)
}

6. NavigationBar back button rangi

Navigatsiya orqaga tugmasi hali UIKit standart ko'k yoki eski aksent rangida. SwiftUICryptoApp.swift-da:

UINavigationBar.appearance().tintColor = UIColor(Color.theme.accent)

7. Butun rang sxemasini o'zgartirish quvvati

Color+Extensions.swift-da hozir:

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")
}

Butunlay yangi sxema yaratish uchun:

struct ColorTheme2 {
    let accent = Color(#colorLiteral(red: 0, green: 0.8, blue: 0.8, alpha: 1))    // Firuza
    let background = Color(#colorLiteral(red: 0.05, green: 0.1, blue: 0.2, alpha: 1))  // To'q ko'k
    let green = Color(#colorLiteral(red: 0.2, green: 0.7, blue: 0.3, alpha: 1))   // Yashil
    let red = Color(#colorLiteral(red: 0.8, green: 0.1, blue: 0.2, alpha: 1))     // Qizil
    let secondaryText = Color(#colorLiteral(red: 0.6, green: 0.6, blue: 0.7, alpha: 1))  // Kulrang
}

extension Color {
    static let theme = ColorTheme2()  // ← Faqat shu satrni o'zgartiramiz!
}

Faqat bitta ColorTheme2ColorTheme o'zgarishi bilan butun ilova yangi rang sxemasiga o'tadi.

"Bu bizning arxitekturamizning kuchi! Barcha ranglar Color.theme.accent, Color.theme.background orqali olindi. Shu sababli bitta joy o'zgartirilsa — butun ilova yangilanadi. Bu production-level darajada professional yondashuv."


Umumiy ranglar tekshiruv jadvali

EkranTo'g'rilandi
HomeView — tangalar ro'yxati.listRowBackground
HomeView — portfel ro'yxati.listRowBackground
PortfolioViewScrollView.background
SettingsViewZStack + Color.theme.background
DetailViewScrollView.background
NavigationBar back buttonUINavigationBar.tintColor
UITableView fonUITableView.appearance().backgroundColor

Endi Assets.xcassets-da Background (Dark)-ni qora rangga qaytaring — ilova darsligicha go'zal ko'rinadi. Keyingi va oxirgi darsda butun kurs natijalarini ko'rib chiqamiz. 🚀

Buy mea coffee