Published on

SwiftUI-da Toolbar'dan qanday foydalanish kerak

Authors

Yana qaytdik! Hammaga salom, men β€” Nik, bu Swiftful Thinking. Oldingi videoda biz NavigationStackni ko'rib chiqdik, va menimcha, bunga juda mos davom video β€” toolbarni ko'rib chiqish bo'ladi. Ushbu pleylistni birinchi marta yaratganimda, siz navigation bar itemlarni ko'rgan edingiz β€” ekranning yuqorisidagi navigation bar'ning chap yoki o'ng tomoniga tugma yoki istalgan view qo'yish usuli aynan shu edi. Ammo buning yangi usuli β€” toolbar deb ataladigan narsa orqali amalga oshiriladi. Toolbar ham xuddi shunday oson ishlatiladi, ammo u bizga bir nechta turli ekran va qurilmalarda yanada moslashuvchan bo'lish imkonini beradi. Ushbu videoda men sizlarga, albatta, toolbar'dan qanday foydalanishni ko'rsataman, shuningdek, toolbar'dan foydalanishni boshlaganimizdan keyin ishlatishimiz mumkin bo'lgan juda ko'plab qiziqarli modifikatorlarni ham ko'rsataman.

Yangi loyiha fayli yaratish

Navigator'da o'ng tugmani bosib, yangi fayl yaratamiz β€” bu SwiftUI View bo'ladi, va buni ToolbarBootcamp deb ataymiz. "Create" tugmasini bosamiz, canvas'ni ulaymiz.

