Published on

SwiftUI-da matn qo'shish

Authors

Hammaga salom!

Hammaga salom, men Nikman! Bu kursdagi birinchi kod yozadigan videomiz – sizlar bilan baham ko‘rishdan juda xursandman. Bu videoda ekranga matn qo‘shishni ko‘rib chiqamiz.

Agar SwiftUI bilan tanish bo‘lsangiz, matn qo‘shish qanchalik oson ekanligini bilasiz. Lekin matn komponentiga qo‘shiladigan ajoyib imkoniyatlarni bilmasligingiz mumkin. Biz oddiy matnni qanday o‘zgartirishni – fontlar, ranglar, o‘lchamlar, harf oralig‘i, qator oralig‘i kabi ko‘p qiziqarli formatlash usullarini ko‘ramiz. Bu asosiy narsalar, lekin bilish muhim.

Agar bu juda oddiy tuyulsa, oldindan uzr so‘rayman – lekin qiziqarli narsalarga o‘tishdan oldin asoslarni qamrab olishimiz kerak. Bu kurs uchun tez va oson boshlang‘ich nuqta bo‘ladi. Keling, Xcode’ni ochamiz va boshlaymiz!

Yangi fayl yaratish

O‘tgan videoda 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 “TextBootcamp” deb qo‘ying.

Yangi fayl avtomatik ravishda Text komponenti bilan keladi – o‘ngdagi preview’da “Hello World” ko‘rinadi. Preview’ni ulash uchun “Resume” tugmasini bosing.

Eslatma: O‘tgan videoda ko‘rsatganimdek, Text("Hello World")ni qo‘lda yozish yoki yuqori o‘ngdagi “+” (Library) orqali qo‘shish mumkin edi. Hozir bu shablon sifatida tayyor.

Modifikatorlar

Endi oddiy matnni chiroyli qilish uchun modifikatorlar qo‘shamiz. Matnning eng aniq o‘zgarishi – fontni almashtirish, chunki hozir u oddiy standart fontda.

Inspector’ni ochsak (o‘ngda), matn uchun modifikatorlar ro‘yxatini ko‘ramiz:

  • Qo‘lda yozish mumkin, lekin yangi boshlovchilar uchun inspector qulay – mavjud variantlarni ko‘rsatadi.
  • Font: Xcode’da tayyor font o‘lchamlari bor – masalan, .title (sarlavha uchun), .caption (kichik matn).
Text("Hello World")
    .font(.title)
  • .font(.title) qo‘shsak, matn kattalashadi. Inspector’da “Title” tanlasak, kodga avtomatik qo‘shiladi.

Modifikatorlar qanday ishlaydi?

SwiftUI’da har qanday komponentga modifikator qo‘shish mumkin:

  • Komponentdan keyin . bilan yoziladi – masalan, Text("Hello World").font(.title).
  • Bir qatorda yoki keyingi qatorda yozish farq qilmaydi, agar orasida boshqa kod bo‘lmasa:
    Text("Hello World")
    .font(.title)
  • Bir nechta modifikator qo‘shilganda, o‘qish uchun qatorlarga bo‘lish qulay.

Fontlarni o‘zgartirish

Text("Hello World")
    .font(.caption)  // Kichik font
  • .caption – kichik matn. Standart font uchun .body ishlatamiz:
    .font(.body)

Font qalinligi (Weight)

Text("Hello World")
    .font(.body)
    .fontWeight(.semibold)  // Yarim qalin
  • .fontWeight – harf qalinligini o‘zgartiradi:
    • .heavy – juda qalin
    • .ultralight – juda nozik
    • .medium, .semibold – ko‘p ishlatiladi

Boshqa variantlar

Text("Hello World")
    .font(.body)
    // .fontWeight(.semibold)
    .bold()          // Qalin
    .underline()     // Tagiga chizish
    .italic()       // Egri
    .strikethrough() // Ustidagi chizish
  • .bold(), .underline(), .italic(), .strikethrough() – oson qo‘llaniladigan modifikatorlar.

Sharh qo‘shish uchun // ishlatamiz – sharh kulrang bo‘lib, kodga ta’sir qilmaydi:

