Published on: Wednesday, April 22, 2026

Dynamic Type va foydalanuvchanlik

Authors

Name
ShoxruxC
@iOSdasturchi

iOS foydalanuvchilari Sozlamalarda o'zlariga mos matn o'lchamini tanlaydi. Ba'zilar ko'zlariga yordam uchun kattalashtiradi, boshqalar ekranda ko'proq kontent sig'dirish uchun kichraytiradi. Ilovangiz bu sozlamani hurmat qilishi kutiladi.

Yangi boshlovchilar tushadigan tuzoq — .font(.system(size: 16)) kabi qattiq o'lcham. Bu son hech qachon o'zgarmaydi.

Yechim: .font(.body), .font(.headline) kabi semantik matn uslublarini ishlating — tizim o'lchamni siz uchun boshqaradi.

Swift•

AccessibleRowView.swift

import SwiftUI

struct AccessibleRowView: View {
// @ScaledMetric bu qiymatni Dynamic Type bilan mutanosib o'zgartiradi
@ScaledMetric var avatarSize: CGFloat = 48

  var body: some View {
      HStack(alignment: .top, spacing: 12) {
          // @ScaledMetric tomonidan boshqariladigan o'lcham
          Circle()
              .fill(.blue)
              .frame(width: avatarSize, height: avatarSize)

          VStack(alignment: .leading, spacing: 4) {
              // Semantik matn uslubi — avtomatik o'lchami, qattiq o'lcham yo'q
              Text("Jane Doe")
                  .font(.headline)

              // Kichikroq semantik uslub — ikkinchi darajali ma'lumot uchun
              Text("2023 yilda qo'shildi")
                  .font(.subheadline)
                  .foregroundStyle(.secondary)
          }
          Spacer()
      }
      .padding()
  }

}

Qator	Vazifasi
`@ScaledMetric var avatarSize: CGFloat = 48`	Foydalanuvchi Dynamic Type sozlamasiga mutanosib o'lchamlangan xususiyat. Standart o'lchamda 48, eng katta accessibility o'lchamida 80+ bo'lishi mumkin.
`.font(.headline)`	Semantik matn uslubi. SwiftUI Dynamic Type bilan birga o'lchamni avtomatik boshqaradi.
`.font(.subheadline)`	Sana, sarlavhacha va ikkinchi darajali yorliqlar uchun mos kichikroq semantik uslub.
`HStack(alignment: .top)`	Avatar va matnni tepadan hizalaydi. Katta matn o'lchamida matn bir necha qatorga o'tganda noto'g'ri ko'rinishning oldini oladi.

Semantik matn uslublari

VStack(alignment: .leading, spacing: 8) {
    Text("Katta sarlavha").font(.largeTitle)    // Eng katta
    Text("Sarlavha").font(.title)
    Text("Sarlavha 2").font(.title2)
    Text("Sarlavha 3").font(.title3)
    Text("Sarlavha").font(.headline)            // Ko'p joyda ishlatiladi
    Text("Asosiy matn").font(.body)             // Standart o'qish matni
    Text("Qo'shimcha sarlavha").font(.subheadline)
    Text("Izoh").font(.footnote)
    Text("Yozuv").font(.caption)                // Eng kichik
    Text("Yozuv 2").font(.caption2)
}

@ScaledMetric variantlari

// Standart — barcha matn uslublari bilan mutanosib
@ScaledMetric var ikonkaO'lchami: CGFloat = 20

// Maxsus uslubga nisbatan — headline bilan mos ketadi
@ScaledMetric(relativeTo: .headline) var ikonkaO'lchami: CGFloat = 20

Image(systemName: "star.fill")
    .frame(width: ikonkaO'lchami, height: ikonkaO'lchami)

.minimumScaleFactor — ehtiyotkorlik bilan

// Matn o'ramdan oldin 50% gacha kichrayishiga ruxsat beradi
// Faqat o'rash joylashuvni buladigan holda ishlating
Text("Navigatsiya sarlavhasi")
    .font(.headline)
    .minimumScaleFactor(0.5)
    .lineLimit(1)

// ✅ Matn matni uchun o'rash afzal — juda kichrayish o'qishni qiyinlashtiradi
Text("Uzun tavsif matni bu yerda")
    .font(.body)
    // minimumScaleFactor ishlatmang — o'rashga ruxsat bering

Tezkor ma'lumotnoma

Sintaksis	Vazifasi
`.font(.headline)`	Semantik uslub — Dynamic Type bilan avtomatik
`.font(.system(size: 16))`	❌ Qattiq o'lcham — Dynamic Type ni hurmat qilmaydi
`@ScaledMetric var o'lcham: CGFloat = 48`	Matn o'lchamiga mutanosib o'lchamlangan xususiyat
`@ScaledMetric(relativeTo: .headline)`	Maxsus uslubga nisbatan o'lchamlash
`.minimumScaleFactor(0.5)`	Joylashuv buzilganda kichrayishga ruxsat — ehtiyotkorlik bilan

🎯 Topshiriq: Dynamic Type sinovdan o'tkazish

Profil qatori ko'rinishi yarating: avatar uchun @ScaledMetric li doira, ism uchun .headline va qo'shilgan sana uchun .subheadline. Xcode Preview da matn o'lchami slayderini eng katta accessibility o'lchamiga o'rnating. Avatar va matn mutanosib ravishda kattayadimi? HStack(alignment: .top) qo'shing — katta matn o'lchamida qanday farq qilishini ko'ring.