Published on

SwiftUI da rang, UIColor, rang harflari va HEX ranglar

Authors

Bu videoda ranglar haqida gaplashamiz. Agar SwiftUI bilan tanish bo‘lsangiz, ekranga oddiy ranglar qo‘shishni bilasiz – SwiftUI’da standart ranglar mavjud: Color.red, Color.blue, Color.orange, Color.green va hokazo.

Lekin bu faqat oddiy ranglar – real ilovalarda ular har doim ham chiroyli ko‘rinmaydi. Men sizlarga dunyodagi istalgan rangni SwiftUI kodiga qanday moslashtirishni ko‘rsataman:

  • Oddiy ranglar (red, green, blue).
  • Ilg‘or: UIKit ranglarini SwiftUI’da ishlatish – masalan, iPhone tizim fon ranglari.
  • Color Literal – Xcode’da rang palitrasini ochish va dunyodagi har qanday rangga kirish, shu jumladan hex kodlar bilan.
  • Video oxirida ranglarni moslashuvchan qilish – yorug‘lik va qorong‘u rejimlar o‘rtasida o‘zgarishini ko‘rsataman.

Yangi fayl yaratish

Bir necha video oldin yaratgan Xcode loyihamizga qaytdim. Bu videodagi kod uchun yangi fayl yaratyapman:

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

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

Shakl va oddiy ranglar

Bu video ranglar haqida bo‘lgani uchun ekranga shakl qo‘shib, uning rangini o‘zgartiramiz:

RoundedRectangle(cornerRadius: 25)
    .frame(width: 300, height: 200)
    .fill(Color.red)
  • RoundedRectangle – yumaloq burchakli to‘rtburchak.
  • .fill(Color.red) – SwiftUI’ning standart qizil rangi bilan to‘ldirish.

SwiftUI’da tayyor ranglar:

  • Color.purple, Color.blue, Color.green va boshqalar – hex kodlarsiz ishlatiladi.

  • Preview’da rangni o‘zgartirib sinash oson:

    .fill(Color.purple)

Primary va Secondary

RoundedRectangle(cornerRadius: 25)
    .frame(width: 300, height: 200)
    .fill(Color.primary)
  • Color.primary – yorug‘lik rejimida qora, qorong‘u rejimida oq.
  • Preview’ni “Dark” rejimga o‘zgartirsak (Inspector > Scheme > Dark):
    • Color.primary oq bo‘ladi – matn uchun juda foydali, chunki har ikki rejimda o‘qiladi.

Color Literal

RoundedRectangle(cornerRadius: 25)
    .frame(width: 300, height: 200)
    .fill(Color(.sRGB, red: 0.0, green: 0.5, blue: 1.0, opacity: 1.0))
  • Color literal – rang palitrasini ochadi:
    1. Color deb yozing, “color literal”ni tanlang.
    2. Rang belgisini ikki marta bosing – palitra ochiladi.
  • Palitra imkoniyatlari:
    • Color Wheel – istalgan rang.
    • RGB Sliders – hex kod kiritish (masalan, #00FF00).
    • Grayscale, Crayons, Web Safe Colors, Spectrum.
  • Masalan, “Ocean” rangini tanlasak, preview’da ko‘rinadi.

UIKit ranglari

RoundedRectangle(cornerRadius: 25)
    .frame(width: 300, height: 200)
    .fill(Color(UIColor.secondarySystemBackground))
  • UIColor – UIKit ranglari SwiftUI’da ishlatilishi mumkin.
  • secondarySystemBackground – iPhone foniga mos keladigan och kulrang:
    • Yorug‘lik rejimida och kulrang, qorong‘u rejimida quyuqroq kulrang – avtomatik moslashadi.

Boshqa UIKit ranglari:

  • systemBackground, tertiarySystemBackground, systemFill – tizim fonlari va to‘ldirish uchun.

Rang aktivlari (Assets)

Assets.xcassets papkasida maxsus ranglar saqlanadi:

  1. Chapdagi “Assets.xcassets”ni oching.
  2. Pastdagi “+” > “Color Set” qo‘shing.
  3. Nomini “customColor” qilib o‘zgartiring.
  4. Inspector’da:
    • “Any” (yorug‘lik rejimi) uchun ko‘k rang tanlang.
    • “Dark” uchun qizil rang (masalan, “Strawberry”).

Koddagi foydalanish:

RoundedRectangle(cornerRadius: 25)
    .frame(width: 300, height: 200)
    .fill(Color("customColor"))
  • "customColor" – Assets’dagi rang nomi.
  • Preview’da yorug‘lik rejimida ko‘k, qorong‘u rejimida qizil ko‘rinadi.

Soyalar (Shadows)

RoundedRectangle(cornerRadius: 25)
    .frame(width: 300, height: 200)
    .fill(Color("customColor"))
    .shadow(radius: 10)
  • .shadow(radius:) – shaklga soya qo‘shadi (radius – soya kengligi).

Maxsus soya

RoundedRectangle(cornerRadius: 25)
    .frame(width: 300, height: 200)
    .fill(Color("customColor"))
    .shadow(color: Color("customColor").opacity(0.3), radius: 10, x: 20, y: 20)
  • color: – soya rangi (masalan, customColor bilan moslashtiramiz).
  • .opacity(0.3) – shaffoflik (0.3 – 30%).
  • x: 20, y: 20 – soya joylashuvi (o‘ngga va pastga 20 piksel).

Xulosa

Bu videoda SwiftUI’da ranglarni qanday qo‘shishni o‘rgandik:

  • Oddiy ranglar (Color.red, Color.primary).
  • Color Literal bilan har qanday rang.
  • UIKit’dan tizim ranglari.
  • Assets’da maxsus ranglar – yorug‘lik va qorong‘u rejimlar uchun.
  • Shakllarga soya qo‘shish.

Endi siz ilovangizga istalgan rangni qo‘sha olasiz!

Buy mea coffee