Published on

SwiftUI'da shaxsiy shakllar (Custom shapes) yaratish

Authors

Nima uchun o'zimiz shakl yaratishimiz kerak?

SwiftUI by default (avtomatik ravishda) bizga bir qancha shakllarni taqdim etadi: Rectangle, RoundedRectangle, Circle, Capsule va hokazo. Aksariyat ilovalarda shularning o'zi yetarli. Biroq, agarda dizayneringiz ilovada Uchburchak (Triangle) yoki Romb (Diamond) kabi noodatiy shakl qatnashishini xohlab qolsa-chi?

SwiftUI'da tayyor Uchburchak yo'q! Keling, uni o'zimiz chizamiz.

Shape protokoli va Path

Custom (shaxsiy) shakl yaratish uchun strukturamiz Shape protokoliga bo'ysunishi kerak. Har qanday Shape bizdan bitta narsani: path(in rect: CGRect) -> Path funksiyasini yozishimizni talab qiladi.

import SwiftUI

// 1. Uchburchak shakli
struct Triangle: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()

        // Ekranning yuqori o'rta qismidan (top center) boshlaymiz
        path.move(to: CGPoint(x: rect.midX, y: rect.minY))

        // Pastki o'ng burchakka chiziq tortamiz
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))

        // Pastki chap burchakka chiziq tortamiz
        path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))

        // Va yana boshlagan nuqtamizga qaytib, shaklni yopamiz
        path.addLine(to: CGPoint(x: rect.midX, y: rect.minY))

        return path
    }
}

Tizimdagi rect bizning shakl o'rnashgan 4-burchakli qutining o'lchamlarini bildiradi. minX bu qutining eng chap tomoni bo'lsa, maxX eng o'ng tomonidir.

Romb (Diamond) va Trapetsiya (Trapezoid)

Xuddi shunday mantiq bilan istalgan shaklni chizish mumkin. Qalamni (move) biron joyga qo'yamiz va kerakli nuqtalarga tortib (addLine) shakl hosil qilamiz.

// 2. Romb shakli
struct Diamond: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()

        let horizontalOffset = rect.width * 0.2

        path.move(to: CGPoint(x: rect.midX, y: rect.minY)) // Tepa o'rta
        path.addLine(to: CGPoint(x: rect.maxX - horizontalOffset, y: rect.midY)) // O'ng o'rta
        path.addLine(to: CGPoint(x: rect.midX, y: rect.maxY)) // Past o'rta
        path.addLine(to: CGPoint(x: rect.minX + horizontalOffset, y: rect.midY)) // Chap o'rta
        path.addLine(to: CGPoint(x: rect.midX, y: rect.minY)) // Orqaga (Tepaga)

        return path
    }
}

// 3. Trapetsiya shakli
struct Trapezoid: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()

        let horizontalOffset = rect.width * 0.2

        // Kvadratning yuqori chap burchagidan sal ichkariroqdan boshlaymiz
        path.move(to: CGPoint(x: rect.minX + horizontalOffset, y: rect.minY))

        path.addLine(to: CGPoint(x: rect.maxX - horizontalOffset, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
        path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
        path.addLine(to: CGPoint(x: rect.minX + horizontalOffset, y: rect.minY))

        return path
    }
}

Custom shakllarni ekranda ishlatish

O'zimiz yasagan shakl endi tayyor shakllar bera oladigan barcha imkoniyatlarga ega bo'ldi! Biz uni rangini bo'yashimiz (.fill()), chizig'ini qalinlashtirishimiz (.stroke()) yoki rasmning shaklini qirqish uchun ishlatishimiz (.clipShape()) mumkin.

struct CustomShapesBootcamp: View {
    var body: some View {
        VStack(spacing: 40) {

            // Uchburchak
            Triangle()
                .stroke(style: StrokeStyle(lineWidth: 3, lineCap: .round, dash: [5]))
                .foregroundColor(.blue)
                .frame(width: 100, height: 100)

            // Romb (Gradient ranglar bilan)
            Diamond()
                .fill(LinearGradient(gradient: Gradient(colors: [.red, .blue]), startPoint: .leading, endPoint: .trailing))
                .frame(width: 100, height: 100)

            // Trapetsiya (Rasm ustiga qirqib qo'yish!)
            Image("therock")
                .resizable()
                .scaledToFill()
                .frame(width: 200, height: 150)
                .clipShape(Trapezoid()) // Rasmni trapetsiya shaklida qirqib beradi!
        }
    }
}

Ushbu usul faqat to'g'ri chiziqlar chizish uchun mo'ljallangan edi. Keyingi darsda biz qanday qilib dumaloq (arcs) va yoyilgan (curves) chiziqlar bilan yanada murakkab va chiroyli shakllar chizish mumkinligini o'rganamiz!

Buy mea coffee