Published on

SwiftUI da rang, UIColor, rang harflari va HEX ranglar

Authors

Hammaga salom!

Hammaga salom! Men Nikman. 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! Men Nikman, bu “Swiftful Thinking”, keyingi videoda ko‘rishguncha!

Buy mea coffee