SwiftUI crypto app — HomeView va navigatsiya sarlavhasini yaratish

Ushbu darsda biz ilovamizning asosiy ekrani bo'lmish HomeViewni yaratishni va uning yuqori qismida Apple-ning standart navigatsiya sarlavhasi o'rniga moslashuvchan va chiroyli Custom Navigation Header (maxsus navigatsiya sarlavhasi) tuzishni boshlaymiz.

Standart navigatsiya sarlavhasi ba'zan cheklovlar yaratishi mumkin, shuning uchun biz navigatsiya panelini yashirib, o'zimizning animatsiyali elementlarga ega bo'lgan sarlavhamizni yozamiz.

1. Loyiha papkalarini sozlash

Loyiha murakkablashgani sari fayllarni tartibli saqlash muhim ahamiyatga ega. Buning uchun loyihada yangi guruh (Folder) yaratamiz:

Root-da core nomli yangi papka ochamiz.
core ichida home papkasini yaratamiz va uning ichida views hamda viewmodels papkalarini ochamiz.
Loyihada foydalaniladigan reusable (qayta ishlatiladigan) komponentlar uchun alohida components papkasini yaratamiz.

2. CircleButtonView komponentini yaratish

Sarlavhaning chap va o'ng tomonlarida turadigan aylana shaklidagi reusable tugmalarni yaratamiz. components papkasida CircleButton guruhini ochib, uning ichida CircleButtonView.swift faylini yaratamiz:

import SwiftUI

struct CircleButtonView: View {

    let iconName: String

    var body: some View {
        Image(systemName: iconName)
            .font(.headline)
            .foregroundColor(Color.theme.accent)
            .frame(width: 50, height: 50)
            .background(
                Circle()
                    .foregroundColor(Color.theme.background)
            )
            .shadow(
                color: Color.theme.accent.opacity(0.25),
                radius: 10, x: 0, y: 0
            )
            .padding()
    }
}

// Preview-ni Light va Dark rejimda tekshiramiz
struct CircleButtonView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            CircleButtonView(iconName: "info")
                .previewLayout(.sizeThatFits)

            CircleButtonView(iconName: "plus")
                .previewLayout(.sizeThatFits)
                .preferredColorScheme(.dark)
        }
    }
}

3. CircleButtonAnimationView — tugma ostidagi to'lqin animatsiyasi

Tugma bosilganda foydalanuvchiga vizual effekt ko'rsatish uchun uning orqa fonida kengayib yo'qoladigan to'lqin (ripple effect) animatsiyasini yaratamiz. CircleButtonAnimationView.swift faylini ochib, quyidagi kodni yozamiz:

import SwiftUI

struct CircleButtonAnimationView: View {

    @Binding var animate: Bool

    var body: some View {
        Circle()
            .stroke(lineWidth: 5.0)
            .scale(animate ? 1.0 : 0.0)
            .opacity(animate ? 0.0 : 1.0)
            .animation(animate ? Animation.easeOut(duration: 1.0) : .none, value: animate)
    }
}

struct CircleButtonAnimationView_Previews: PreviewProvider {
    static var previews: some View {
        CircleButtonAnimationView(animate: .constant(true))
            .frame(width: 100, height: 100)
    }
}

4. HomeView-ni sozlash va navigatsiya panelini yashirish

Endi views papkasi ichida HomeView.swift faylini yaratamiz. Loyihamizda navigatsiya imkoniyatlaridan foydalanishimiz uchun asosiy App faylimizda HomeViewni NavigationView ichiga o'raymiz va standart navigatsiya panelini yashiramiz:

App faylidagi sozlama (`SwiftfulCryptoApp.swift`)

@main
struct SwiftfulCryptoApp: App {
    var body: some Scene {
        WindowGroup {
            NavigationView {
                HomeView()
                    .navigationBarHidden(true)
            }
        }
    }
}

HomeView kodi

import SwiftUI

struct HomeView: View {

    @State private var showPortfolio: Bool = false

    var body: some View {
        ZStack {
            // Fon layer
            Color.theme.background
                .ignoresSafeArea()

            // Kontent layer
            VStack {
                homeHeader

                Spacer(minLength: 0)
            }
        }
    }
}

struct HomeView_Previews: PreviewProvider {
    static var previews: some View {
        NavigationView {
            HomeView()
                .navigationBarHidden(true)
        }
    }
}

// HomeView kengaytmasi (Extension) orqali sarlavha qismini ajratib olamiz
extension HomeView {

    private var homeHeader: some View {
        HStack {
            CircleButtonView(iconName: showPortfolio ? "plus" : "info")
                .animation(.none, value: showPortfolio)
                .background(
                    CircleButtonAnimationView(animate: $showPortfolio)
                )

            Spacer()

            Text(showPortfolio ? "Portfolio" : "Live Prices")
                .font(.headline)
                .fontWeight(.heavy)
                .foregroundColor(Color.theme.accent)
                .animation(.none, value: showPortfolio)

            Spacer()

            CircleButtonView(iconName: "chevron.right")
                .rotationEffect(Angle(degrees: showPortfolio ? 180 : 0))
                .onTapGesture {
                    withAnimation(.spring()) {
                        showPortfolio.toggle()
                    }
                }
        }
        .padding(.horizontal)
    }
}

Ushbu sozlamalardan so'ng chap tugma bosilganda o'ngdagi strelka o'z yo'nalishini 180 darajaga o'zgartiradi, sarlavha nomi "Live Prices"dan "Portfolio"ga almashadi va chap tugma ortida yumshoq to'lqin animatsiyasi paydo bo'ladi.

Keyingi darsda biz CoinGecko API-dan keladigan JSON ma'lumotlariga mos keladigan CoinModelni yaratishni o'rganamiz! 🚀