SwiftUI loyihasini Dark Mode (qora rejim)ga moslashtirish

SwiftUI Bootcamp-ga xush kelibsiz qaytib! Men — Nick, va biz ushbu Bootcamp-ni yakunlashga yaqinlashib, videolarning so'nggi bosqichiga kirib bormoqdamiz. Shu sababli, endi men yangi boshlovchi dasturchilar uchun juda muhim deb hisoblaydigan bir nechta tushunchani ko'rib chiqamiz. Bunday videolardan bir nechtasi, aslida, SwiftUI-ga xos bo'lgan komponentlarni emas, balki ilova yaratayotganda duch keladigan ba'zi tushunchalarni boshqarishni qamrab oladi — masalan, ushbu video, unda biz dark mode (qora rejim)ni ko'rib chiqamiz.

Yorug' (light) va qora (dark) rejim haqida gapirganimizda, biz, aslida, faqat ilovamizdagi ranglar haqida gapirmoqdamiz. Chunki yorug' rejimda, aslida, bizda oq fon va qora matn bor; foydalanuvchida qora rejim yoqilganda esa — qora fon va oq matn bo'ladi. Shuning uchun ilovamizni yaratayotganimizda, qaysi ranglardan foydalanayotganimizga juda ehtiyot bo'lishimiz kerak — chunki ba'zi ranglar moslashuvchan (adaptable) bo'lib, yorug' va qora rejim bilan birga o'zgaradi, ammo boshqa ranglar — masalan, biz aniq qilib Color.black deb yozganimizda — moslashuvchan emas.

Shuning uchun ushbu videoda biz, qaysi ranglar moslashuvchan ekanligini — ya'ni yorug' va qora rejim orasida haqiqatan o'zgaradigan ranglarni — ko'rib chiqamiz, shuningdek qaysi ranglar moslashuvchan emas ekanligini ham ko'ramiz, ya'ni yorug' yoki qora rejimda bo'lishidan qat'i nazar bir xil qoladigan ranglarni. So'ngra biz ilovamizga maxsus moslashuvchan ranglar qo'shishning bir necha xil usulini ko'rib chiqamiz, toki ular ham yorug' va qora rejim uchun o'zgarsin. Avval, qanday qilib global moslashuvchan ranglar qo'shishimiz mumkinligini ko'ramiz, so'ngra esa ranglarni o'zimizning view-imiz ichida lokal ravishda qanday moslashtirish mumkinligini ko'rib chiqamiz — buning uchun colorScheme nomli environment obyektidan foydalanamiz, va colorSchemening yorug' yoki qora rejimda ekanligiga qarab, modifikatorlarimizga mantiq qo'shib, shu modifikator qo'llanilgan har qanday obyektning rangini moslashtiramiz.

Umuman olganda, iOS dasturchisi sifatida, dark modening qanday ishlashini tushunish juda muhim, chunki hozir 2021-yil, va ko'pchilik ilovalar hozirgi kunda ham yorug', ham qora rejimni qo'llab-quvvatlaydi.

Yangi SwiftUI fayl yaratish

Hammaga xush kelibsiz qaytib! Bugun yana bir tezkor, oson video. Men Xcode-da turibman — Navigator-da o'ng tugmani bosib, yangi fayl yaratamiz. Bu, taxmin qilganingizdek, SwiftUI View bo'ladi, va biz dark mode haqida gaplashayotganimiz uchun, unga DarkModeBootcamp deb nom beramiz. Create tugmasini bosamiz, ichiga kirgandan so'ng, canvas-da Resume tugmasini bosamiz, va kod yozishni boshlaymiz.

Boshlang'ich tuzilma

Buni juda sodda boshlaymiz. NavigationView qo'shamiz, uning ichiga ScrollView, va ScrollView ichiga matn qo'shamiz — hozircha shunchaki "hi" deb qoldiramiz:

NavigationView {
    ScrollView {
        Text("hi")
    }
    .navigationTitle("Dark Mode Bootcamp")
}

ScrollView-ga navigationTitle qo'shamiz, va sarlavhani "Dark Mode Bootcamp" qilamiz.

