iOS 13’te Context Menüsü Nasıl Oluşturulur

Daha önce, Apple resmen IOS 13’ü halka duyurdu. Karanlık mod ve diğer yeni özelliklerin yanı sıra, iOS’un en yeni sürümü bize cihazla etkileşimde bulunmak için Bağlam Menüsü olarak bilinen yeni bir yol sunuyor .

Bir bağlam menüsü, 3D Touch’ta göz atmaya ve pop’a benzer. Dikkat çeken bir fark, bu özelliğin iOS 13 ve sonraki sürümlerini çalıştıran tüm cihazlarda çalışması, hatta cihazın 3B Dokunma özelliğini desteklememesidir. Bir bağlam menüsü getirmek için, insanlar dokunma ve tutma hareketini kullanır veya cihaza 3B Dokunma özelliği takılıysa dokunulabilir.

iOS 13’e yükselttiyseniz, bu yeni kontrolü Haritalar ve Fotoğraflar gibi çoğu stok uygulamasında bulabilirsiniz.

Şimdi; SwiftUI’deki bağlam menüsünün nasıl uygulanacağını görelim.

SwiftUI’da Bağlam Menü Oluşturma

Başlamak için, lütfen bu başlangıç ​​projesini indirin ve Mac’inizden açın. Dosyayı açtıktan sonra SwiftUIList.xcodeprojprojeyi çalıştırın veya tuvalde önizleyin. Uygulamanın size restoranlar listesini göstermelidir.

Yapacağımız şey bu demo uygulaması için bir bağlam oluşturmak. İnsanlar satırlardan herhangi birini basılı tuttuğunda bağlam menüsünü tetiklemek istiyoruz. Menüde, kullanıcıların seçmesi için iki işlem düğmesi bulunur:  Sil  ve  Sık Kullanılan . Seçildiğinde,  Sil  düğmesi satırı listeden kaldırır. Favori  butonu bir yıldız göstergeli seçilen satır işaretler. 

ContextMenu Modifier ile Çalışma

SwiftUI, bağlam menüsünün uygulanmasını çok kolaylaştırdı. contextMenu Konteyneri bir görünüme eklemeniz ve menü öğelerini yapılandırmanız yeterlidir  . 

Bu iki öğeyi içerik menüsünde sunmak için contextMenu , listedeki her bir satır için aşağıdakileri ekleyebilirsiniz  :

List {
    ForEach(restaurants) { restaurant in
        BasicImageRow(restaurant: restaurant)
            .contextMenu {
                
                Button(action: {
                    // delete the selected restaurant
                }) {
                    HStack {
                        Text("Delete")
                        Image(systemName: "trash")
                    }
                }
                
                Button(action: {
                    // mark the selected restaurant as favorite
                }) {
                    HStack {
                        Text("Favorite")
                        Image(systemName: "star")
                    }
                }
            }
    }
}

Düğme Eylemlerini Uygulama

Şu anda, düğme işlemlerinin hiçbirini uygulamadık. Ancak, uygulamayı yürütürseniz, uygulama satırlardan birine dokunduğunuzda bağlam menüsünü getirir.

Şimdi silme işlemini uygulamaya devam edelim. onDeleteİşleyiciden farklı contextMenuolarak, seçilen restoranın dizinini bize vermiyor. Bunu çözmek için, biraz çalışma gerektirecektir. Yeni bir işlev oluşturun ContentView:

private func delete(item restaurant: Restaurant) {
    if let index = self.restaurants.firstIndex(where: { $0.id == restaurant.id }) {
        self.restaurants.remove(at: index)
    }
}

Bu deleteişlev bir restoran nesnesine götürür ve restaurantsdizideki dizini arar . Dizini bulmak için, firstIndexişlevi çağırır ve arama kriterlerini belirleriz. İşlevin yaptığı, dizi boyunca döngü oluşturmak ve verilen restoranın kimliğini dizidekilerle karşılaştırmaktır. Bir eşleşme varsa, firstIndexişlev verilen restoranın dizinini döndürür. Dizini aldıktan sonra, restaurantsdiziyi restorandan çağırarak çıkarabiliriz remove(at:).

