Published on

SwiftUI-da ContextMenu'dan qanday foydalanish kerak

Authors

Hammaga salom! Men β€” Nik, va ushbu videoda biz context menu haqida gaplashamiz. Context menu, albatta, oldingi bir necha videoda ko'rib chiqgan alert'lar va action sheet'larga qaraganda ancha kamroq mashhur, ammo u tobora ko'proq ishlatilayotganga, hatto biroz "trend" bo'layotganga o'xshaydi, shuning uchun men buni ham tezda ko'rib chiqishni xohladim.

Bu, asosan, foydalanuvchiga bir nechta turli tugmani taqdim etishning yana bir usuli, xolos: foydalanuvchi biror obyektni bosib, taxminan yarim soniya davomida bosib turadi, va shundan keyin shu obyektning yonida kichik bir context menu paydo bo'ladi β€” unda esa foydalanuvchi bosishi mumkin bo'lgan bir nechta turli tugma bo'ladi. Demak, bu biroz kamroq mashhur bo'lsa ham, juda chiroyli UI hisoblanadi β€” keling, shuni ko'rib chiqaylik.

Yangi loyiha fayli yaratish

Yana Xcode loyihamizga qaytdik. Har doimgidek, shu video uchun yangi fayl yaratamiz: Navigator'da o'ng tugmani bosib, yangi fayl yaratamiz, bu SwiftUI View bo'ladi, va biz context menu haqida gaplashayotganimiz uchun buni ContextMenuBootcamp deb ataymiz. "Create" tugmasini bosamiz, ichkariga kirgach esa canvas'da "Resume" tugmasini bosib, kod yozishni boshlaymiz.

Oldingi ikki videoda biz alert'lar va action sheet'lar haqida o'rgandik, va aynan ularga o'xshab, context menu ham foydalanuvchiga bir nechta turli tugma orasidan tanlash imkonini berishning tez va oson usuli. Context menu, ehtimol, alert'lar va action sheet'larga qaraganda kamroq mashhur β€” aynan shuning uchun men ularni birinchi bo'lib ko'rib chiqdim β€” ammo so'nggi paytlarda context menu tobora ko'proq paydo bo'layotganini ko'rmoqdaman, va odamlar iOS 14'ning yangilangan UI va xususiyatlariga tobora ko'proq o'rganib qolayotgani sababli, bu biroz ko'proq mashhur va trend bo'layotganga o'xshaydi.

Boshlang'ich view yaratish

Avval mavjud matnni o'chirib, VStack qo'shamiz. Shu VStack ichiga avval bir Image qo'shamiz β€” tizim nomi sifatida, masalan, "house.fill" deb yozamiz. Canvas'da "Resume" tugmasini bosib, hammasi ulanganiga ishonch hosil qilamiz.

