Published on

SwiftUI da chiziqli, radial va burchakli gradientlar

Authors

Hammaga salom!

Hammaga salom! Men Nikman. Bu videoda gradientlar haqida gaplashamiz. SwiftUI ekranga maxsus gradientlar qo‘shishni juda oson qiladi.

Biz uch turdagi gradientni ko‘rib chiqamiz:

  • Linear Gradient – eng keng tarqalgan, bir rangdan boshqasiga to‘g‘ri chiziqli o‘tish.
  • Radial Gradient – markazdan chekkaga dumaloq o‘tish.
  • Angular Gradient – burchakli o‘tish.

Gradientlar ishlab chiqarish ilovalarida ko‘p ishlatiladi – odatda fonlar uchun yoki ob’ektlarga tekstura berish uchun. Gradientlar tekis ranglardan ko‘ra chiroyli va professional ko‘rinadi.

Eslatma: Bu videoda qizildan ko‘k ranggacha keskin gradientlardan foydalanamiz. Ammo real ilovalarda nozik gradientlar (masalan, qizildan och qizilgacha) yanada professional ko‘rinadi.

Bu yana bir qiziqarli va oson video – keling, boshlaymiz!

Yangi fayl yaratish

Xcode loyihamizga qaytdim. Gradientlar uchun kodni yangi faylda yozamiz:

  1. Project Navigator’da (chapda) o‘ng tugmani bosing.
  2. “New File” > “SwiftUI View”ni tanlang.
  3. Fayl nomini “GradientsBootcamp” deb qo‘ying.

Fayl ochilgach, o‘ngdagi preview’da “Resume” tugmasini bosing – preview ulanadi.

  • Chapdagi Navigator va markazdagi Minimap’ni yashirdim (yuqori chap va o‘ngdagi tugmalar bilan) – kod joyini kengaytirish uchun.

Gradientlar bilan ishlash

SwiftUI’da har qanday ob’ektni (fon yoki shakl) rang bilan to‘ldirish o‘rniga gradient ishlatish mumkin. Shakl qo‘shamiz:

RoundedRectangle(cornerRadius: 25)
    .frame(width: 300, height: 200)
    .fill(Color.red)
  • RoundedRectangle – yumaloq burchakli to‘rtburchak.
  • .fill(Color.red) – oddiy qizil rang bilan to‘ldirish.

Linear Gradient

Gradient qo‘shish uchun:

RoundedRectangle(cornerRadius: 25)
    .fill(
        LinearGradient(
            gradient: Gradient(colors: [Color.red, Color.blue]),
            startPoint: .leading,
            endPoint: .trailing
        )
    )
    .frame(width: 300, height: 200)
  • .fill(LinearGradient) – shaklni gradient bilan to‘ldiradi.
  • gradient: Gradient(colors:) – ranglar ro‘yxati ([Color.red, Color.blue]).
  • startPoint: .leading – chapdan boshlanadi.
  • endPoint: .trailing – o‘ngda tugaydi.

Ranglar qo‘shish:

LinearGradient(
    gradient: Gradient(colors: [Color.red, Color.blue, Color.orange, Color.purple]),
    startPoint: .leading,
    endPoint: .trailing
)
  • Ko‘proq rang qo‘shsak – qizil, ko‘k, to‘q sariq, binafsha o‘tish hosil bo‘ladi.

Nozik gradient

RoundedRectangle(cornerRadius: 25)
    .fill(
        LinearGradient(
            gradient: Gradient(colors: [
                Color(red: 0.0, green: 0.5, blue: 1.0),
                Color(red: 0.0, green: 0.3, blue: 0.8)
            ]),
            startPoint: .topLeading,
            endPoint: .bottom
        )
    )
    .frame(width: 300, height: 200)
  • Ranglar – Color literal bilan nozik ko‘kdan quyuqroq ko‘kka o‘tish.
  • startPoint: .topLeading – yuqori chapdan.
  • endPoint: .bottom – pastga.

Radial Gradient

RoundedRectangle(cornerRadius: 25)
    .fill(
        RadialGradient(
            gradient: Gradient(colors: [Color.red, Color.blue]),
            center: .center,
            startRadius: 5,
            endRadius: 200
        )
    )
    .frame(width: 300, height: 200)
  • RadialGradient – markazdan chekkaga dumaloq o‘tish.
  • center: .center – markazdan boshlanadi.
  • startRadius: 5 – ichki radius.
  • endRadius: 200 – tashqi radius (shakl balandligiga mos).

Moslashtirish

RadialGradient(
    gradient: Gradient(colors: [
        Color(red: 0.0, green: 0.5, blue: 1.0),
        Color(red: 0.0, green: 0.3, blue: 0.8)
    ]),
    center: .leading,
    startRadius: 5,
    endRadius: 400
)
  • Markaz .leading (chap) qilib, endRadius: 400 bilan kengaytirildi – nozik gradient ko‘rinadi.

Angular Gradient

RoundedRectangle(cornerRadius: 25)
    .fill(
        AngularGradient(
            gradient: Gradient(colors: [Color.red, Color.blue]),
            center: .center,
            angle: .degrees(0)
        )
    )
    .frame(width: 300, height: 200)
  • AngularGradient – burchakli o‘tish (soat yo‘nalishiga o‘xshash).
  • center: .center – markazdan aylana.
  • angle: .degrees(0) – boshlang‘ich burchak (0° – o‘ngdan).

Burchakni o‘zgartirish

AngularGradient(
    gradient: Gradient(colors: [
        Color(red: 0.0, green: 0.5, blue: 1.0),
        Color(red: 0.0, green: 0.3, blue: 0.8)
    ]),
    center: .topLeading,
    angle: .degrees(225)
)
  • angle: .degrees(225) – 180° (chap) + 45° = yuqori chapdan pastga o‘tish.
  • center: .topLeading – gradientning bir qismi ko‘rinadi – nozik o‘tish hosil bo‘ladi.

Xulosa

Bu videoda SwiftUI’da gradientlarni ko‘rdik:

  • Linear Gradient – to‘g‘ri chiziqli.
  • Radial Gradient – dumaloq.
  • Angular Gradient – burchakli.

Ushbu gradientlar fonlar va ob’ektlar uchun professional ko‘rinish beradi. Keyingi videolarda ekran fonlariga gradient qo‘shishni ko‘ramiz. Bu qisqa video bo‘ldi – umid qilamanki, yoqdi! Men Nikman, bu SwiftUI Bootcamp va “Swiftful Thinking”, keyingi videoda ko‘rishguncha!

Buy mea coffee