SwiftUI-da ViewThatFits

Bu videoda ViewThatFits komponentini ko'ramiz. Bu vosita bir nechta variant ichidan ekranga eng mos kelganini avtomatik tanlaydi. Agar kontent dinamik bo'lsa va turli qurilmalarda turlicha sig'ishi mumkin bo'lsa, ViewThatFits har bir holatda eng mos variantni o'zi aniqlaydi.

Yangi fayl yaratish

Navigatorda o'ng tugma bosib yangi SwiftUI fayli yarating. Uni ViewThatFitsBootcamp deb nomlang va Create tugmasini bosing.

Boshlang'ich misol

struct ViewThatFitsBootcamp: View {
    var body: some View {
        ZStack {
            Color.red
                .ignoresSafeArea()

            Text("Bu foydalanuvchiga ko'rsatmoqchi bo'lgan matn")
                .font(.headline)
        }
        .frame(height: 300)
        .padding(16)
    }
}

Matn berilgan joyga sig'maganda kesilib qolishi mumkin.

An'anaviy yechim — lineLimit va minimumScaleFactor

Matnni kichraytirib moslashtirish uchun odatda shu ikki modifier ishlatiladi:

Text("Bu foydalanuvchiga ko'rsatmoqchi bo'lgan matn")
    .font(.headline)
    .lineLimit(1)
    .minimumScaleFactor(0.3)

• lineLimit(1) — matn faqat bitta qatorga cheklanadi
• minimumScaleFactor(0.3) — matn kerak bo'lsa asl o'lchamining 30% gacha kichrayadi

Ko'p hollarda bu yetarli. Lekin sarlavha va header bo'limlarida matnni kichraytirish istalmagan holatlar ham bo'ladi — bunday paytda matnning o'zi qisqaroq versiyaga almashtirilishi kerak.

ViewThatFits — eng mos variantni tanlash

ViewThatFits ichidagi bir nechta view-ni ustuvorlik tartibida beradi va birinchi sig'adigan variantni tanlaydi:

ViewThatFits {
    Text("Bu foydalanuvchiga ko'rsatmoqchi bo'lgan matn")
        .font(.headline)

    Text("Bu ko'rsatmoqchi bo'lgan matn")
        .font(.headline)

    Text("Bu matn")
        .font(.headline)
}

Ishlash tartibi:

1. Avval birinchi variant sinab ko'riladi
2. Agar berilgan joyga sig'sa — o'sha ko'rsatiladi
3. Sig'masa — ikkinchi variant sinaladi
4. Va hokazo, ro'yxat oxirigacha

Bir vaqtning o'zida faqat bitta variant ekranda ko'rinadi.

Muhim nozik jihat

ViewThatFits ustuvorligi har doim bitta qatorga sig'ishni afzal ko'radi — hatto qisqaroq variant ikki qatorga sig'sa ham, agar undan oldingi variant ikki qatorga sig'masa, tizim keyingi (qisqaroq) variantga o'tadi:

// Joy kichraytirilganda:
ViewThatFits {
    Text("Bu foydalanuvchiga ko'rsatmoqchi bo'lgan matn") // 2 qatorga ham sig'maydi
    Text("Bu ko'rsatmoqchi bo'lgan matn")                  // 2 qatorga sig'adi, lekin...
    Text("Bu matn")                                         // ...1 qatorga sig'gani uchun shu tanlanadi
}

Bu birinchi marta biroz g'alati tuyulishi mumkin: ikkinchi variant texnik jihatdan joyga sig'sa-da (ikki qatorda), tizim baribir uchinchi, qisqaroq variantni tanlaydi — chunki u bitta qatorga to'liq sig'adi.

in: parametri — yo'nalishni belgilash

ViewThatFits qaysi yo'nalish bo'yicha (gorizontal yoki vertikal) tekshirish kerakligini belgilash imkonini beradi:

ViewThatFits(in: .horizontal) {
    Text("Bu foydalanuvchiga ko'rsatmoqchi bo'lgan matn")
    Text("Bu ko'rsatmoqchi bo'lgan matn")
    Text("Bu matn")
}

ViewThatFits(in: .vertical) {
    // ...
}

To'liq kod

struct ViewThatFitsBootcamp: View {
    var body: some View {
        ZStack {
            Color.red
                .ignoresSafeArea()

            ViewThatFits {
                Text("Bu foydalanuvchiga ko'rsatmoqchi bo'lgan matn")
                    .font(.headline)

                Text("Bu ko'rsatmoqchi bo'lgan matn")
                    .font(.headline)

                Text("Bu matn")
                    .font(.headline)
            }
        }
        .frame(height: 300)
        .padding(16)
    }
}

Qachon ishlatish kerak?

ViewThatFits quyidagi holatlarda foydali:

• Sarlavha yoki header matnlarini kichraytirmasdan moslashtirish kerak bo'lsa
• Bir xil ma'noni bildiruvchi bir nechta uzunlikdagi matn varianti mavjud bo'lsa
• Matn faqat Text emas, balki istalgan view kombinatsiyasi bo'lishi mumkin

lineLimit va minimumScaleFactor ko'pchilik holatlar uchun yetarli bo'ladi. ViewThatFits esa matn o'lchami emas, matnning o'zi almashtirilishi kerak bo'lgan maxsus holatlar uchun mo'ljallangan.

Xulosa

Bu videoda o'rgandik:

• ViewThatFits — bir nechta view variantidan eng mosini avtomatik tanlovchi komponent
• Variantlar ustuvorlik tartibida beriladi, birinchi sig'adigani ishlatiladi
• Tizim bitta qatorga sig'ishni ustuvor deb hisoblaydi, ko'p qatorli variantlardan ko'ra
• in: .horizontal yoki in: .vertical — tekshirish yo'nalishini belgilaydi
• lineLimit + minimumScaleFactor — matnni kichraytirish uchun; ViewThatFits — matnni almashtirish uchun