// .fontWeight(.semibold)

Rangli underline va strikethrough

Text("Hello World")
    .font(.body)
    .underline(true, color: .red)      // Qizil tagiga chizish
    .strikethrough(true, color: .green) // Yashil ustiga chizish
  • .underline(true, color: .red) – rangli tagiga chizish.
  • .strikethrough(true, color: .green) – rangli ustiga chizish.

Maxsus font o‘lchami

Text("Hello World")
    .font(.system(size: 24, weight: .semibold, design: .rounded))
  • .system(size:weight:design:) – aniq o‘lcham berish:
    • size: 24 – font o‘lchami (pikselda).
    • weight: .semibold – qalinlik.
    • design: .rounded – font turi (.default, .monospace, .rounded, .serif).

Eslatma: Maxsus o‘lchamlar iPhone’da foydalanuvchi font sozlamalariga moslashmaydi. .body, .title kabi standartlar avtomatik moslashadi.

Matn formatlash

Text("Hello World this is the Swiftful Thinking Bootcamp I am really enjoying this course and learning a lot")
    .multilineTextAlignment(.leading)
  • .multilineTextAlignment – ko‘p qatorli matn tekislash:
    • .center (standart)
    • .leading (chap)
    • .trailing (o‘ng)

Qator oralig‘i

Text("Hello World this is the Swiftful Thinking Bootcamp I am really enjoying this course and learning a lot")
    .baselineOffset(10)  // Qatorlar orasiga 10 piksel
    .multilineTextAlignment(.leading)
  • .baselineOffset – qatorlar orasidagi masofa (10 – bo‘shliq, -10 – yuqoriga siljish).

Harf oralig‘i

Text("Hello World this is the Swiftful Thinking Bootcamp I am really enjoying this course and learning a lot")
    .kerning(10)  // Harflar orasiga 10 piksel
    .multilineTextAlignment(.leading)
  • .kerning – harflar orasidagi masofa.

Matn rangi

Text("Hello World this is the Swiftful Thinking Bootcamp I am really enjoying this course and learning a lot")
    .foregroundColor(.blue)  // Moviy rang
    .multilineTextAlignment(.leading)
  • .foregroundColor – matn rangi.

Ramka (Frame)

Text("Hello World this is the Swiftful Thinking Bootcamp I am really enjoying this course and learning a lot")
    .foregroundColor(.blue)
    .frame(width: 200, height: 100, alignment: .center)
    .multilineTextAlignment(.leading)
  • .frame – matnning chegarasini belgilaydi:
    • width: 200, height: 100 – matn qutisi o‘lchami.
    • alignment: .center – markazga tekislash.
  • Matn chegaradan tashqariga chiqsa kesiladi.

Avtomatik o‘lcham

Text("Hello World this is the Swiftful Thinking Bootcamp I am really enjoying this course and learning a lot")
    .foregroundColor(.blue)
    .frame(width: 200, height: 100, alignment: .center)
    .minimumScaleFactor(0.1)  // 10% gacha kichrayadi
    .multilineTextAlignment(.leading)
  • .minimumScaleFactor(0.1) – matn chegaraga sig‘ishi uchun 10% gacha kichrayadi.

Bir qatorli matn tekislash

Text("Hello World")
    .foregroundColor(.blue)
    .frame(width: 200, height: 100, alignment: .leading)
  • Ko‘p qator bo‘lmasa, .multilineTextAlignment ishlamaydi – .frame(alignment: .leading) bilan chapga tekislanadi.

Matn holatini o‘zgartirish

Text("Hello World")
    .foregroundColor(.blue)
    .lowercase()  // Kichik harf
    // .uppercase()  // Katta harf
    // .capitalized()  // Har bir so‘z bosh harfi katta
  • .lowercase(), .uppercase(), .capitalized() – matn holatini o‘zgartiradi.

Xulosa

Bu video oson va soddagina bo‘ldi – matn qo‘shish va formatlashni o‘rgandik. Keyingi videolarda yanada qiziqarli narsalarga o‘tamiz. Men Nikman, bu “Swiftful Thinking”, keyingi videoda ko‘rishguncha!

Buy mea coffee