Published on

Bumble kloni (5-qism): Yakuniy Chats ekrani

Authors

Chats ekranini yig'ish (BumbleChatsView)

Bumble ilovasidagi xabarlar ekrani asosan ikki qismdan iborat bo'ladi:

  1. Match Queue (Gugurtlar navbati): Yangi match bo'lgan, lekin hali xabar yozishilmagan foydalanuvchilar gorizontal ro'yxati.
  2. Recent Chats (So'nggi suhbatlar): Allaqachon boshlangan suhbatlarning vertikal ro'yxati.

Biz oldingi darsda bu qismlar uchun BumbleProfileImageCell va BumbleChatPreviewCell larini alohida yasab qo'ygan edik. Endi ularni bitta sahnaga yig'amiz xolos.

import SwiftUI

struct BumbleChatsView: View {
    @State private var allUsers: [User] = [] // Baza...

    var body: some View {
        ZStack {
            Color.bumbleWhite.ignoresSafeArea()

            VStack(spacing: 0) {
                header // Tepadagi qidiruv va menu tugmalari

                ScrollView(.vertical, showsIndicators: false) {
                    VStack(spacing: 24) {
                        matchQueueSection
                        recentChatsSection
                    }
                }
            }
        }
    }

    // Tepadagi sarlavha
    private var header: some View {
        HStack {
            Image(systemName: "line.horizontal.3")
            Spacer()
            Image(systemName: "magnifyingglass")
        }
        .font(.title)
        .fontWeight(.medium)
        .padding(16)
    }

    // 1. Gorizontal Match Queue
    private var matchQueueSection: some View {
        VStack(alignment: .leading, spacing: 8) {
            Text("Match Queue (\(allUsers.count))")
                .foregroundColor(.bumbleGray)
                .padding(.horizontal, 16)

            ScrollView(.horizontal, showsIndicators: false) {
                LazyHStack(spacing: 16) {
                    ForEach(allUsers) { user in
                        BumbleProfileImageCell(
                            imageName: user.image,
                            percentageRemaining: Double.random(in: 0...1),
                            hasNewMessage: Bool.random()
                        )
                    }
                }
                .padding(.horizontal, 16)
            }
            .frame(height: 100) // ScrollView chegaradan chiqib ketmasligi uchun
        }
    }

    // 2. Vertikal Recent Chats
    private var recentChatsSection: some View {
        VStack(alignment: .leading, spacing: 8) {
            HStack {
                Text("Chats")
                Spacer()
                Image(systemName: "line.horizontal.3.decrease") // Filter belgisi
            }
            .padding(.horizontal, 16)

            LazyVStack(spacing: 16) {
                ForEach(allUsers) { user in
                    BumbleChatPreviewCell(
                        imageName: user.image,
                        percentageRemaining: Double.random(in: 0...1),
                        hasNewMessage: Bool.random(),
                        userName: user.firstName,
                        lastChatMessage: user.aboutMe,
                        isYourMove: Bool.random()
                    )
                }
            }
            .padding(.horizontal, 16)
        }
    }
}

Router (Oynadan oynaga o'tish)

Har doimgidek barcha o'tishlarni SwiftfulRouting paketi yordamida qilamiz. Masalan, Asosiy ekrandagi filter belgisini bossak ushbu Chats oynamiz ochilishi kerak:

@Environment(\.router) var router

// BumbleHomeView ichida:
Image(systemName: "slider.horizontal.3")
    .onTapGesture {
        router.showScreen(.push) { _ in
            BumbleChatsView()
        }
    }

Xulosa

Navbatdagi katta loyihamiz ham o'z nihoyasiga yetdi! Bumble qiyin dasturlardan biri, ammo biz uni qanday qilib osonroq parchalashni ko'rdik:

  1. Birinchi o'rinda murakkab Swipe ishoralarini soddalashtirdik (withDragGesture).
  2. Har bir ma'lumotni .offset va Dictionary ga bog'lab silliq animatsiya yasadik.
  3. Chatlar qismida .trim bilan aylana vaqt ko'rsatkichini hosil qildik.
  4. Va har doimgidek barcha komponentlarni reusable qilib alohida-alohida yaratdik. Bu SwiftUI dagi eng to'g'ri amaliyotdir (Best practice).

Keyingi qismlarda yanada qiziqarli klonlarni qurishda davom etamiz. O'z ustingizda ishlashdan to'xtamang!

Buy mea coffee