Published on

SwiftUI da tizim piktogrammalari, ko'p rangli piktogrammalar va SF belgilari

Authors

Yana xush kelibsiz!

Hammaga yana xush kelibsiz! Men Nikman. Bu videoda ikonkalar haqida gaplashamiz. SwiftUI ilovalarida foydalanish uchun Xcode’da minglab tayyor tizim ikonkaları mavjud.

Bu ikonkalar Apple jamoasi tomonidan yaratilgan va dasturchilar uchun juda qulay – har safar maxsus ikonka yaratib, uning piksel o‘lchamlarini sozlash shart emas. Tizim ikonkaları o‘zicha moslashtiriladi – men sizlarga ularni ilovaga qanday qo‘shish, rang va o‘lchamini o‘zgartirishni ko‘rsataman, shuningdek, barcha mavjud ikonkalar katalogini qanday ko‘rishni tushuntiraman.

Ishlab chiqarish ilovalarida ko‘pincha maxsus ikonkalar ishlatiladi, lekin yangi boshlovchi yoki dasturchi sifatida tizim ikonkalarıni tavsiya qilaman – ular oson va moslashuvchan. Men ham o‘z ilovalarim va kurslarimda ulardan foydalanaman. Apple minglab tayyor ikonka taqdim etgan – deyarli har qanday ehtiyojga mos keladi.

Yangi fayl yaratish

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 “IconsBootcamp” deb qo‘ying.

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

Tizim ikonkalarini qo‘shish

Xcode’da tayyor tizim ikonkaları mavjud. Ikonka qo‘shish uchun:

Image(systemName: "heart.fill")
  • Image(systemName:) – tizim ikonkalari uchun ishlatiladi.
  • "heart.fill" – doira ichida to‘ldirilgan yurak ikonkasi. Preview’da darhol ko‘rinadi.

O‘lchamni o‘zgartirish

Image(systemName: "heart.fill")
    .font(.title)
  • .font() – matndagi kabi o‘lchamni o‘zgartiradi:
    • .title – kattaroq.
    • .largeTitle – yanada katta.
    • .caption – kichik.
  • Tizim o‘lchamlari (title, body) iPhone sozlamalariga moslashadi.

Maxsus o‘lcham

Image(systemName: "heart.fill")
    .font(.system(size: 200))
  • .system(size:) – aniq piksel o‘lchami (masalan, 200).

Rang o‘zgartirish

Image(systemName: "heart.fill")
    .font(.system(size: 200))
    .foregroundColor(.green)
  • .foregroundColor() – ikonka rangini o‘zgartiradi (Color.green, Color literal yoki boshqa rang).
  • Gradient qo‘llab-quvvatlanmaydi.

Ramka bilan moslashtirish

Image(systemName: "heart.fill")
    .frame(width: 300, height: 300)
    .resizable()
  • .frame(width:height:) – ikonka chegarasini belgilaydi.
  • .resizable() – ramkaga moslashadi, lekin o‘lcham avtomatik o‘zgarmaydi.

Nisbatni sozlash

Image(systemName: "heart.fill")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 300, height: 300)

  • .aspectRatio(contentMode:):

    • .fill – ramkani maksimal to‘ldiradi (chekkalari kesilishi mumkin).
    • .fit – ramkaga sig‘adi, proport siyasi saqlanadi.

  • Yoki:

    Image(systemName: "heart.fill")
    .resizable()
    .scaledToFill()
    .frame(width: 300, height: 300)
    • .scaledToFill() yoki .scaledToFit() – .aspectRationing qisqa shakli.

Kesish

Image(systemName: "heart.fill")
    .resizable()
    .scaledToFill()
    .frame(width: 300, height: 300)
    .clipped()
  • .clipped() – ramkadan tashqariga chiqqan qismlarni kesadi.

Ikonka katalogi

Tizim ikonkalari ro‘yxatini ko‘rish uchun:

  • Google’da “developer.apple.com/design/resources” yoki “SF Symbols” deb qidiring.
  • SF Symbols ilovasini bepul yuklab oling – unda 2400+ ikonka mavjud.

Ilovada:

  • Ikonka nomini o‘ng tugma bilan “Copy Name” qilib nusxa oling (masalan, “paperplane.fill”).
  • Kodga qo‘shing:
    Image(systemName: "paperplane.fill")
    .font(.largeTitle)

Boshqa misol:

Image(systemName: "books.vertical.fill")
    .font(.largeTitle)

Tez-tez ishlatiladiganlar

  • "xmark" – oddiy X belgisi:
    Image(systemName: "xmark")
    .font(.largeTitle)

Ko‘p rangli ikonkalar

Apple SF Symbols’da ko‘p rangli ikonkalarni qo‘shgan:

  • SF Symbols ilovasida “Multicolor” yorlig‘ini oching, rangli ikonkalar ko‘rinadi.
  • Misol: “person.fill.badge.plus” – ko‘k va yashil ranglarda:
    Image(systemName: "person.fill.badge.plus")
    .font(.largeTitle)
  • Standartda bitta rang bo‘ladi, lekin:
    Image(systemName: "person.fill.badge.plus")
    .renderingMode(.original)
    .font(.largeTitle)
  • .renderingMode(.original) – asl ranglarni saqlaydi (yashil “+” belgisi).
  • Faqat ko‘k qism o‘zgartiriladi, qolgan ranglar (yashil, qizil) o‘zgarmaydi.

Xulosa

Bu videoda SwiftUI’dagi tizim ikonkalarni ko‘rdik:

  • Ularni qanday qo‘shish – Image(systemName:).
  • SF Symbols ilovasida ro‘yxatni ko‘rish.
  • O‘lcham (.font), rang (.foregroundColor), ramka (.frame, .resizable) bilan moslashtirish.
  • Ko‘p rangli ikonkalar uchun .renderingMode(.original).

Tizim ikonkalar har bir ilovada ishlatiladi – maxsus ikonkalarni dizayner yaratishi va o‘lchamlarini sozlashi kerak bo‘lsa-da, tizim ikonkalar oson va qulay. Keyingi videoda o‘z rasmlarimiz va maxsus ikonkalarni qo‘shishni ko‘ramiz. Men Nikman, bu “Swiftful Thinking”, keyingi videoda ko‘rishguncha!

Buy mea coffee