Published on

iOS 15'da SwiftUI uchun System Material va Background'lar

Authors

Hammaga salom, xush kelibsiz! Men β€” Nik, bu Swiftful Thinking, va bu, ehtimol, butun pleylistdagi eng oson videolardan biri bo'ladi. iOS 15'da Apple SwiftUI'ga tizim materiallari (system materials)ni qo'shdi. Bizda bu materiallar UIKit'da allaqachon ancha vaqtdan beri mavjud edi, ammo SwiftUI'da yo'q edi β€” shuning uchun ularning endi SwiftUI'da ham mavjud bo'lishi meni juda hayajonlantiradi. Ushbu videoda biz ularning nima ekanligini va qanday qo'llashni tezda ko'rib chiqamiz β€” menimcha, beshta variant bor, va biz ularning barchasini ko'rib chiqamiz.

Bular, asosan, view'larimizga qo'yishimiz mumkin bo'lgan fonlar, xolos β€” ammo bular muayyan ranglar emas, balki ozgina shaffoflikka ega bo'lgan tizim materiallari, shuning uchun ular juda tabiy ko'rinadigan fon hosil qiladi. Agar materialning orqasiga rasm yoki shunga o'xshash narsa qo'ysangiz, u biroz "shimirilib" ko'rinadi, bu esa juda tabiy ko'rinish beradi.

Bu β€” Apple o'zining ko'plab ilovalarida, masalan Maps yoki FaceTime ilovalarida ishlatadigan fonlar β€” siz u yerda ko'rgan fonlar, aynan shu tizim materiallaridan yasalgan. Bu juda oson, keling, Xcode'ga o'tib, kod yozishni boshlaylik.

Yangi loyiha fayli yaratish

Yana bizning Swiftful Thinking bootcamp loyihamizdamiz, va bugun biz iOS 15'da SwiftUI'ga qo'shilgan fon materiallarini ko'rib chiqamiz β€” bular juda ajoyib. Navigator'da o'ng tugmani bosib, yangi fayl yaratamiz β€” bu SwiftUI View bo'ladi, va buni BackgroundMaterialsBootcamp deb ataymiz. "Create" tugmasini bosamiz. Bu, ehtimol, butun pleylistdagi eng oson videolardan biri bo'ladi β€” bu mavzu, aslida, alohida video talab qilmasligi ham mumkin edi, chunki ishlatilishi juda sodda, ammo men sizlarga bu xususiyatni ko'rsatishni xohladim, chunki, menimcha, Apple bizni buni ishlatishga undamoqda β€” ular o'z ilovalarida bundan doimiy foydalanadi.

Oddiy ekran yaratish

Avval sodda bir ekran yaratishdan boshlaymiz. Ekranga VStack qo'yamiz, ichiga Spacer qo'shib, hammasini pastga itarib qo'yamiz, so'ngra pastga tezkor bir VStack qo'shamiz. Shu ichki VStackga balandligi, masalan, 350 bo'lgan frame beramiz, fon rangi sifatida esa Color.blackni beramiz. Ichiga, hozircha, shunchaki "hi" deb yozilgan matn qo'shamiz. Bunga maksimal kengligi cheksiz bo'lgan frame ham beramiz, va burchak radiusini, masalan, 30 qilamiz. Butun tashqi VStackga esa, buni pastgacha to'liq olib borish uchun, hozircha xavfsiz hudud (safe area) chegaralarini e'tiborsiz qoldiramiz (.ignoresSafeArea()):

VStack {
    Spacer()

    VStack {
        Text("hi")
    }
    .frame(height: 350)
    .frame(maxWidth: .infinity)
    .background(Color.black)
    .cornerRadius(30)
}
.ignoresSafeArea()

Fon rasmi qo'shish va shaffoflik muammosi