Turli ranglarda matnlar qo'shish

Endi ScrollView ichidagi matnni o'chirib, VStack qo'shamiz — spacingni, masalan, 20 qilamiz. Endi shu VStack ichiga, turli ranglarga ega bo'lgan bir nechta matn qo'shamiz:

VStack(spacing: 20) {
    Text("This color is primary")
        .foregroundColor(.primary)

    Text("This color is secondary")
        .foregroundColor(.secondary)

    Text("This color is black")
        .foregroundColor(.black)

    Text("This color is white")
        .foregroundColor(.white)
}

Oldindan ko'rishda darrov ko'ramiz: telefon hozir yorug' rejimda, va uning fon rangi oq. Sarlavha — qora, chunki bu — primary rang. Demak, "This color is primary" matnida, hozircha primary rang aslida qora.

"This color is secondary" — bu biroz kulrangga o'xshash rang. "This color is black" — haqiqatan ham qora. "This color is white"ni esa biz ko'ra olmaymiz, chunki bu — oq fonda oq matn.

Adaptiv va statik ranglar orasidagi farq

Preview-da rang sxemasini almashtirish

Endi, oldindan ko'rishdagi kichik kompyuter ikonkasini bossak (nomi nima ekanligini bilmayman), va pastga tushib Color Scheme bo'limini topib, uni **Dark**ga o'zgartirsak — oldindan ko'rishimizga yana qaraymiz: qora rejimda bizda qora fon bor. Sarlavha esa oqga o'tdi — buning sababi, primary rang, ya'ni "This color is primary" matnidagi rang, endi oq.

Demak, biz ko'rishimiz mumkin: primary va secondary ranglar avtomatik tarzda yorug' va qora rejim orasida moslashadi. primary — yorug' rejimda qoradan, qora rejimda oqga o'tadi, va aynan shu sababdan biz hech qanday modifikatorni o'zgartirmasdan ham bu rangni hamon ko'rib turamiz.

Ammo shuni alohida ta'kidlab o'tmoqchiman: biz foregroundColorni aniq black yoki white qilib belgilaganimizda, bu yorug' va qora rejim uchun moslashmaydi. Endi bizda qora fonda qora matn bo'lgani uchun, "This color is black" matnini ko'ra olmaymiz — chunki bu rang moslashuvchan emas.

Bu yerdagi asosiy saboq shunda: rang qo'shganingizda, bu rangning moslashuvchan (primary yoki secondary kabi) ekanligini, yoki bu o'zgarmaydigan aniq rang ekanligini doim yodda tutishingiz kerak.

Qizil rang misoli

Agar yana bir matn qo'shsak, masalan: "This color is red", va uni .foregroundColor(.red) qilsak:

Text("This color is red")
    .foregroundColor(.red)

Biz bilamizki, qizil rang ham yorug', ham qora rejimda ko'rinadi. Agar buni yana yorug' rejimga qaytarsak, qizil rangni hamon ko'rishimiz mumkin, chunki bu — oq fonda qizil, yoki qora fonda qizil. Ammo qora yoki oq ranglarni ishlatganimizda, biz bilamizki, ular moslashuvchan emas — qizil rang moslashuvchan bo'lmasa-da, biz uni baribir ko'ra olamiz, chunki uning fon bilan kontrasti har doim yetarli.

Demak, ilovamizga rang qo'shayotganimizda, bularning barchasini yodda tutishimiz kerak.

Preview-da bir nechta ko'rinishni bir vaqtda ko'rsatish

Davom etishdan oldin, preview bo'limiga qaytaylik. Ko'rishimiz mumkinki, hozirgi preview-imiz uchun preferredColorScheme aslida **.light**ga teng — bu, aynan, biz hozirgina preview-da o'zgartirgan modifikator. Agar buni .dark qilib qo'ysak, preview-imiz qora rejimda bo'ladi:

#Preview {
    DarkModeBootcamp()
        .preferredColorScheme(.dark)
}

