Published on

SwiftUI da chiziqli, radial va burchakli gradientlar

Authors

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!

Buy mea coffee