Published on

SwiftUI da Frames va Alignments

Authors

Yana xush kelibsiz!

Hammaga yana xush kelibsiz! Men Nikman. Bu kursda hozirgacha juda oddiy va oson narsalarni ko‘rib chiqdik, ammo endi yanada murakkab mavzularga o‘tish vaqti keldi. Shu videodan oldin to‘xtab, shuni eslab qoling: bu video va keyingi ikki video butun bootcampdagi eng muhim videolar bo‘lishi mumkin.

Chunki bu uch video ekrandagi ob’ektlarni tekislash bilan bog‘liq – bu yerda ko‘p yangi boshlovchilar qiyinchilikka duch keladi. Shu uch video qanchalik muhimligini va nimalarni muhokama qilayotganimizni yaxshi tushunishni yetarlicha ta’kidlay olmayman. Bu videoda esa freymlar (ramkalar) haqida gaplashamiz.

Ekranga qo‘shilgan har bir ob’ekt avtomatik ravishda freymga ega – freym bu ob’ekt joylashgan to‘rtburchak maydon. Bu juda oddiy tuyuladi, lekin yangi boshlovchilar ko‘pincha bu yerda adashadi, chunki freymlar standartsiz ko‘rinmaydi – ularni faqat bosganimizda yoki fon rangi qo‘shganimizda ko‘rish mumkin. Men sizlarga freymlarni qanday moslashtirishni – o‘lcham va tekislashni o‘zgartirishni, shuningdek, freymlarni debug qilishni – ularning joylashuvini aniq tekshirishni ko‘rsataman.

Eslatma: Freymlar ilovada juda muhim – chunki ekranga qo‘shilgan har bir ob’ekt (rasm, shakl, matn yoki ro‘yxat) freymga ega va biz uni o‘zgartirish orqali moslashtiramiz.

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

Fayl ochilgach, o‘ngdagi preview’da “Resume” tugmasini bosing – preview ulanadi. Chap va o‘ng panellarni yashirdim – ekran kengroq bo‘lishi uchun.

Freymlar bilan ishlash

Ekranga qo‘shilgan har bir element – matn, rasm yoki shakl – freymga ega. Standart matn bilan boshlaymiz:

Text("Hello World")
  • Preview’da matn ustiga bossak, ko‘k chiziq bilan freym ko‘rinadi – bu uning chegarasi.

Fon rangi bilan ko‘rish

Text("Hello World")
    .background(Color.red)
  • .background(Color.red) – freymni ko‘rish uchun fon rangi qo‘shadi.
  • Standartda freym ichidagi kontentga (matnga) mos keladi.

Kontent ko‘paytirsak:

Text("Hello World again")
    .background(Color.red)
  • Freym avtomatik ravishda matn uzunligiga moslashadi.

Freym o‘lchamini sozlash

Text("Hello World")
    .background(Color.green)
    .frame(width: 100, height: 100, alignment: .center)
    .background(Color.red)
  • .frame(width: 100, height: 100, alignment: .center) – freymni qo‘lda sozlaydi:
    • width: 100, height: 100 – 100x100 piksel.
    • alignment: .center – kontentni markazga tekislaydi.
  • Fonlar qatlamlashadi: matn – yashil fon – kichik freym – qizil fon.

Qatlamlash

Text("Hello World")
    .background(Color.green)
    .frame(width: 300, height: 300, alignment: .center)
    .background(Color.red)

  • Freym kattalashdi (300x300), lekin kontent (matn va yashil fon) markazda qoldi.

  • Alignment freym ichidagi kontentni joylashtiradi:

    .frame(width: 300, height: 300, alignment: .leading)
    • .leading – chapga tekislaydi.
    • .topLeading – yuqori chapga.

Maksimal va minimal freymlar

Text("Hello World")
    .background(Color.green)
    .frame(maxWidth: .infinity, alignment: .leading)
    .background(Color.red)
  • .frame(maxWidth: .infinity) – freymni ota freymning maksimal kengligiga yetkazadi.
  • Alignment bilan matn chapga suriladi.

Balandlik qo‘shish

Text("Hello World")
    .background(Color.green)
    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
    .background(Color.red)
  • maxHeight: .infinity – maksimal balandlik.
  • .top – kontentni yuqoriga tekislaydi.

Freymlarni qatlamlash

Text("Hello World")
    .background(Color.red)
    .frame(height: 100)
    .background(Color.orange)
    .frame(width: 150)
    .background(Color.purple)
    .frame(maxWidth: .infinity)
    .background(Color.pink)
    .frame(height: 400)
    .background(Color.green)
    .frame(maxHeight: .infinity)
    .background(Color.yellow)
  • Har bir freym qatlam sifatida qo‘shildi:
    • Matn – qizil fon – 100 balandlik – to‘q sariq fon – 150 kenglik – binafsha fon – maksimal kenglik – pushti fon – 400 balandlik – yashil fon – maksimal balandlik – sariq fon.

Tekislashni sozlash

  • Sariq freym (maxHeight: .infinity) uchun:

    .frame(maxHeight: .infinity, alignment: .top)
    • Kontent yuqoriga suriladi.

  • Pushti freym (maxWidth: .infinity) uchun:

    .frame(maxWidth: .infinity, alignment: .leading)
    • Chapga tekislanadi.

  • To‘q sariq freym (height: 100) uchun:

    .frame(height: 100, alignment: .top)
    • Yuqoriga tekislanadi.

Debugging uchun fon ranglari

Freymlarni aniq ko‘rish uchun har bir qatlamga fon rangi qo‘shish foydali:

  • Agar ob’ektlar noto‘g‘ri joylashsa, fon ranglari freym chegaralarini ko‘rsatib, xatni topishga yordam beradi.
  • Ilovada bunday ranglar qo‘llanilmaydi, lekin rivojlantirishda layoutni sozlash uchun juda muhim.

Xulosa

Bu video zerikarli bo‘lishi mumkin, lekin freymlar juda muhim – har bir elementda mavjud va biz ularni o‘lcham va tekislash bilan moslashtiramiz. Siz:

  • Freymlarni qanday qo‘shish va qatlamlashni,
  • O‘lcham (width, height, maxWidth, maxHeight) va tekislashni sozlashni,
  • Debugging uchun fon ranglaridan foydalanishni o‘rgandingiz.

Umid qilamanki, bu videodan foyda ko‘rdingiz! Men Nikman, bu “Swiftful Thinking”, keyingi videoda ko‘rishguncha!

Buy mea coffee