Preview-imizga Group ham qo'shishimiz mumkin, va shu Group ichida bir nechta preview qo'shishimiz mumkin. Shuning uchun, shu .dark qatorini ikki marta nusxalab qo'yamiz, va birinchisini .light qilamiz:

#Preview {
    Group {
        DarkModeBootcamp()
            .preferredColorScheme(.light)

        DarkModeBootcamp()
            .preferredColorScheme(.dark)
    }
}

Endi preview canvas-ida yuqoriga va pastga suриб ko'rishimiz mumkin — bizda yorug' ko'rinishimiz ham, qora ko'rinishimiz ham bor, va har safar preview-ni almashtirmasdan, ularni oldinga-orqaga solishtirib ko'ra olamiz.

Shunday qilib, biz ranglarimizning yorug' va qora rejim uchun moslashtirilganligiga ishonch hosil qilishimiz kerak: primary avtomatik moslashadi — bu ajoyib; secondary ham xuddi shunday. Ammo qora va oq moslashmaydi; qizilni esa, fon qora yoki oq bo'lishidan qat'i nazar, biz har doim ko'ramiz, shuning uchun bu yerda muammo yo'q.

Global adaptiv rang yaratish

Endi yana bir matn qo'shamiz: "This color is globally adaptive". Bu rang uchun, biz maxsus rang (custom color) yaratamiz. Buni avvalgi ranglar haqidagi videoda allaqachon qilgan edim, shuning uchun bu sizga yangilik bo'lmasligi kerak — ammo agar siz o'sha videoni ko'rmagan bo'lsangiz, qadamlarni yana bir bor ko'rib chiqaylik.

Asset Catalog-da yangi rang yaratish

Chap tomondagi Project Navigator-ni ochamiz, va Assets.xcassets papkasiga o'tamiz. (Bu papkada men avvalgi ranglar videosidan qolgan maxsus rang allaqachon mavjud, ammo qadamlarni yana takrorlaymiz.)

Bu yerda o'ng tugmani bosib, yangi Color Set qo'shamiz, va unga nom beramiz — AdaptiveColor deylik (siz xohlagan nomni berishingiz mumkin). Shu AdaptiveColor tanlangan holatda, uning rangini ko'rishimiz mumkin — hozircha, Any Appearance va Dark Appearance uchun bu rang oq.

Buni o'zgartirishimiz mumkin: o'ng tomondagi Inspectorni ochib, shu rangning appearance (ko'rinish) sozlamalarini ko'rishimiz mumkin. Agar buni **None**ga o'rnatsak, u yorug' va qora rejimda bir xil universal rangga ega bo'ladi. Ammo agar buni **Any, Dark**ga o'rnatsak, endi u boshqacha ko'rinishga ega bo'ladi: biri — yorug' rejim uchun, ikkinchisi — qora rejim uchun.

Shunday qilib, yorug' rejim uchun rangni o'zgartiramiz — Show Color Panelni bosamiz, va yorug' rejim uchun, masalan, shu teal (ko'k-yashil) rangni tanlaymiz. Qora rejim uchun esa yana Show Color Panelni bosib, butunlay boshqacha rang — masalan, sariq (yellow) rangni tanlaymiz.

Demak, yorug' rejimda bu rang — teal, qora rejimda esa — sariq. Esda tutamiz: bu rangimiz endi AdaptiveColor deb nomlangan, chunki bizga buni kodimizda aynan shu nom bilan yozish kerak bo'ladi.

Kodda foydalanish

