Published on

SwiftUI ilovasiga rasmlar qo'shish

Authors

Hammaga salom!

Hammaga salom! Men Nikman. Bu videoda rasmlar haqida gaplashamiz. Rasmlar har qanday ilova uchun juda muhim – har bir ilovada profil rasmlari, fon rasmlari va boshqa ko‘p joylarda rasmlar ko‘rinadi. Rasmlar ilovani chiroyli qilishda katta rol o‘ynaydi, shuning uchun ularni Xcode loyihasiga qanday qo‘shish va moslashtirishni bilish juda muhim.

Men sizlarga rasmlarni qanday:

  • Shaklini o‘zgartirish (dumaloq yoki to‘rtburchak qilish),
  • O‘lchamini sozlash (kattalashtirish yoki kichraytirish),
  • Nisbatini moslashtirish – kerakli ko‘rinishga keltirishni ko‘rsataman.

Bu videodagi ko‘p narsa o‘tgan videodagi (tizim ikonkalar) bilan o‘xshash – chunki SwiftUI’da ikonkalar ham, rasmlar ham bir xil Image komponentidan foydalanadi. Shu sababli ko‘p modifikatorlar bir xil. O‘tgan videodan ba’zi narsalarni takrorlayman, lekin ikonkalar va rasmlar ilovalarda hamma joyda ishlatiladi, shuning uchun ularni shakllantirish va o‘lchamini sozlashni yaxshi tushunish muhim.

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

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

Rasmlarni qo‘shish

O‘tgan videoda tizim ikonkalarni ko‘rdik – ular Xcode’da tayyor bo‘ladi. Ammo rasmlar Xcode’da oldindan yuklanmagan – ularni loyihaga qo‘lda qo‘shish kerak:

  1. Assets.xcassets papkasini oching (chapda).
  2. Kompyuterdagi rasmlarni tanlab, Assets papkasiga sudrab qo‘ying.

Menda ikkita rasm bor: “google” va “the-rock”. Nomlarni o‘zgartirish mumkin (masalan, “the-rock”ni “therock” qilish), lekin kodda foydalanish uchun aniq nomni bilish muhim.

Rasmni kodga qo‘shish

Image("therock")
  • Image("therock") – “therock” nomli rasmni qo‘shadi.
  • Agar ko‘rinmasa:
    • Command + Shift + K (Clean Build Folder) bilan tozalang.
    • Preview’ni “Resume” bilan qayta ulang.

Rasmni moslashtirish

Rasm katta chiqdi – uni sozlaymiz:

Image("therock")
    .resizable()
    .frame(width: 300, height: 200)
  • .resizable() – rasmni ramkaga moslashtiradi.
  • .frame(width: 300, height: 200) – chegara o‘lchami.

Nisbatni sozlash

Image("therock")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 300, height: 200)
  • .aspectRatio(contentMode:):
    • .fill – ramkani to‘ldiradi (chekkalari kesilishi mumkin).
    • .fit – ramkaga sig‘adi, proportsi saqlanadi.

Yoki:

Image("therock")
    .resizable()
    .scaledToFill()
    .frame(width: 300, height: 200)
  • .scaledToFill() yoki .scaledToFit() – qisqa shakl.

Kesish

Image("therock")
    .resizable()
    .scaledToFill()
    .frame(width: 300, height: 200)
    .clipped()
  • .clipped() – ramkadan tashqariga chiqqan qismlarni kesadi – .fill bilan ko‘p ishlatiladi.

Burchaklarni yumaloqlash

Image("therock")
    .resizable()
    .scaledToFill()
    .frame(width: 300, height: 200)
    .cornerRadius(30)
  • .cornerRadius(30) – burchaklarni yumaloq qiladi.

Dumaloq qilish

Image("therock")
    .resizable()
    .scaledToFill()
    .frame(width: 300, height: 300)
    .cornerRadius(150)
  • Ramka kvadrat bo‘lsa (300x300) va cornerRadius yarim o‘lchamga (150) teng bo‘lsa – doira hosil bo‘ladi.

ClipShape bilan shakllantirish

Image("therock")
    .resizable()
    .scaledToFill()
    .frame(width: 300, height: 200)
    .clipShape(Circle())
  • .clipShape() – rasmni shaklga kesadi:
    • Circle() – dumaloq.
    • RoundedRectangle(cornerRadius: 25) – yumaloq to‘rtburchak.
    • Ellipse() – oval shakl.
  • Profil rasmlari uchun doira ko‘p ishlatiladi.

Rasmdan ikonka yasash

Image("google")
    .resizable()
    .scaledToFit()
    .frame(width: 300, height: 200)
    .foregroundColor(.red)
  • .foregroundColor(.red) – rang o‘zgarmaydi, chunki rasm shablon emas.

Shablon qilish

Image("google")
    .renderingMode(.template)
    .resizable()
    .scaledToFit()
    .frame(width: 300, height: 200)
    .foregroundColor(.red)
  • .renderingMode(.template) – rasmni shablon qilib, rang o‘zgartirish imkonini beradi.
  • Eslatma: Faqat shaffof fonli rasmlar uchun ishlaydi – fonli rasmlarda butun rasm bir rangga aylanadi.

Assets’da sozlash

Har safar .renderingMode yozmaslik uchun:

  1. Assets.xcassets > “google” rasmini tanlang.
  2. Inspector’da “Render As”ni “Default”dan “Template”ga o‘zgartiring.
  3. Kodni tozalash (Command + Shift + K) va preview’ni yangilash (“Resume”).
Image("google")
    .resizable()
    .scaledToFit()
    .frame(width: 300, height: 200)
    .foregroundColor(.red)
  • Endi avtomatik shablon sifatida ishlaydi.

Xulosa

Bu videoda SwiftUI’da rasmlarni:

  • Yuklash – Assets.xcassets orqali.
  • Moslashtirish – o‘lcham, shakl, nisbat bilan.
  • Shablon qilish – rang o‘zgartirish uchun .renderingMode yoki Assets sozlamasi bilan ko‘rdik.

Rasmlar ilovada hamma joyda ishlatiladi – endi siz ularni qo‘sha va sozlay olasiz! Men Nikman, bu “Swiftful Thinking”, keyingi videoda ko‘rishguncha!

Buy mea coffee