Avval yaqinda o'rgangan NavigationStackimizdan foydalanib boshlaymiz: qavslarni ochib, ichiga tezkor bir ZStack qo'yamiz β€” fon rangi sifatida, masalan, indigo rangini tanlayman (bu kanalimda kamdan-kam ishlatilgan rang bo'lsa kerak), va .ignoresSafeArea() qo'shamiz. Ekranga esa shunchaki "Hey" deb yozilgan matn qo'yamiz, foreground rangi sifatida oq beramiz, va kun davomida birozgina kayfiyat ko'tarish uchun emoji ham qo'shamiz: "Hey πŸ‘‹".

NavigationStack {
    ZStack {
        Color.indigo
            .ignoresSafeArea()

        Text("Hey πŸ‘‹")
            .foregroundColor(.white)
    }
}

Eski usul: navigationBarItems

Endi .navigationTitle("Toolbar Bootcamp") qo'shamiz. Avval mavjud bilimimizdan foydalanib, navigation bar itemlarni qo'shaylik: leading va trailing parametrlaridan foydalanamiz, ularni alohida qatorlarga joylashtiramiz. leading uchun, masalan, tizim nomi "heart.fill" bo'lgan Image, trailing uchun esa tizim nomi "gear" (sozlamalar tugmasi) bo'lgan boshqa bir Image qo'yamiz:

.navigationBarItems(
    leading: Image(systemName: "heart.fill"),
    trailing: Image(systemName: "gear")
)

Demak, navigation bar item'lar ishlaydi β€” biz buni allaqachon ko'rib turibmiz. Ammo buni qilishning yangi usuli β€” toolbar orqali.

Yangi usul: Toolbar

.toolbar deb yozib, contentga ega bo'lgan oddiy (plane) initializer'dan foydalanamiz, qavslarni ochamiz, va navigation bar item'larimizni izohga olib qo'yamiz (komment qilamiz). Shu toolbar'imizga ToolbarItem qo'shamiz β€” bizga joylashtirish (placement) kerak bo'ladi, maxsus ID berishimiz shart emas, shuning uchun shunchaki placement'dan foydalanamiz: .navigationBarLeadingni tanlaymiz (aynan yuqorida leading bo'lgani kabi), va ichiga avvalgi "heart.fill" rasmimizni qo'yamiz.

Yana bir ToolbarItem qo'shamiz, bu safar placement β€” .navigationBarTrailing, va ichiga sozlamalar belgisini qaytarib qo'yamiz:

.toolbar {
    ToolbarItem(placement: .navigationBarLeading) {
        Image(systemName: "heart.fill")
    }

    ToolbarItem(placement: .navigationBarTrailing) {
        Image(systemName: "gear")
    }
}

Demak, hozircha kodimiz biroz boshqacha, ammo natijamiz β€” ekranda ko'rinadigan narsa β€” aynan bir xil.

Nega aynan Toolbar?

Xo'sh, nega umuman toolbar'dan foydalanishimiz kerak? Buning sababi shu: toolbar bizga aslida shu ikki joylashtirishdan ko'proq narsani qilish imkonini ochib beradi β€” shu yerda boshqa turli placement variantlarining barchasini ko'rishimiz mumkin. Men ularning har birini birma-bir ko'rib chiqmayman, ammo bilishingiz muhim bo'lgan narsa shu: bu yerdagi maqsad β€” deyarli har bir Apple platformasida toolbar mavjud, ya'ni siz iPad'da ham, Mac'da ham, iPhone'da ham, hatto Apple Watch'da ham ishlasangiz, toolbar bor, va biz aynan shu bir xil modifikatordan foydalanishimiz mumkin. Albatta, toolbar turli qurilmalarda biroz boshqacha ko'rinadi, va bu variantlarning ba'zilari har bir qurilmada to'liq qo'llab-quvvatlanmasligi mumkin β€” masalan, .automatic, .navigationBarLeading va .primaryAction printsip jihatidan iPhone'da bir xil narsani bildirishi mumkin, ammo iPad'da yoki Mac'da boshqacha bo'lishi mumkin.

Turli placement variantlari bilan tanishish

Keling, ularning bir nechtasini ko'rib chiqaylik.

.automatic β€” bu uni aynan biz hozir ko'rib turgan joyga, ya'ni nav bar'ning o'ng tomoniga (.navigationBarTrailing) qo'yadi.

.bottomBar β€” buni esa ekranning pastki tomoniga ko'chirishimiz mumkin. Bu β€” yangi va menga juda yoqgan bir narsa, chunki bu bizga ekranning pastidagi panelga tugma qo'yish imkonini beradi. Masalan, fon rangi qizil bo'lgan tugma qo'yib, maksimal kengligini cheksiz va tekislashini .leading (chap tomon) qilib qo'ysak:

.toolbar {
    ToolbarItem(placement: .bottomBar) {
        Text("Click me")
            .background(Color.red)
            .frame(maxWidth: .infinity, alignment: .leading)
    }
}

Endi qurilmaning pastki chap burchagida chiroyli "suzib turgan" bir tugmamiz bor β€” bu juda qiziq.

.cancellationAction β€” bu uni ekranning yuqori chap tomoniga qo'yadi. .destructiveAction esa, menimcha, ekranning yuqori o'ng tomoniga qo'yadi.

Klaviatura ustida tugma: .keyboard

.keyboard β€” bu haqiqatan ham juda qiziqarli, tezda ko'rib chiqaylik. Ekranga ScrollView va ichiga TextField qo'yamiz β€” placeholder matnini beramiz, va @State private var text, turi String, bo'sh string bo'lgan o'zgaruvchiga bog'laymiz.

Indigo fonda bu matnni ko'rish biroz qiyin bo'lgani uchun, hozircha fonni oqqa o'zgartiraylik, shunda placeholder'ni yaxshi ko'ramiz. Bu text field'ni alohida formatlamayman, ammo agar ToolbarBootcampni ilovamning birinchi ekrani qilib qo'yib, ilovani ishga tushirsam, va text field'ni bossam β€” toolbar paydo bo'ladi, va endi bu yangi tugma to'g'ridan-to'g'ri klaviatura ustida joylashadi. Bu juda ajoyib, chunki endi men shu yerga, masalan, "Send" (jo'natish) deb yozilgan tugma, yoki qidirish jarayonida avtomatik to'ldirish (autocomplete) tugmalarini qo'yishim mumkin:

@State private var text: String = ""

ScrollView {
    TextField("Type something...", text: $text)
}
.toolbar {
    ToolbarItem(placement: .keyboard) {
        Button("Send") {

        }
    }
}

Bu juda qulay β€” bu xususiyatsiz buni amalga oshirish ancha qiyin bo'lardi: siz toolbar'ni kuzatib turishingiz, aniq nechta piksel yuqoriga ko'tarish kerakligini hisoblashingiz, yoki toolbar yuqoriga ko'tarilganda ekrandagi bo'shliq va siljishlar bilan shug'ullanishingiz kerak bo'lardi β€” ammo bu xususiyat bizni shu stress'dan biroz qutqaradi.

.principal β€” bu esa ekranning aynan markazida joylashadi: bizda nav bar'ning chap tomoni, o'ng tomoni, va endi markazida ham joy bor.

Bitta placement'da bir nechta element

Yana bir nechta tugma qo'shishni ham sinab ko'raylik β€” .navigationBarTrailingga qaytib, shu yerga, masalan, "house.fill" belgisiga ega bo'lgan yana bir tugma qo'shamiz. Agar ikkita ToolbarItemni bir xil placement bilan qo'shsak, biri uy belgisi, ikkinchisi esa sozlamalar belgisi bo'lib chiqadi:

.toolbar {
    ToolbarItem(placement: .navigationBarTrailing) {
        Image(systemName: "house.fill")
    }

    ToolbarItem(placement: .navigationBarTrailing) {
        Image(systemName: "gear")
    }
}

Shuningdek, ikkalasini bitta HStack ichiga joylashtirish orqali ham buni amalga oshirishimiz mumkin β€” bu ham ishlayveradi. Hozircha bularning bir qismini izohga olib, faqat sozlamalar belgisini qoldiramiz.

Toolbar'ni yashirish

Boshqa modifikatorlar orasida β€” toolbar visibility (ko'rinish) bor: endi biz ma'lum bir joylashtirish (placement) uchun toolbar'ni yashirishimiz mumkin. Masalan, navigation bar'ni butunlay yashirishni xohlasak β€” iOS 16'dan oldin bizda .navigationBarHidden(true) bor edi, ammo bu ham endi eskirgan. Buning o'rniga, .toolbar deb chaqirib, visibility (ko'rinish) variantidan foydalanamiz: .hidden. Bu visibility variantlari bizga qaysi toolbar'ni yashirmoqchi ekanligimizni aniqlash imkonini beradi β€” tab bar, pastki panel, yoki navigation bar:

.toolbar(.hidden, for: .navigationBar)

Ekranga bir nechta tarkib qo'shaylik β€” "Hey" matnini olib tashlab, ScrollView ichida 0dan 50dan kichik qiymatgacha bo'lgan ForEach qo'shamiz (qiymatning o'ziga ehtiyojimiz yo'q, shuning uchun pastki chiziqcha qo'yamiz), va har biriga, masalan, 200x200 o'lchamidagi Rectangle qo'yamiz.

Toolbar fonini va rang sxemasini moslashtirish

Endi ScrollView'imiz bor, va ko'ramiz: toolbar hozircha yorug' rejimda β€” yuqorida deyarli to'liq xira (opaque) rangli fon bor. Buni .toolbarBackground orqali bekor qilishimiz mumkin β€” va shu fonni yashirishimiz mumkin (albatta, qaysi bar uchun ekanligini ko'rsatishimiz kerak, shuning uchun navigation bar'ni tanlaymiz). Endi UI bir xil, ammo toolbar'ning foni butunlay yashirilgan:

.toolbarBackground(.hidden, for: .navigationBar)

Bu, agar shu yerning ko'rinishini biroz moslashtirishni xohlasangiz, sizga foydali bo'lishi mumkin. Albatta, qora rangli sarlavha va qora to'rtburchaklar bilan bu unchalik chiroyli ko'rinmaydi β€” agar to'rtburchaklarni ko'k rangga to'ldirsam, nima sodir bo'layotganini biroz yaxshiroq ko'ramiz: tugmalar toolbar'ning orqasida qolib ketmoqda. Hozircha preview'da bu menga unchalik yoqmadi, shuning uchun buni qaytadan izohga olib qo'yamiz.

Shuningdek, toolbar'ning rang sxemasini ham bekor qilishimiz mumkin β€” masalan, faqat navigation bar uchun, qora rejimga o'tkazishimiz mumkin. Demak, butun ekran hamon yorug' rejimda qoladi, ammo nav bar endi qora rejimda bo'ladi β€” bu, ehtimol, biroz kamroq ishlatiladigan, ammo juda qiziq bir narsa, va buni atigi bir qator kod bilan amalga oshirish mumkin:

.toolbarColorScheme(.dark, for: .navigationBar)

Nega har doim Toolbar ishlatish kerak

Menimcha, bu β€” Apple'ning qulaylik (accessibility) sari intilishining bir qismi: ular sizdan tugmalarni toolbar'larga qo'yishingizni juda xohlaydi. Agar yuqori chap, yuqori o'ng, pastki chap yoki pastki o'ng burchaklarga tugma qo'ymoqchi bo'lsangiz, buni toolbar orqali qilishga harakat qiling β€” chunki bu toolbar'lar turli ekranlar uchun avtomatik ravishda o'lchamini o'zgartiradi, turli qurilmalardagi turlicha xavfsiz hudud (safe area) shakllariga avtomatik moslashadi. Shuning uchun men tobora ko'proq barcha ilovalarimni toolbar ishlatishga o'tkazib bormoqdaman.

Albatta, ba'zan UI mukammal bo'lmaydi β€” biz buni o'zgartirishni xohlaymiz, chunki bu aynan biz xohlagan ko'rinish emas. Mening tavsiyam shu: UI'ingizni biroz kamroq "chiroyli" qilib qo'yish, ammo shu toolbar'lar bizga taqdim etadigan qulaylik, ishlash osonligi, va qulaylik (accessibility) bo'yicha qo'llab-quvvatlashga erishish. Demak, agar mendan nima qilishni so'rasangiz β€” har doim toolbar'dan foydalaning, deyardim. Men kod yozishni endigina o'rganayotganimda, albatta, hamma narsani to'liq maxsus (custom) qilib qurishni juda xohlardim β€” ko'pchilik boshlang'ich dasturchilar to'liq maxsus UI qurishdan faxrlanadi, deb o'ylayman. Ammo buni qanchalik ko'p qilsam, shuncha ko'proq tushunib boryapman: bu native toolbar'lardan foydalanish bizga juda katta vaqt va kuchni tejaydi, va, haqiqatda, hech kim sizning ilovangizdan, yuqori chap burchakdagi tugma tufayli foydalanmaydi β€” ular ilovangizni siz yaratayotgan boshqa barcha narsalar uchun ishlatadi. Bu, hech bo'lmasa, mening fikrim β€” ammo buni shubha bilan qabul qiling.

toolbarTitleMenu: mini-navigatsiya

Videoni yakunlashdan oldin, yana bir nechta narsani tezda ko'rib chiqaylik. .toolbarTitleMenu qo'shamiz β€” men buni yaqinda topdim, hali production'da ishlatmaganman, ammo bu juda ajoyib. toolbarTitleMenu β€” bu toolbar'ning sarlavhasi yonida joylashgan menyu: yuqoriga aylantirsak, kichik bir tugma borligini ko'ramiz. Hozircha hech narsa sodir bo'lmaydi, chunki closure ichida hech narsa yo'q, ammo men ichiga, masalan, "Screen 1" deb yozilgan tugma, va harakat sifatida yana bir, "Screen 2" deb yozilgan tugma qo'yaman.

Bu toolbarTitleMenudan foydalanganimizda, nav bar sarlavhasi ko'rsatish rejimini .inline qilib qo'yishimiz kerak, shunda u shu menyu bilan birga ko'rsatila boshlaydi. Endi shu yerga bossam, pastga ochiladigan menyu chiqadi β€” men buni hali ko'plab iPhone ilovalarida ko'rmaganman, ammo bu yangilanish bilan, menimcha, buni tobora ko'proq ko'rib boramiz. Bu, asosan, tab barga o'xshash narsa β€” bu kichik bir navigatsiya, shuning uchun bu yerga filtrlash, routing, yoki o'zim xohlagan har qanday narsani shu chiroyli ochiladigan menyuga qo'yishim mumkin (albatta, bu tugmalarning ba'zilari uchun o'z maxsus ochiladigan menyularimizni ham qo'shishimiz mumkin β€” buni Firebase kursida qilgan edim, ammo shunchaki misol uchun).

Keling, oldingi videoda o'rgangan NavigationStack'ning pathiga shu menyuni bog'laylik (agar NavigationStack'dan qanday foydalanishni bilmasangiz, oldingi videoga qarang β€” u yerda buning haqida bilishingiz kerak bo'lgan barcha narsani ko'rib chiqgan edik). Tezda @State private var paths, turi β€” string'lar massivi, va shu path'ga bog'laymiz. NavigationStack yangi destination string olganida, biz unga qayerga borishni ko'rsatishimiz kerak β€” buni string uchun navigationDestination orqali ko'rsatamiz, bu yangi qiymat bo'ladi, va biz shu qiymat bilan yangi ekranga o'tamiz.

Shuning uchun menyu tugmalarida shunchaki paths.append("Screen 1") va paths.append("Screen 2")ni chaqiramiz:

@State private var paths: [String] = []

NavigationStack(path: $paths) {
    ZStack {
        Color.indigo
            .ignoresSafeArea()
    }
    .navigationTitle("Toolbar Bootcamp")
    .navigationBarTitleDisplayMode(.inline)
    .toolbarTitleMenu {
        Button("Screen 1") {
            paths.append("Screen 1")
        }

        Button("Screen 2") {
            paths.append("Screen 2")
        }
    }
    .navigationDestination(for: String.self) { value in
        Text(value)
    }
}

Demak, shu bir necha qator kod bilan, biz toolbar ichida, aslida, to'liq ishlaydigan routing tizimiga ega bo'ldik β€” bu, agar mendan so'rasangiz, ishonib bo'lmaydigan darajada oson.

Xulosa

Mana shu β€” ushbu video uchun shu, xolos. Sizlarga toolbar haqida shunchaki qisqa kirish qilib bermoqchi edim, shunda bu sizga chalkash bo'lib qolmasin. Agar hamon navigation bar item'lardan foydalanayotgan bo'lsangiz β€” ular eskirgan, ammo hali ham birozgina vaqt davomida ishlayveradi, bu yomon narsa emas. Ammo toolbar bizga biroz ko'proq moslashtirish imkoniyatlarini ochib beradi, va menimcha, toolbar ilovangizni bir nechta platformada qo'llab-quvvatlashni osonlashtiradi. Shuning uchun, agar navigation bar item qo'shmoqchi bo'lsangiz, ularni toolbar'ga joylashtiring β€” keyinroq menga rahmat aytasiz.

Tomosha qilganingiz uchun rahmat, har doimgidek! Men β€” Nik, bu Swiftful Thinking, va agar mening bilan qoling β€” keyingi videoda, menimcha, iOS 16'dan kelgan eng yaxshi yangilanishni ko'rib chiqamiz. Shuning uchun shu yerda qoling β€” bu juda qiziqarli bo'ladi, men ham hayajondaman, keyingi videoda ko'rishamiz!

Buy mea coffee