SwiftUI ilovasini iPad, Landscape va Dark Mode uchun moslashtirish

Hozirgacha biz ilovamizni faqat iPhoneda, portret (vertikal) rejimda, yorug' rejimda ishga tushirgan edik. Ushbu videoda esa biz ilovamizni uni qanday tarzda joylashtirmaylik ham moslashuvchan qilamiz — ya'ni ilovamiz vertikal (portrait) hamda gorizontal (landscape) rejimda ham, iPhone hamda iPad'da ham yaxshi ishlashiga, va yorug' hamda qorong'i rejimda ham chiroyli ko'rinishiga ishonch hosil qilamiz.

Yorug' rejimda tekshirish

Avval ilovamizni shunchaki o'z holicha, iPhone'da ishga tushiramiz — iPhone 12'dan foydalanamiz, va simulyatorda ochamiz (preview'da emas). Avval ranglarni ko'rib chiqamiz — telefon, ehtimol, boshida yorug' rejimda bo'ladi, va bizda odatdagi ranglarimiz bor: binafshadan jigarrang-qizilga o'tuvchi gradient, oq fon, qora matn — bularning barchasi yaxshi ko'rinadi. "Add" ekraniga o'tsam: oq fon, qora matn, chiroyli kulrang text field, va binafsha "Save" tugmasi. Yorug' rejimda hech qanday muammo yo'qday tuyuladi.

Qorong'i rejimga o'tish va muammoni topish

Endi ilovamizni qorong'i rejimga o'zgartiraylik. Simulyatorda Sozlamalar'ni ochamiz, pastga aylantirsak, Developer (dasturchi) bo'limi bo'lishi kerak — shu yerga kirib, Appearanceni (ko'rinish) Darkga o'zgartiramiz.

Ilovamizni qaytadan ochsak: darhol ko'ramizki, fon endi qora, bu yaxshi, matn esa oq — buning sababi shu: barcha matnlarimiz .primary rangidan foydalanmoqda, va agar SwiftUI bootcamp kursimni kuzatib borgan bo'lsangiz, bilasiz: primary va secondary ranglar tabiatan dinamik, ya'ni ular yorug' va qorong'i rejim orasida o'zgaradi.

Bu yaxshi, ammo bir narsani payqadim: bizning binafsha rangimizni hamon ko'rishim mumkin, ammo uni qorong'i rejimda o'qish biroz qiyinroq, chunki bu to'q binafsha rang qora fonda turibdi. Shuning uchun buni tezda tuzatishimiz kerak.

Accent Color'ni qorong'i rejim uchun moslashtirish

Assets.xcassets papkasiga o'tamiz. Oldingi videoda biz accent colorni sozlagan edik, va agar o'ng tomondagi Inspector'ni ochib, shu rangga bossam, Appearances hozircha Nonega o'rnatilganini ko'ramiz — bu shuni bildiradi: bizda universal rang bor, ya'ni bu accent color yorug' yoki qorong'i rejimdan qat'i nazar, har doim shu to'q binafsha rang bo'ladi.

Ammo Appearancesni o'zgartirsak, Any va Dark qo'shishimiz mumkin — endi bizda Any (bu bizning yorug' rejimimiz bo'ladi) va Dark uchun alohida ko'rinish bo'ladi. Qorong'i rejim uchun, shu to'q binafsha o'rniga, biroz yengilroq binafsha rang tanlayman, shunda u qora fonda o'qish osonroq bo'ladi. Darkga bosib, "Show Color Panel"ni ochaman — biz hozir to'q binafsha rangdan foydalanmoqdamiz, ammo men buning o'rniga biroz yengilroq, "uzum" rangiga o'xshash rang tanlayman — bu, menimcha, qora fonda o'qish osonroq bo'ladi.

Xuddi shunday narsani secondary accent color uchun ham qilamiz: shu rangga bosib, Appearancesni Any va Darkga o'zgartiramiz, Darkga bosib, "Show Color Panel"ni ochaman, va to'q jigarrang-qizil o'rniga, biroz yorqinroq, "qulupnay" rangiga o'xshash rangni tanlayman — bu qorong'i rejimda biroz yorqinroq va ko'rinishi osonroq.

Simulyatorda yana "Play" tugmasini bossam, ilova allaqachon qorong'i rejimda bo'lishi kerak, ammo endi yangilangan ranglar bilan: qorong'i rejimda endi biroz yorqinroq binafsha rang bor — bu, menimcha, biroz chiroyliroq ko'rinadi, va secondary accent color esa endi yorqinroq pushti rang — bu haqiqatan ham ajoyib ko'rinadi.

Endi bizning ranglarimiz dinamik: agar yorug' rejimga qaytsak, dastlabki ranglarimizni ko'ramiz, qorong'i rejimga qaytsak esa, shu yangi ranglarimizni ko'ramiz. "Add" tab'iga ham o'tib, u yerda ham yaxshi ko'rinishiga ishonch hosil qilaylik.

Placeholder rangi muammosi