Rasmning ostiga matn (bu sarlavha bo'ladi) qo'shamiz β€” masalan, "Swiftful Thinking" deb yozamiz, va uning ostiga yana bir matn qo'shib, "How to use context menu" deb yozamiz.

VStack {
    Image(systemName: "house.fill")

    Text("Swiftful Thinking")

    Text("How to use context menu")
}

Ko'rinishni moslashtirish

Endi shu VStackni biroz chiroyliroq ko'rinishga keltiramiz. Command tugmasini bosib VStackning ustiga bosamiz, SwiftUI Inspector'ni ochamiz, va tekislash (alignment) uchun .leadingni tanlaymiz β€” bu kodda ham o'z aksini topadi. Bo'shliq (spacing) uchun esa 10 qiymatini beramiz.

Endi shrift o'lchamlarini o'zgartiramiz: rasm uchun .font(.title), birinchi matn uchun .font(.headline), va so'nggi matn uchun .font(.subheadline):

VStack(alignment: .leading, spacing: 10) {
    Image(systemName: "house.fill")
        .font(.title)

    Text("Swiftful Thinking")
        .font(.headline)

    Text("How to use context menu")
        .font(.subheadline)
}

Endi shu VStackga fon (background) qo'shamiz β€” .background deb yozib, rang sifatida, masalan, to'q ko'k rang tanlaymiz. Mazmunni (image va ikkala matnni) oq rangga aylantirish uchun, VStackga .foregroundColor(.white) qo'shamiz β€” bu shu VStack ichidagi barcha elementlar uchun amal qiladi. Fonni yanada chiroyliroq qilish uchun, fon qatlamiga (ya'ni shu rangga) .cornerRadius(30) qo'shamiz, va fondan oldin, barcha tomonlar bo'ylab 30 qiymatida padding qo'shamiz:

VStack(alignment: .leading, spacing: 10) {
    Image(systemName: "house.fill")
        .font(.title)

    Text("Swiftful Thinking")
        .font(.headline)

    Text("How to use context menu")
        .font(.subheadline)
}
.foregroundColor(.white)
.padding(30)
.background(
    Color.blue
        .cornerRadius(30)
)

ContextMenu qo'shish

Endi bizda kichkina belgichamiz (ikonkamiz) bor, keling, unga context menu qo'shaylik β€” bu juda-juda sodda: shunchaki .contextMenu modifikatorini qo'shishimiz kifoya. Bu yerda ikki variant bor β€” biz menuItemsga ega bo'lganidan foydalanamiz. Enter bosamiz, va hozircha standart menyu elementlarini shunday qoldiramiz β€” bizda "Menu Item 1", "Menu Item 2" va "Menu Item 3" degan uchta matn bor:

.contextMenu(menuItems: {
    Text("Menu Item 1")
    Text("Menu Item 2")
    Text("Menu Item 3")
})

Endi preview'da "Play" tugmasini bosib, qurilmada ko'ramiz. Context menu'ga kirish uchun shunchaki elementni bosib, bosib turishingiz kifoya β€” bu context menu butun elementga tegishli bo'lgani uchun, deyarli istalgan joyidan bosib turishimiz mumkin. Elementni bosib turganimizda, chiroyli kichik UI animatsiyasi paydo bo'ladi, va shundan keyin context menu chiqadi β€” unda "Menu Item 1", "2" va "3"ni ko'ramiz. Hozircha bularni bosib bo'lmaydi, chunki bu shunchaki matnlar, xolos β€” ammo agar ularni tugmaga aylantirsak, shu obyekt bilan xohlagan narsamizni qilishimiz mumkin bo'ladi.

Menyu elementlarini tugmaga aylantirish

Keling, shu menyuni moslashtiraylik. Birinchi matnni o'chirib, Button qo'shamiz β€” action va labelga ega variantdan foydalanamiz. Harakat (action) uchun Enter bosib, hozircha bo'sh qoldiramiz. Label uchun esa, mavjud matnni o'chirib, Label qo'shamiz β€” Label, aslida, o'zining mustaqil view turi: bu, asosan, matn va belgichadan iborat HStackga juda o'xshaydi. Title (string protokoli bilan) va system image namega ega variantdan foydalanamiz: sarlavha sifatida "Button1", rasm nomi sifatida esa "flame.fill"ni qo'yamiz.

Boshqa ikkita matnni ham o'chiramiz, va yana bir Button qo'shamiz β€” bu safar ham action va label yondashuvidan foydalanamiz, harakatni esa yuqoridagi kabi ikki qatorga joylaymiz. Bu safar esa Label o'rniga, shunchaki oddiy matnni qoldiramiz: "Button2".

Va uchinchi tugmani qo'shamiz β€” yana action va labeldan foydalanamiz. Bu safar matnni saqlab qolamiz, ammo Command tugmasini bosib, matnning ustiga bosib, uni HStack ichiga olamiz, va matnning o'ng tomoniga rasm qo'shamiz β€” tizim nomi sifatida "heart.fill"ni beramiz. Buni esa "Button3" deb ataymiz.

Endi shu tugmalarning nomlarini biroz real holatga yaqinlashtiramiz: birinchisini β€” "Share post", ikkinchisini β€” "Report post", uchinchisini esa β€” "Like post" deb o'zgartiramiz, sof misol sifatida:

.contextMenu(menuItems: {
    Button(action: {

    }, label: {
        Label("Share post", systemImage: "flame.fill")
    })

    Button(action: {

    }, label: {
        Text("Report post")
    })

    Button(action: {

    }, label: {
        HStack {
            Text("Like post")
            Image(systemName: "heart.fill")
        }
    })
})

Tugmalarga harakat qo'shish

Endi shu tugmalarni bosganimizda, haqiqatan ham biror narsa amalga oshishiga ishonch hosil qilaylik. Yuqorida, fon rangini o'zgartirish uchun o'zgaruvchi yaratamiz: @State var backgroundColor, turi Color, va uni hozirgi (to'q ko'k) ranggΠ° tenglashtiramiz β€” bu rangni shu yerdan qirqib olib, o'zgaruvchiga joylaymiz, va fon sifatida endi shu backgroundColordan foydalanamiz.

Endi tugmalarni bosganimizda: "Share post" tugmasi uchun fon rangini .yellowga, "Report post" uchun .redga, "Like post" uchun esa .greenga o'zgartiramiz:

@State var backgroundColor: Color = .blue

var body: some View {
    VStack(alignment: .leading, spacing: 10) {
        Image(systemName: "house.fill")
            .font(.title)

        Text("Swiftful Thinking")
            .font(.headline)

        Text("How to use context menu")
            .font(.subheadline)
    }
    .foregroundColor(.white)
    .padding(30)
    .background(
        backgroundColor
            .cornerRadius(30)
    )
    .contextMenu(menuItems: {
        Button(action: {
            backgroundColor = .yellow
        }, label: {
            Label("Share post", systemImage: "flame.fill")
        })

        Button(action: {
            backgroundColor = .red
        }, label: {
            Text("Report post")
        })

        Button(action: {
            backgroundColor = .green
        }, label: {
            HStack {
                Text("Like post")
                Image(systemName: "heart.fill")
            }
        })
    })
}

Demak, biz shunchaki context menu'mizga uchta turli tugma qo'shdik, xolos. Endi canvas'ni qaytadan ishga tushirib, view'imizni bosib-tutib tursak, yangilangan menyuni ko'ramiz. Sizlarga ko'rsatmoqchi bo'lgan narsa shu: context menu, aslida, faqat bitta sarlavha va bitta belgichani qabul qiladi β€” chunki bu, aslida, "sahna ortida" shunchaki Label turi, xolos. Shuning uchun, birinchi tugmada qilganimizdek Label yondashuvidan foydalanishimiz mumkin, ikkinchi tugmada qilganimizdek shunchaki matn qo'shishimiz mumkin, yoki matn va rasmdan iborat HStack yasashimiz ham mumkin β€” qaysi usulni tanlasak ham, oxir-oqibatda natija bir xil formatda chiqadi: chap tomonda sarlavha, o'ng tomonda esa (agar bo'lsa) belgicha. Ikkinchi tugmada, albatta, belgicha yo'q, chunki biz uni qo'shmadik.

Endi shu tugmalardan birini bossak, context'imizning fon rangi o'zgaradi. Haqiqiy ilovada, albatta, bu tugmalarni bosganimizda turli xil funksiyalarga ega bo'lardik, ammo men sizlarga shunchaki context menu'ni qanday qo'shishni va u ilovangizda qanday foydali bo'lishi mumkinligini ko'rsatmoqchi edim.

ContextMenu'ning cheklovlari

Afsuski, menyuning o'zini unchalik moslashtirish imkoni yo'q β€” sarlavha va belgichaga ega bo'lgan bu qism, asosan, standart ko'rinishda qoladi, va, menimcha, ranglarni ham o'zgartirish imkoni yo'q.

Shaxsan men context menu'dan unchalik tez-tez foydalanmayman β€” hech bo'lmasa hozirgacha β€” chunki foydalanuvchi ilovangizda bo'lganida, ko'pincha shu elementda context menu mavjudligini umuman bilmaydi ham. Masalan, biz shu view'ga to'g'ridan-to'g'ri qarasak, bu yerda context menu borligini sezmaymiz β€” ammo bosib-tutib tursak, albatta, u ishlayveradi. Shuning uchun, ko'pincha bu juda yashirin bo'lib qoladi, agar siz foydalanuvchilaringizga bu menyu mavjud ekanligini alohida tushuntirmasangiz.

Ammo odamlar iOS 14 va shu kabi UI xususiyatlariga tobora ko'proq o'rganib borgani sayin, menimcha, bu tobora ko'proq ommalashib boradi.

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

Buy mea coffee