Published on

Netflix kloni (2-qism): Hero Cell (Asosiy asar sahnasi)

Authors

Asosiy kino sahnasi (Hero Cell)

Netflix dasturini ochganingizda eng tepada sizga bitta kino yoki serial tavsiya etiladi. Uning katta rasmi, turi, nomi, va o'ynatish (Play) tugmasi mavjud bo'ladi. Ushbu sahnani NetflixHeroCell deb nomlaymiz.

Bu qismni bitta asosiy ZStack ga joylashtiramiz va orqa fon rasmiga ekranda to'g'ri joylashishi uchun Aspect Ratio beramiz.

import SwiftUI
import SwiftfulUI

struct NetflixHeroCell: View {
    var imageName: String = "https://picsum.photos/600/800"
    var isNetflixFilm: Bool = true
    var title: String = "Players"
    var categories: [String] = ["Raunchy", "Romantic", "Comedy"]

    var body: some View {
        ZStack(alignment: .bottom) {
            // 1. Orqa rasm
            ImageLoaderView(urlString: imageName)

            // 2. Yozuvlar tushunarli bo'lishi uchun pastdan qora Gradient
            LinearGradient(
                colors: [.clear, .netflixBlack, .netflixBlack],
                startPoint: .top,
                endPoint: .bottom
            )

            // 3. Matnlar va tugmalar
            VStack(spacing: 16) {
                if isNetflixFilm {
                    HStack(spacing: 8) {
                        Text("N")
                            .foregroundColor(.netflixRed)
                            .font(.largeTitle)
                            .fontWeight(.black)

                        Text("FILM")
                            // Harflar orasidagi ochiqlikni (kerning) kattalashtiramiz
                            .tracking(3)
                            .foregroundColor(.netflixLightGray)
                    }
                }

                Text(title)
                    .font(.system(size: 50, weight: .medium, design: .serif))

                // Kategoriyalar: Har biri o'rtasiga nuqta qo'yib chiqiladi
                HStack(spacing: 8) {
                    ForEach(categories, id: \.self) { category in
                        Text(category)
                            .font(.callout)

                        if category != categories.last {
                            Circle()
                                .frame(width: 4, height: 4)
                        }
                    }
                }

                // Play va My List tugmalari
                HStack(spacing: 16) {
                    playButton
                    myListButton
                }
            }
            .padding(24)
            .foregroundColor(.netflixWhite)
        }
        .aspectRatio(0.8, contentMode: .fit) // Rasm proportsiyasi
        .cornerRadius(10)
    }
}

UI Dizayn siri: Kategoriyalar orasidagi mayda nuqtachalar dizaynni boyituvchi ajoyib kichik detallardir. Buni qilish uchun HStack ichida ro'yxatning oxirgisi bo'lmagan har bir elementdan keyin Circle().frame(4x4) qo'yib chiqish kifoya. Yoki harflar ochiqligini .tracking(3) orqali kengaytirish ham Netflix shriftlarini eslatadi.

Header va ScrollView qoplamasi (Overlapping)

Ushbu sahnani asosiy oynadagi (NetflixHomeView) pastga harakatlanuvchi ScrollView ichiga joylashtiramiz. Lekin muammo shundaki, ScrollView tepadagi "For You" va Kategoriyalar navigatsiya paneli ustidan yopib yuborishi mumkin yoki tepaga yopishib qolishi mumkin.

Buni to'g'irlash uchun biz hiyla ishlatamiz: Header ning aniq balandligini olib, ScrollView ichidagi birinchi ko'rinmas quti (fake cell) qilib joylashtiramiz. Natijada ScrollView har doim Header'dan keyin chizilishni boshlaydi, lekin tepaga aylantirganingizda bemalol Header ning tagiga ham kirib keta oladi!

@State private var fullHeaderSize: CGSize = .zero

// Asosiy View ichida
ZStack(alignment: .top) {
    ScrollView(.vertical, showsIndicators: false) {
        VStack {
            // HEADER bilan bir xil bo'sh joy qoldiramiz!
            Rectangle()
                .fill(Color.clear)
                .frame(height: fullHeaderSize.height)

            NetflixHeroCell()
        }
    }

    // Header doim eng tepada turadi
    header
        .readingFrame { frame in
            fullHeaderSize = frame.size
        }
}

Ushbu uslub iOS ilovalari yaratishda shaffof va o'zgaruvchan (dynamic) Header lar yaratish uchun eng ko'p qo'llaniladigan arxitekturadir.

Keyingi qismda esa gorizontal filmlar ro'yxati va yana boshqa detallar ustida ishlashda davom etamiz.

Buy mea coffee