Bu yerda faqat bitta muammo bor: qorong'i rejimda placeholder (matn maydonidagi o'rin tutuvchi matn) rangi o'zgargan, va shuning uchun odatda "Add something here" yoki nima yozilgan bo'lsa, shuni endi ko'rolmaymiz. Keling, shu yerdagi fon rangini tezda moslashtiraylik.

AddViewga o'tamiz — hozirgi fon, biz qo'shgan oddiy color literal (rang doirasi), ammo biz, buning o'rniga, dinamik rangdan foydalanamiz. Agar SwiftUI bootcamp kursimni kuzatib borgan bo'lsangiz, SwiftUI'ga import qilishimiz mumkin bo'lgan ba'zi UIColorlar borligini bilasiz, va ulardan ba'zilari primary va secondary ranglar kabi dinamik.

Shuning uchun shu color literal'ni o'chiramiz, fon o'rniga Color(uiColor: .secondarySystemBackground) deb yozamiz. Bizga taklif qilingan ko'plab tizim ranglari (system colors) mavjud, va biz secondary system backgroundni tanlaymiz — bu va boshqa barcha tizim ranglari avtomatik ravishda dinamik, ya'ni ular yorug' va qorong'i rejim orasida o'zgaradi:

.background(Color(uiColor: .secondarySystemBackground))

Simulyatorda yana "Play" tugmasini bosib ko'raylik. "Add" ekraniga o'tsak — bu chiroyli ko'rinadi, biroz kulrang fonni ko'ramiz, va "Type something here" matnini hamon ko'ra olamiz. Agar nimadir yozsak — masalan "hello" — bu oq matn bilan chiqadi, bu yaxshi ko'rinadi. Yana yorug' rejimga qaytib, shu yangi rang yorug' rejimda ham yaxshi ko'rinishiga ishonch hosil qilaylik — ha, bu ham yaxshi: qora matn, kulrang fon, hammasi chiroyli.

Canvas'da yorug' va qorong'i rejimni birga ko'rish

Biz buni simulyatorda sinab ko'rdik, ammo bilib qo'yish kerakki, buni canvas'da ham qilish mumkin: canvas'ni ochib, "Resume" tugmasini bosamiz — hozircha canvas yorug' rejimda, ammo kichik kompyuter belgisiga bosib, rang sxemasini darkga o'zgartirsak, canvas'imiz avtomatik ravishda qorong'i rejimga o'tadi. Loyihaning preview bo'limiga aylantirsak, "preferred color scheme" endi darkga o'rnatilganini ko'ramiz.

Agar xohlasak, ikkita turli simulyatorni birgalikda ham ko'rsatishimiz mumkin: Group qo'shib, qavslarni ochib, mavjud NavigationViewni qirqib olib, shu Group ichiga ikki marta joylashtiramiz — birinchisini .light, ikkinchisini .dark qilamiz. Endi yonma-yon: o'ng tomonda yorug' rejimimizni, pastga aylantirsak esa qorong'i rejimimizni ko'ramiz.

Agar simulyatorni ishga tushirmasdan, ko'plab narsani tahrirlashimiz kerak bo'lsa, men aynan shu usulda — preview'da yorug' va qorong'i rejimni tezda tekshirib ko'rgan bo'lardim. Ammo bizning holatimizda unchalik ko'p tahrirlash kerak bo'lmagani uchun, simulyatordan foydalanish bizga yetarli va osonroq bo'ldi. Menimcha, yorug' va qorong'i rejim bilan bo'lgan ishimiz tugadi.

Landscape (gorizontal) rejimni tekshirish

Hammasi juda yaxshi ko'rinmoqda — keling, ilovamizni qaytadan qorong'i rejimga qo'yib qo'yaylik, chunki butun videoni yorug' rejimda o'tkazdik, qorong'i rejim esa, menimcha, juda chiroyli ko'rinadi.

Shu yerda turganimizda, ilovamizni landscape (gorizontal) rejimda ishga tushirib ham ko'raylik. Qurilmani aylantirish uchun kichik tugmani bosamiz, va ilovamiz avtomatik ravishda aylanadi. Bu yerda unchalik ko'p ish qilishimiz shart emas edi, chunki ekranlarimizni formatlay turib, biz aniq kengliklarni emas, balki max width kabi narsalardan foydalangan edik, va qurilmamiz avtomatik ravishda gorizontal holatga moslashdi.

Ammo o'zgartirishni xohlagan bir narsa bor: bu butun "elementlar yo'q" (no items) bo'limi menga biroz juda keng ko'rinmoqda. Shuning uchun shu bo'limning kengligini cheklab qo'yamiz.

NoItemsViewni ochamiz, va VStackda, multilineTextAlignmentdan oldin, .frame(maxWidth: 400) qo'shamiz — bu, menimcha, yaxshi bo'ladi:

.frame(maxWidth: 400)
.multilineTextAlignment(.center)

Qurilma portret rejimida bo'lganida, kengligi taxminan 350 atrofida bo'ladi, landscape rejimida esa, albatta, bu ancha kengroq — ammo maxWidth o'rnatib qo'yganimiz uchun, bu kenglikni har doim, landscape rejimida ham, kattaroq qurilmada ham cheklab turishimiz mumkin.

