SwiftUI crypto app — custom qidiruv satrini yaratish

Ushbu darsda biz foydalanuvchilarimiz tangalarni tez va oson topishlari uchun reusable (qayta ishlatiladigan) SearchBarView (qidiruv satri) komponentini yaratamiz.

Ushbu qidiruv satri ilovaning umumiy dizayniga mos holda tayyorlanadi, light/dark rejimda moslashadi hamda foydalanuvchi tajribasini (UX) yaxshilash uchun klaviaturani yopuvchi maxsus UIApplication kengaytmasidan foydalanadi.

1. Klaviaturani yopish uchun UIApplication extensionini yozish

iOS tizimida matn kiritish tugagach yoki qidiruvni tozalash tugmasi bosilganda klaviaturani dasturlash orqali yopish uchun UIApplication klassini kengaytiramiz. extensions papkasi ichida UIApplication.swift faylini yaratamiz:

import SwiftUI

extension UIApplication {

    // Klaviaturani va boshqa faol kiritish maydonlarini yopish funksiyasi
    func endEditing() {
        // UIResponder orqali birinchi responderlikni (faollikni) bekor qilamiz
        sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
    }
}

2. SearchBarView komponentini yaratish

components papkasi ichida SearchBar guruhini ochamiz va SearchBarView.swift faylini yaratamiz.

Ushbu komponent boshqa ekranlarda ham ishlatilishi uchun loyihaning biror aniq ViewModel-iga bog'lanmaydi. Buning o'rniga, tashqaridan bog'lanuvchi @Binding o'zgaruvchisini qabul qiladi:

import SwiftUI

struct SearchBarView: View {

    // Tashqi view-dagi matn o'zgaruvchisiga to'g'ridan-to'g'ri bog'lanish (Binding)
    @Binding var searchText: String

    var body: some View {
        HStack {
            // Qidiruv kattalashtiruvchi shisha belgisi
            Image(systemName: "magnifyingglass")
                .foregroundColor(
                    // Matn kiritilgan bo'lsa accent rangga o'tadi, bo'lmasa kulrang qoladi
                    searchText.isEmpty ? Color.theme.secondaryText : Color.theme.accent
                )

            // Matn kiritish maydoni (TextField)
            TextField("Search by name or symbol...", text: $searchText)
                .foregroundColor(Color.theme.accent)
                // Avtomatik xatolarni to'g'rilashni o'chirib qo'yamiz (kripto nomlari lug'atda bo'lmagani uchun)
                .disableAutocorrection(true)
                .overlay(
                    // Agar matn kiritilgan bo'lsa, o'ng tomonda tozalash (X) tugmasini chiqaramiz
                    Image(systemName: "xmark.circle.fill")
                        .padding() // Bosish maydonini kattalashtirish uchun padding beramiz
                        .offset(x: 10) // Tugmani o'ngroqqa suramiz
                        .foregroundColor(Color.theme.accent)
                        .opacity(searchText.isEmpty ? 0.0 : 1.0) // Bo'sh bo'lsa yashiramiz
                        .onTapGesture {
                            // Bosilganda klaviaturani yopamiz va qidiruv matnini tozalaymiz
                            UIApplication.shared.endEditing()
                            searchText = ""
                        }
                    , alignment: .trailing
                )
        }
        .font(.headline)
        .padding()
        .background(
            // Dumaloq burchakli fon
            RoundedRectangle(cornerRadius: 25)
                .fill(Color.theme.background)
                .shadow(
                    color: Color.theme.accent.opacity(0.15),
                    radius: 10, x: 0, y: 0
                )
        )
        .padding()
    }
}

struct SearchBarView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            SearchBarView(searchText: .constant(""))
                .previewLayout(.sizeThatFits)

            SearchBarView(searchText: .constant("Bitcoin"))
                .previewLayout(.sizeThatFits)
                .preferredColorScheme(.dark)
        }
    }
}

3. HomeViewModel va HomeView interfeysiga integratsiya qilish

HomeViewModel-da qidiruv o'zgaruvchisini yaratish

HomeViewModel.swift faylimizga @Published var searchText o'zgaruvchisini qo'shamiz (kelgusi darsda obuna yordamida ro'yxatni filtrlaymiz):

class HomeViewModel: ObservableObject {
    @Published var allCoins: [CoinModel] = []
    @Published var portfolioCoins: [CoinModel] = []

    // Qidiruv matni uchun o'zgaruvchi
    @Published var searchText: String = ""
    ...
}

HomeView-da qidiruv satrini joylashtirish

HomeView.swift faylida qidiruv satrini homeHeader va columnTitles orasiga joylashtiramiz:

// HomeView body qismi:
VStack {
    homeHeader

    // Qidiruv satrini joylashtiramiz va uni ViewModel-dagi searchText-ga bog'laymiz
    SearchBarView(searchText: $vm.searchText)

    columnTitles

    if !showPortfolio {
        allCoinsList
            .transition(.move(edge: .leading))
    }

    if showPortfolio {
        portfolioCoinsList
            .transition(.move(edge: .trailing))
    }

    Spacer(minLength: 0)
}

Ushbu amallardan so'ng ekranda chiroyli va qulay qidiruv satri paydo bo'ladi. Matn kiritishingiz bilan o'ng tomonda tozalash tugmasi paydo bo'ladi va uni bosganda qidiruv maydoni tozalanishi bilan birga klaviatura ham yopiladi.

Keyingi darsda biz qidiruv satriga yozilgan matn yordamida ro'yxatdagi tangalarni dinamik ravishda filtrlash logikasini Combine yordamida yozamiz! 🚀