Published on

Spotify kloni (5-qism): Qo'shiqlar ro'yxati va Navigatsiya

Authors

1. Qo'shiqlar qatorini yaratish (Song Row Cell)

Pleylist detal ekraniga kirdik, katta rasm va description bor. Endi uning tagida ro'yxat bo'lib chiqib turadigan qo'shiqlar katakchasini SpotifySongRowCell deb nomlab yaratamiz.

Unda chapda rasm, o'rtada qo'shiq nomi va xonanda, o'ng tomonda esa 3 ta nuqtali qo'shimcha tugma bo'ladi:

import SwiftUI

struct SpotifySongRowCell: View {
    var imageSize: CGFloat = 50
    var imageName: String = "https://picsum.photos/600/600"
    var title: String = "Song name"
    var subtitle: String? = "Artist name"

    var onCellPressed: (() -> Void)? = nil
    var onEllipsisPressed: (() -> Void)? = nil

    var body: some View {
        HStack(spacing: 8) {
            ImageLoaderView(urlString: imageName)
                .frame(width: imageSize, height: imageSize)

            VStack(alignment: .leading, spacing: 4) {
                Text(title)
                    .font(.body)
                    .fontWeight(.medium)
                    .foregroundColor(.spotifyWhite)
                    .lineLimit(2)

                if let subtitle {
                    Text(subtitle)
                        .font(.callout)
                        .foregroundColor(.spotifyLightGray)
                        .lineLimit(2)
                }
            }
            .frame(maxWidth: .infinity, alignment: .leading)

            Image(systemName: "ellipsis")
                .foregroundColor(.spotifyWhite)
                .font(.subheadline)
                .padding(16) // Tugma bosiladigan hududni kattalashtiramiz
                .background(Color.black.opacity(0.001))
                .onTapGesture {
                    onEllipsisPressed?()
                }
        }
        .onTapGesture {
            onCellPressed?()
        }
    }
}

Bu qo'shiq katakchasini o'tgan safargi pleylist ekranining eng pastidan ForEach bilan yozib qo'yamiz.

2. Navigatsiya (Router) va Silliq o'tishlar

Barcha sahifalarimiz tayyor, endi Asosiy (Home) oynasidan biron element bosilganda Pleylist (Playlist) oynasiga o'tishi kerak. Odatda NavigationLink ishlatiladi, ammo murakkab dasturlarda NavigationLink juda ko'p muammo (bug) lar keltirib chiqarishi mumkin.

Shuning uchun, maxsus navigatsiya paketi SwiftfulRouting dan foydalanamiz. Loyihaning eng asosiy root view'ini RouterView bilan o'raymiz:

import SwiftUI
import SwiftfulRouting

@main
struct SpotifyApp: App {
    var body: some Scene {
        WindowGroup {
            RouterView { _ in
                ContentView() // Content view ichida hamma narsa bo'ladi
            }
        }
    }
}

Endi sahifadan sahifaga o'tish juda oson. Masalan, Asosiy ekrandagi bitta pleylist tugmasi bosilganda ishlashi kerak bo'lgan kod:

@Environment(\.router) var router

// ... qayerdadir button bosilganda:
Button("Pleylistni ochish") {
    router.showScreen(.push) { _ in
        SpotifyPlaylistView(product: selectedProduct, user: currentUser)
    }
}

Va qaytish tugmasi (Back button) bosilganda:

Image(systemName: "chevron.left")
    .onTapGesture {
        router.dismissScreen()
    }

Yakuniy xulosa

Tabriklayman! 🎉 Siz bir nechta dars ichida dunyodagi eng ilg'or ilovalardan biri - Spotify ning UI dizaynini juda katta qismini noldan SwiftUI yordamida yig'ib chiqdingiz. Bunda siz:

  • Maxsus .themeColors modifier lar yozishni;
  • Murakkab ekranlarni (ScrollView + LazyVGrid + HStack) qotib qolmaydigan qilib modullashtirishni;
  • Stretchy Header va Custom Navigatsiya yaratishni o'rgandingiz.

Endi esa biroz tin olib, keyingi safardan yana bir ommabop dastur - Bumble interfeyslarini yasashga kirishamiz!

Buy mea coffee