- Published on
SwiftUI crypto app — Section listli sozlamalar ekranini qo'shish
- Authors
- Name
- ShoxruxC
- @iOSdasturchi
SwiftUI crypto app — Section listli sozlamalar ekranini qo'shish
Ilovada asosiy ekranda yuqori chap burchakdagi "ℹ️" tugmasi hali ish qilmaydi. Bu darsda biz SettingsView yaratamiz — u yerda ilova, CoinGecko API va dasturchi haqida ma'lumot bo'ladi. Bu professional ilovalar uchun standart yondashuv.
1. SettingsView yaratish
core/settings/views papkasida SettingsView.swift:
import SwiftUI
struct SettingsView: View {
// Havolalar
private let defaultURL = URL(string: "https://www.google.com")!
private let youtubeURL = URL(string: "https://www.youtube.com/c/SwiftfulThinking")!
private let coffeeURL = URL(string: "https://www.buymeacoffee.com/nicksarno")!
private let coingeckoURL = URL(string: "https://www.coingecko.com")!
private let personalURL = URL(string: "https://www.yourwebsite.com")! // O'zgartiring!
var body: some View {
NavigationView {
List {
swiftfulThinkingSection
coingeckoSection
developerSection
applicationSection
}
.listStyle(GroupedListStyle()) // Chiroyli bo'limlar ko'rinishi
.navigationTitle("Sozlamalar")
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
XMarkButton() // Oldindan yaratilgan komponent
}
}
}
}
}
2. swiftfulThinkingSection
extension SettingsView {
private var swiftfulThinkingSection: some View {
Section(header: Text("Swiftful Thinking")) {
VStack(alignment: .leading) {
Image("logo")
.resizable()
.frame(width: 100, height: 100)
.clipShape(RoundedRectangle(cornerRadius: 20))
Text("Bu ilova @SwiftfulThinking YouTube kanalidagi kursga amal qilib yaratildi. Ilova MVVM arxitekturasi, Combine va Core Data ishlatadi.")
.font(.callout)
.fontWeight(.medium)
.foregroundColor(Color.theme.accent)
}
.padding(.vertical)
Link("🎉 YouTube kanaliga obuna bo'ling", destination: youtubeURL)
Link("☕ Koffeni qo'llab-quvvatlang", destination: coffeeURL)
}
.accentColor(.blue)
.listRowSeparator(.hidden) // Bo'limlar orasidagi chiziqni yashirish
}
}
3. coingeckoSection
private var coingeckoSection: some View {
Section(header: Text("CoinGecko")) {
VStack(alignment: .leading) {
Image("coingecko")
.resizable()
.scaledToFit()
.frame(height: 100)
.clipShape(RoundedRectangle(cornerRadius: 20))
Text("Ilovadagi kriptovalyuta ma'lumotlari CoinGecko-ning bepul API si orqali olinadi. Narxlar bir oz kechikishi mumkin.")
.font(.callout)
.fontWeight(.medium)
.foregroundColor(Color.theme.accent)
}
.padding(.vertical)
Link("🦎 CoinGecko saytiga o'ting", destination: coingeckoURL)
}
.accentColor(.blue)
}
4. developerSection
private var developerSection: some View {
Section(header: Text("Dasturchi")) {
VStack(alignment: .leading) {
Image("logo") // O'z rasmingizga almashtiring
.resizable()
.frame(width: 100, height: 100)
.clipShape(RoundedRectangle(cornerRadius: 20))
Text("Bu ilova SwiftUI yordamida yozilgan. 100% Swift. Ilova parallel ishlov berish (background threads), publishers/subscribers (Combine) va ma'lumotlarni saqlash (Core Data) texnologiyalaridan foydalanadi.")
.font(.callout)
.fontWeight(.medium)
.foregroundColor(Color.theme.accent)
}
.padding(.vertical)
Link("🤙 Veb-sayt", destination: personalURL)
}
.accentColor(.blue)
}
5. applicationSection
private var applicationSection: some View {
Section(header: Text("Ilova")) {
// Har bir Link-ni URL bilan yangilash kerak
Link("Foydalanish shartlari", destination: defaultURL)
Link("Maxfiylik siyosati", destination: defaultURL)
Link("Kompaniya veb-sayti", destination: defaultURL)
Link("Batafsil ma'lumot", destination: defaultURL)
}
.accentColor(.blue)
}
Siz bu URL-larni haqiqiy sahifalar bilan almashtiring. App Store-ga yuklashda maxfiylik siyosati va foydalanish shartlari majburiy talab.
6. HomeView-ga Sheet ulash — ikki sheet muammosi
HomeView-da allaqachon bir sheet bor (PortfolioView). SwiftUI-da bitta view-da ikkita sheet bo'lmasligi kerak — ular bir-birini bekor qiladi.
Yechim: Ikkinchi sheet-ni boshqa layer-ga qo'shamiz:
// HomeView body-ning tuzilishi:
ZStack {
Color.theme.background.ignoresSafeArea()
VStack {
homeHeader
// ...
}
// VStack-ga sheet qo'shamiz (background layer-dan alohida)
.sheet(isPresented: $showSettingsView) {
SettingsView()
}
}
// ZStack-ning background layer-iga PortfolioView sheet-i
.background(
NavigationLink(
destination: DetailLoadingView(coin: $selectedCoin),
isActive: $showDetailView,
label: { EmptyView() }
)
)
// Background layer-ga PortfolioView sheet qo'shamiz
.sheet(isPresented: $showPortfolioView) {
PortfolioView()
.environmentObject(vm)
}
Muhim: VStack layer va ZStack background layer — ikkita alohida layer. Shuning uchun har birida o'z sheet-i bo'lishi mumkin va ular to'qnashmaydi.
7. HomeView headeridagi "ℹ️" tugmasini ulash
@State private var showSettingsView: Bool = false
// homeHeader-da tugma ichida:
Button {
if showPortfolio {
showPortfolioView.toggle() // Portfel tabida — PortfolioView
} else {
showSettingsView.toggle() // Asosiy tabda — SettingsView
}
} label: {
Image(systemName: showPortfolio ? "plus" : "info.circle")
.animation(.none)
}
Natija
Simulatorda:
- Asosiy tabda yuqori chap "ℹ️" ni bossangiz → SettingsView ochiladi
- Portfel tabida esa o'sha tugma "+" ga aylanadi → PortfolioView ochiladi
- SettingsView-da barcha havolalar ishlaydi: YouTube, CoinGecko, shaxsiy sahifa
"Bu ilova endi professional ko'rinishga ega — tanga ro'yxati, portfolio, grafik, statistika va sozlamalar. Endi ilova yakuniga yaqin — ikonka va launch screen qoldi!"
Keyingi darsda ilova ikonkasi, launch screen va chiroyli kirish animatsiyasini qo'shamiz. 🚀