- Published on
SwiftUI crypto app — rang sxemasini yangilash
- Authors
- Name
- ShoxruxC
- @iOSdasturchi
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 qoldiPortfolioView(scroll view) — qora qoldiSettingsView(list) — qora qoldiDetailView(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 ColorTheme2 → ColorTheme o'zgarishi bilan butun ilova yangi rang sxemasiga o'tadi.
"Bu bizning arxitekturamizning kuchi! Barcha ranglar
Color.theme.accent,Color.theme.backgroundorqali olindi. Shu sababli bitta joy o'zgartirilsa — butun ilova yangilanadi. Bu production-level darajada professional yondashuv."
Umumiy ranglar tekshiruv jadvali
| Ekran | To'g'rilandi |
|---|---|
| HomeView — tangalar ro'yxati | ✅ .listRowBackground |
| HomeView — portfel ro'yxati | ✅ .listRowBackground |
| PortfolioView | ✅ ScrollView.background |
| SettingsView | ✅ ZStack + Color.theme.background |
| DetailView | ✅ ScrollView.background |
| NavigationBar back button | ✅ UINavigationBar.tintColor |
| UITableView fon | ✅ UITableView.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. 🚀