Endi DarkModeBootcamp fayliga qaytamiz, va "This color is globally adaptive" matniga foregroundColor qo'shamiz — bu yerda yangi rangimizdan foydalanamiz, Colorni yozib, nom orqali tugatish (completion) variantini tanlaymiz, va bu rang — adaptiveColor bo'ladi (bu — Assets.xcassetsda qo'shgan nomimiz bilan aynan bir xil):

Text("This color is globally adaptive")
    .foregroundColor(Color("AdaptiveColor"))

Resume tugmasini bosib, natijani ko'raylik: yorug' rejimda bizning rangimiz — teal, qora rejimga tushganimizda esa — sariq, va bu juda ajoyib ko'rinadi.

Lokal adaptiv rang — colorScheme orqali

Endi yuqorida yangi environment o'zgaruvchisi qo'shamiz: @Environment deb yozib, qavslarni ochamiz, va bu yerda key path ishlatamiz — bu \.colorScheme bo'ladi. Bu o'zgaruvchi bo'lishi kerak, shuning uchun var deymiz, va unga colorScheme deb nom beramiz:

@Environment(\.colorScheme) var colorScheme

colorScheme — bu SwiftUI-da standart holatda mavjud bo'lgan yana bir environment o'zgaruvchisi. Xuddi bir necha video oldin seguelar haqida gaplashganimizda \.presentationModedan foydalangan edik — bu ham xuddi shunga o'xshash, faqat bu safar colorScheme. Demak, SwiftUI-dagi har bir view standart holatda o'z colorSchemesiga ega, va bu, mohiyatan, light yoki dark bo'lishi mumkin.

Endi yana bir matn qo'shamiz: "This color is locally adaptive!", va unga foregroundColor qo'shamiz. Bu yerda biz colorSchemening yorug' yoki qora ekanligini tekshiramiz, va buning uchun ternary operatordan foydalanamiz: agar colorScheme .lightga teng bo'lsa — .green, aks holda — .yellow:

Text("This color is locally adaptive!")
    .foregroundColor(colorScheme == .light ? .green : .yellow)

Bu yerda biz shunchaki lokal ravishda, rang sxemasi yorug' ekanligini tekshirib, agar shunday bo'lsa — yashil, aks holda — sariq rang beramiz. Agar ternary operator sizni biroz chalkashtirsa, men ushbu Bootcamp-ning oldingi bir videosida shu mavzuga butun bir video bag'ishlagan edim.

Endi Resume tugmasini bosib ko'raylik: biz endi yorug' yoki qora rejimda ekanligimizni lokal ravishda tekshirmoqdamiz, va ko'rishimiz mumkin: yorug' rejimda bu — yashil, qora rejimda esa — sariq. Demak, "This color is locally adaptive!" matni — aynan shu tarzda ishlaydi.

Xulosa

Ushbu video uchun, asosan, shu qadar. Men sizlarga yorug' va qora rejim bilan qanday ishlash mumkinligini ko'rsatib o'tmoqchi edim. Albatta, yorug' va qora rejimda asosiy gap — ranglarni o'zgartirish.

Agar siz TabView yoki NavigationView kabi ko'plab tayyor komponentlardan foydalanayotgan bo'lsangiz, ular avtomatik ravishda moslashadi, chunki ular standart holatda aynan shunday ishlaydi. Ammo agar siz o'zingiz ilovangizga ranglar qo'shayotgan bo'lsangiz, zarur bo'lsa, adaptiv ranglardan foydalanishga ishonch hosil qiling.

Masalan, bizning qizil rangimizga bunday qilish shart emas edi, chunki qizil rangni hamma joyda ishlatishimiz mumkin. Ammo oq yoki qoradan foydalanishdan iloji boricha qochishga harakat qiling, chunki bular yetarlicha moslashuvchan emas.

Shunday qilib, biz global moslashuvchan ranglar yaratishimiz mumkin, va lokal moslashuvchan modifikatorlar yaratishimiz ham mumkin. Ilovalaringizni yaratayotganda buni yodda tutishingiz kerak. Albatta, yorug' va qora rejim bilan ishlashning yanada ilg'orroq usullari ham mavjud, va to'liq ilovalarni ishlab chiqishni boshlaganimizda, men sizlarga butun ilovangiz uchun temalar (themes) qanday o'rnatishni ko'rsataman, toki ilova bo'ylab har safar shu ranglarni qo'lda sozlashga hojat qolmasin.

Ammo hozircha, bu dark mode bilan ishlashni boshlash uchun ajoyib kirish bo'ladi.

Mana shu — ushbu video uchun shu qadar. Umid qilaman, sizlarga yoqdi va biror narsa o'rgandingiz. Har doimgidek, men — Nick, bu Swiftful Thinking, va keyingi videoda ko'rishamiz!