Yana "Play" tugmasini bossam, gorizontal holatda ishga tushiramiz — endi bu biroz ichkariroq, va bu biroz yaxshiroq ko'rinmoqda. Element qo'shib, yaxshi ko'rinishiga ishonch hosil qilaylik: "New item" deb yozib, saqlaymiz — yangi elementimiz paydo bo'ladi. Yana bittasini qo'shamiz, saqlaymiz — bu yaxshi ko'rinmoqda, hammasi ishlamoqda, tahrirlash rejimiga ham kirishimiz mumkin. Boshqa hech qanday muammo ko'rinmayapti — bu landscape rejimida yaxshi ko'rinmoqda. Endi qaytadan portretga qo'yamiz, va bu simulyatorni yopaman, chunki iPhone'da hammasi yaxshi ko'rinmoqda.

iPad'da tekshirish

Ushbu videoda qilishim kerak bo'lgan so'nggi narsa — ilovamizni iPadda tekshirish. Simulyator'ni iPhone 12'dan iPad Pro 12.9 inchga o'zgartiramiz, chunki bu eng kattasi, shuning uchun shu qurilmada test qilish, ehtimol, eng yaxshisi bo'ladi.

iPad Pro tanlangan holda, simulyatorda "Run" tugmasini bosamiz — bu yerda unchalik ko'p ish qilishimiz shart bo'lmaydi, deb o'ylayman. Yangi simulyator ochiladi, avval portret rejimda sinab ko'raylik.

Yuklanish tugagandan keyin, kichik bir muammoga duch kelamiz: yuklanish tugagan bo'lsa-da, hech narsani ko'rolmayapmiz, va "Back" tugmasiga bossam, ko'ramizki, navigation view chap tomonda bizning navigatsiyamizni qo'shib qo'ymoqda. Buning sababi shu: iPad'larda va kattaroq qurilmalarda, navigation view standart bo'yicha boshqa uslubdan foydalanadi, va bu uslubda chap tomonda sidebar (yon panel) bo'ladi — bu yerda biz tab'larga o'xshash narsalarga ega bo'lishimiz mumkin, va shu tab'larni bosganimizda, boshqa ekranlar ochilishi mumkin, va shu tab bar chap tomonda doimiy qolib turishi mumkin. Bu juda chiroyli iPad xususiyati, ammo bizning hozirgi vaziyatimizga mos kelmaydi.

navigationViewStyle yordamida tuzatish

Bu juda oson tuzatiladi. ToDoListApp.swift fayliga o'tamiz — bizning NavigationViewimiz aynan shu yerda. Shu NavigationViewga, juda sodda tarzda, .navigationViewStyle qo'shamiz, va NavigationViewStyle deb yoza boshlasak, bu yerda bir nechta turli uslublarni ko'rishimiz mumkin (ularning har birini o'z vaqtingizda sinab ko'rishingiz mumkin), ammo StackNavigationViewStyle — bu standart uslub bo'lib, unda har doim faqat bitta ekran ikkinchisining oldida turadi. Bizga aynan shu kerak, shuning uchun StackNavigationViewStyle()dan foydalanamiz:

NavigationView {
    ListView()
}
.navigationViewStyle(StackNavigationViewStyle())

iPad'da yana bir bor ishga tushirsak, endi ilovamizni aynan biz xohlagan tarzda ko'ramiz: bizda birinchi ekranimiz bor, va "Add Something"ni bossak, ikkinchi ekranga o'tamiz — bu juda yaxshi ko'rinmoqda. "Hello" deb yozib ko'ramiz, "Add"ni bosamiz — bu menga juda yaxshi ko'rinadi.

Payqagan bo'lishingiz mumkin bo'lgan yana bir narsa shu: bizning "elementlar yo'q" (no items) view'imiz hamon shu maxWidth bilan cheklangan — shuning uchun ilovaning to'liq ekranini egallash o'rniga (biz bir necha daqiqa oldin shu maxWidthni qo'shgan edik), bu endi iPad'da ham maxWidthga ega — bu juda yaxshi ko'rinmoqda.

Va nihoyat, qurilmani gorizontal holatga aylantirib, hamon yaxshi ko'rinishiga ishonch hosil qilaylik — bu ham menga juda yaxshi ko'rinmoqda.

Xulosa

Ilovamiz juda sodda bo'lgani uchun, bu videoda unchalik ko'p ish qilishimiz shart bo'lmadi, ammo biz quyidagi narsalarni amalga oshirdik: ilovamiz yorug' va qorong'i rejimda yaxshi ko'rinishiga ishonch hosil qildik, qorong'i rejim uchun ba'zi ranglarni moslashtirdik, ilovamizni landscape va portret rejimda — agar foydalanuvchi qurilmasini aylantirmoqchi bo'lsa — tekshirdik, va nihoyat, iPad'da ham, hamon yaxshi ko'rinishiga ishonch hosil qilish uchun, sinab ko'rdik. Navigation view'ni, to'g'ri uslubda bo'lishi uchun, yangiladik — va endi ilovamiz deyarli tayyor.

Ushbu ilovani yakunlashdan oldin yana bitta qisqa video qoldi.