Published on

Spotify kloni (3-qism): Gorizontal pleylistlar qatori

Authors

Pleylistlar qatori

Spotify ning asosiy oynasiga kirsangiz, o'nlab turli xil ro'yxatlar borligini ko'rasiz ("Siz uchun tavsiya", "Yangi musiqalar", "Populyar" va h.k). Har bir qator o'zining sarlavhasiga (Title) va ichida gorizontal aylanadigan pleylistlar rasmiga ega.

Shuning uchun, avval bitta dona ro'yxat katakchasi (Image and Title cell) ni yasab olamiz.

1. Kvadrat ro'yxat katakchasi

Buning uchun yana Components papkamizga kirib, SpotifyImageTitleRowCell nomli fayl ochamiz. Bu oddiy kvadrat rasm va tagida 2 qatorli yozuvdan iborat bo'ladi.

import SwiftUI

struct SpotifyImageTitleRowCell: View {
    var imageSize: CGFloat = 100 // Rasm o'lchamini aniq qilib qotirib qo'yamiz
    var imageName: String = ""
    var title: String? = "Some Item Name"

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

            if let title {
                Text(title)
                    .font(.callout)
                    .foregroundColor(.spotifyLightGray)
                    .lineLimit(2)
                    .padding(.horizontal, 4)
            }
        }
        .frame(width: imageSize) // Text uzunlashib ketsa, rasmdan chiqib ketmasligi uchun
    }
}

Nega imageSize ni aniq qilib belgilab oldik? Agar ichma-ich joylashgan yuzlab ScrollView lar ichida har bir rasm o'zining razmerini o'zi hisoblashiga ruxsat bersak, ekran qotishni (lag) boshlaydi va juda ko'p xotira yeydi. Shuning uchun murakkab UI larda aniq o'lchamlar berish yaxshi amaliyot hisoblanadi.

2. Qatorlar uchun Model yaratish

Har bir qator (Row) o'zgaruvchan sarlavhaga va qandaydir ichki ma'lumotlarga ega. Buni to'g'ridan-to'g'ri View (Ekran) ichida qilish kodingizni "spagetti" ga aylantiradi. Uni alohida Model ko'rinishiga o'tkazgan ma'qul.

Product.swift faylimizga quyidagicha yangi Model yozib qo'yamiz:

struct ProductRow: Identifiable {
    let id = UUID().uuidString
    let title: String
    let products: [Product]
}

3. Qatorlarni asosiy ekranga chiqarish

Endi barcha qismlarni asosiy SpotifyHomeView ga birlashtiramiz. Ilgari yasagan Vertical (Tepadan pastga) ScrollView imiz ichiga qo'shamiz:

// ... yuqoridagi kodlar

// Ma'lumotlar bazasidan tayyor qilib olingan qatorlar
ForEach(productRows) { row in
    VStack(spacing: 8) {
        Text(row.title)
            .font(.title)
            .fontWeight(.semibold)
            .foregroundColor(.spotifyWhite)
            .frame(maxWidth: .infinity, alignment: .leading)
            .padding(.horizontal, 16) // Faqat sarlavhani suramiz

        ScrollView(.horizontal, showsIndicators: false) {
            HStack(alignment: .top, spacing: 16) {
                ForEach(row.products) { product in
                    SpotifyImageTitleRowCell(
                        imageSize: 120,
                        imageName: product.images.first ?? "",
                        title: product.title
                    )
                    // SwiftfulUI dagi ajoyib effekt:
                    // Bosilganda kichrayib, animatsiya beradi
                    .asButton(.press) {
                        // Biror amal bajarish
                    }
                }
            }
            .padding(.horizontal, 16) // ScrollView chetidan ham bo'sh joy
        }
    }
}

Ana shunday tarzda, hatto 100 ta har xil qator (Populyar, Yangi, Eski...) bo'lsa ham ularning bari bir xil chiroyli animatsiya va to'g'ri dizayn bilan ishlaydi.

Biz Spotify ning asosiy (Home) ekranini muvaffaqiyatli klon qilib bo'ldik! Keyingi qismda istalgan pleylist ichiga kirganda ko'rinadigan, "Stretchy Header" li ajoyib detayl oynasini yig'amiz.

Buy mea coffee