Published on

SwiftUI crypto app — Section listli sozlamalar ekranini qo'shish

Authors

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:

  1. Asosiy tabda yuqori chap "ℹ️" ni bossangiz → SettingsView ochiladi
  2. Portfel tabida esa o'sha tugma "+" ga aylanadi → PortfolioView ochiladi
  3. 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. 🚀

Buy mea coffee