Endi shu butun tarkibga fon qo'shamiz β€” bu safar rasm qo'yaman. Mendagi assets papkasida, ushbu kursning avvalgi bir videosidan qolgan, "the rock" deb nomlangan rasm bor β€” buni qaytadan ishlataman (siz, albatta, istalgan rasmdan foydalanishingiz mumkin, bu unchalik muhim emas β€” biz shunchaki ekranga fon qo'shmoqdamiz, hatto rangdan ham foydalanishingiz mumkin, ammo men rasmdan foydalanaman).

Mana, rasmimiz chiqdi β€” hozircha uning o'lchamini moslashtirmayman, u ekrandan ancha kattaroq, ammo biz hozir bunga e'tibor qaratmayapmiz. Sizlarga ko'rsatmoqchi bo'lgan narsa shu: biz bu kabi rang yoki rasm fonlardan foydalanganimizda, bular xira (opaque) bo'ladi β€” biz bu fon rasmining orqasida hech narsani ko'ra olmaymiz. Albatta, rangni background.opacity(0.5) kabi qilib, biroz shaffof qilishimiz mumkin, va bu yomon ko'rinmaydi β€” ammo bu Apple Maps yoki FaceTime kabi ilovalarda ishlatadigan fonlar kabi professional va tabiy ko'rinmaydi, chunki ular, aslida, tizim materiallaridan foydalanadi.

Tizim materiallari (System Materials) bilan tanishish

Shuning uchun, fonga rang qo'shish o'rniga, nuqta qo'yib, materiallarni izlaymiz. Agar material deb yozsak, bizga bir nechta tugatish (completion) variantlari ko'rsatiladi β€” bular SwiftUI va iOS 15 uchun yangi. Aslida, bizda bu materiallar (va boshqa bir qancha materiallar) UIKit'da, UIVisualEffectBlur deb ataladigan narsa orqali, ancha vaqtdan beri mavjud edi, ammo ular yaqin vaqtgacha SwiftUI'da mavjud emas edi. Shuning uchun bizda faqat shu yerda ko'rsatilganlar bor, ammo ular yetarlicha xilma-xil.

Avval shunchaki .thinMaterialdan boshlaylik:

.background(.thinMaterial)

Bularning qiziq tomoni shunda: ularning orqasini biroz "ko'rish" mumkin β€” albatta, to'liq ko'rinmaydi, ammo fondagi ranglar biroz o'zgarib turganini ko'ramiz, va rasm ham birozgina "shimirilib" ko'rinadi, bu esa juda professional bir tuyg'u beradi.

Material'larni amalda ko'rsatish

Keling, shu "hi" matnini, masalan, kichik bir yumaloq to'rtburchak (RoundedRectangle) bilan almashtiraylik β€” kengligi 30, balandligi 4 bo'lgan frame beramiz, va ko'rinishini sinab ko'raylik. Buni yana bir Spacer bilan yuqoriga itarib qo'yamiz, atrofiga esa, masalan, 50 qiymatida padding qo'shamiz:

VStack {
    Spacer()

    VStack {
        RoundedRectangle(cornerRadius: 10)
            .frame(width: 30, height: 4)

        Spacer()
    }
    .padding(.top, 50)
    .frame(height: 350)
    .frame(maxWidth: .infinity)
    .background(.thinMaterial)
    .cornerRadius(30)
}
.ignoresSafeArea()
.background(
    Image("the-rock")
        .resizable()
        .scaledToFill()
)

Demak, Maps ilovasida bo'lganingizda, orqada xarita turganida, ekranning pastida shu kabi pop-up oynachalar chiqadi β€” ular ham aynan shunday "shimirilib" ko'rinadi. Xuddi shunday, agar siz FaceTime'da biror kishi bilan suhbatlashayotgan bo'lsangiz, pastdagi pop-up oynachada barcha tugmalarni qoplab turuvchi tizim materiali bor β€” ular ham aynan shu usulda yasalgan.

Mavjud material turlari

Bizda thin material bor, thick material bor, regular material bor, va, ehtimol, mening eng sevimlim β€” ultra thin material β€” bu eng shaffof material: orqamizdagi ekranning ancha katta qismini ko'rishimiz mumkin, ammo, albatta, shu yerga tugma va boshqa elementlar qo'ysak ham, ular hamon to'liq o'qiladigan bo'lib qoladi.

Bu materiallarning ta'rifiga (definition) tezda o'tib, hujjatlarda ko'rsak: bular faqat iOS 15 uchun mavjud, va bizda mavjud bo'lgan materiallarning to'liq ro'yxati β€” regular material, thick material, thin, ultra thin, va ultra thick. Albatta, UIKit'da bundan ham ko'proq material bor, agar shu narsalarni ko'chirib o'tkazishni xohlasak β€” ammo bu beshtasi, ehtimol, sizga kerak bo'lishi mumkin bo'lgan deyarli barcha holatlarni qamrab oladi.

Xulosa

Sizlarga buni shunchaki tezda qanday ishlatishni ko'rsatmoqchi edim β€” bu bizning misolimiz, va agar shu view'ga drag gesture (sudrab harakatlantirish) ham qo'shsak, biz Maps ilovasida, FaceTime ilovasida va boshqa ko'plab ilovalarda ko'rgan funksionallikning aynan o'ziga ega bo'lardik.

Apple bizni shu materiallarni ishlatishga undayotganga o'xshaydi β€” menimcha, ular haqiqatan ham juda chiroyli ko'rinadi, va men ularni o'z ilovalaringizda ishlatishni qattiq tavsiya qilaman.

Mana shu β€” ushbu video uchun shu, xolos. Umid qilamanki, sizlarga yoqdi. Har doimgidek, men β€” Nik, bu Swiftful Thinking, keyingi videoda ko'rishamiz!

Buy mea coffee