Sonra, aşağıdaki kod satırını altına yerleştirin // delete the selected restaurant:

self.delete(item: restaurant)

deleteKullanıcılar yalnızca Sil düğmesini seçtiğinde bu işlevi çağırırız .

Silme işlemini gerçekleştirmek için, restaurantsdiziyi @Stateanahtar kelimeyle işaretlememiz gerekir :

@State var restaurants = [ ... ]

Şimdi uygulamayı test etmeye hazırsınız. Uygulamayı çalıştırmak için tuvaldeki Oynat düğmesini tıklayın . Bağlam menüsünü açmak için satırlardan birini basılı tutun. Seç Sil ve seçtiğiniz restoran listeden kaldırılır görmelisiniz.

Favori düğmesinin uygulanmasına geçelim . Bu düğme seçildiğinde, uygulama seçilen restorana bir yıldız yerleştirir. RestaurantYapı zaten adında bir özelliği vardır isFavoriterestoran favori olarak işaretlenmiş olup olmadığını gösterir. Varsayılan olarak, değeri olarak ayarlanır false.

struct Restaurant: Identifiable {
    var id = UUID()
    var name: String
    var image: String
    var isFavorite: Bool = false
}

Silme özelliğine benzer şekilde, ContentViewfavori bir restoranı ayarlamak için ayrı bir işlev oluşturacağız . Yeni işlevi oluşturmak için aşağıdaki kodu ekleyin:

private func setFavorite(item restaurant: Restaurant) {
    if let index = self.restaurants.firstIndex(where: { $0.id == restaurant.id }) {
        self.restaurants[index].isFavorite.toggle()
    }
}

Kod, deletefonksiyonunkine çok benzer . İlk önce verilen restoranın indeksini öğreniriz. Dizini aldığımızda, isFavoritemalın değerini değiştiririz . Burada toggledeğeri değiştirmek için fonksiyonu çağırıyoruz . Örneğin, orijinal değeri isFavoriteolarak ayarlanmışsa false, truearamadan sonra değer değişecektir toggle().

Sonra, satırın kullanıcı arayüzünü ele almalıyız. Restoranın isFavoritemülkü ne zaman ayarlandığında true, satır bir yıldız göstergesini göstermelidir. BasicImageRowYapıyı bu şekilde güncelleyin :

struct BasicImageRow: View {
    var restaurant: Restaurant
 
    var body: some View {
        HStack {
            Image(restaurant.image)
                .resizable()
                .frame(width: 40, height: 40)
                .cornerRadius(5)
            Text(restaurant.name)
 
            if restaurant.isFavorite {
                Spacer()
 
                Image(systemName: "star.fill")
                    .foregroundColor(.yellow)
            }
        }
    }
}

Yukarıdaki kodda, sadece içine bir kod pasajı ekledik HStack. Eğer isFavoriteverilen restoranın özelliği ayarlandığında true, biz bir ara parçası ve satıra bir sistem görüntüsü ekleyin.

Favori özelliğini böyle uygularız . Son olarak, işlevi // mark the selected restaurant as favoriteçağırmak için aşağıdaki kod satırını ekleyin setFavorite:

self.setFavorite(item: restaurant)

Şimdi test etme zamanı. Tuvalde uygulamayı yürütün. Basın ve satır (örn Petite Oyster) birini basılı tutun ve ardından seçim Favorite . Satırın sonunda bir yıldız uygulaması görünecektir.

SwiftUI’de bağlam menülerini böyle uygularsınız. Umarım bu öğreticiyi okumaktan zevk alırsınız. Yeni kitabımızı bir sonraki kitabın SwiftUI’sinde yayınlayacağız. Lütfen güncellemelerimiz için bizi takip etmeye devam edin.

Başvuru için, tüm projeyi GitHub’dan indirebilirsiniz .