Bu yazıda, Jetpack compose'da açılır menünün nasıl oluşturulacağını öğreneceğiz. Yeniden kullanılabilecek genel bir şekillendirilebilir oluşturacağız. İnşa edeceğimiz şey, geleneksel açılır menüye benzer.

Tanıtım

Jetpack Compose, Google'ın Android geliştiricilerinin kullanıcı arayüzü oluşturmasını kolaylaştırmaya yönelik son girişimlerinden biridir.

“Jetpack Compose, yerel Android kullanıcı arayüzü oluşturmak için modern bir araç takımıdır. Jetpack Compose, daha az kod, güçlü araçlar ve sezgisel Kotlin API'leri ile Android'de UI geliştirmeyi basitleştirir ve hızlandırır." — Android Geliştiricileri

Jetpack Compose, son zamanlarda piyasaya sürülen kararlı sürüm 1.0'dır, yani üretime hazırdır. Bu nedenle, Android geliştirme için yeni nesil UI kitiyle nasıl çalışılacağını öğrenmek için harika bir zaman olacaktır.

Jetpack Compose'u kullanmak için Android Studio — Arctic Fox (2020.3.1) sürümünü yüklemeniz gerekecek .

Önkoşullar

Daha ileri gitmeden önce, Jetpack Compose ile nasıl çalışacağınıza dair temel bilgilere sahip olmalısınız. Oluşturma konusunda yeniyseniz, aşağıdaki makaleleri incelemenizi şiddetle tavsiye ederim:

• “ Jetpack Bileşenleri Oluştur (Bölüm 1) ”
• “Jetpack Compose'da Android Alt Sayfalarını Keşfedin”
• “ JetPack Compose'da Android Düzenleri Oluşturun ”
• “Jetpack Oluşturma ile Android Alt Gezinme Çubuğu”

Öncelikle, yer tutucuyu veya seçilen öğeyi görüntülemek için bir test içeren bir açılır görünüm ve ardından sağ uçta kullanıcıların onu bir açılır görünüm olarak tanımasına yardımcı olan bir açılır simge oluşturmamız gerekir. Koda bir göz atın:

İlk olarak, Boxdikdörtgen bir kenarlık çizmek için oluşturma işlevini kullandım. İçinde, çekici görünmesi için ConstraintLayoutbir dolguya sahibiz . Asıl tasarım şimdi sırasıyla seçili veya yer tutucu metni ve bir açılır simgeyi temsil eden ve bileşenleriyle başlar. Koda bir göz atın:16.dpTextIcon

Menü Parametreleri İçin Oluşturmada Düşünme

Oluşturmada, kullanıcı arabirimi adlı bir teori ile recomposition güncellenir - Kullanıcı arabirimini, aynı birleştirilebilir işlevi farklı argümanlarla çağırarak güncellersiniz. Oluşturma'da, veriler ana birleştirilebilirden dahili pencere bileşenine doğru aşağı doğru akar composablesve olaylar ters yönde akar.

Bu, işi mükemmel hale getirir, çünkü olaylar gerçekleştiğinde veriler güncellenir ve bu da yeni verilerle recompositionsonuçlanır . recompositionİşimiz tam olarak bu ComposeMenuşekilde.

ComposeMenu işlevi bir grup girdi alır. Koda bir göz atın:

@Composable
fun Menu(
    menuItems: List<String>,
    menuExpandedState: Boolean,
    seletedIndex : Int,
    updateMenuExpandStatus : () -> Unit,
    onDismissMenuView : () -> Unit,
    onMenuItemclick : (Int) -> Unit,
) {

• menuExpandedState — Menünün genişletilip genişletilmediğini ve kullanıcı arabiriminde görünür olup olmadığını temsil eder.
• seletedIndex — Listedeki geçerli seçili dizini temsil eder; aktif öğeyi yer tutucuda görüntülemek için kullanılır.
• updateMenuExpandStatus — üzerinden yeniden kompozisyonun menuExpandedStategörüntülenmesiyle sonuçlanan, true değerini değiştirmek için kullanılan basit bir Kotlin işlevi .ComposeMenu
• onDismissMenuView — Kullanıcı menüyü kapatmak istediğinde çağrılır.
• onMenuItemclick — Parametre olarak seçili dizinle son Kotlin işlevi. Seçilen indeksi bu fonksiyona ilettiğimizde, seletedIndexparametre güncellenir ve bu da tekrar seçilen öğeyi yer tutucuda görüntülemek için yeniden düzenleme ile sonuçlanır.

Burada DropdownMenubirleştirilebilir işlevi kullanıyoruz. A DropdownMenu, bir Popup'a benzer şekilde davranır ve kendisini ekranda konumlandırmak için üst düzenin konumunu kullanır. DropdownMenuItemBunun içinde , menüdeki her bir öğeyi tasarlamak için kullanacağız . Koda bir göz atın:

Çıktıya bir göz atın:

İşleri Bir Araya Getirin

DropdownMenuŞimdi , her bir oluşturulabilir üzerinde yapılan değişikliklere tepki vermek için yer tutucuyu ve tek bir oluşturulabilir işleve eklememiz gerekiyor . Koda bir göz atın:

Şimdi, ComposeMenuişlevi, görüntülemek istediğiniz gerçek oluşturma işlevinden çağırmamız gerekiyor. Koda bir göz atın:

Şimdi sadece aktivitenizden tetikleyin. İşte kod:

Son çıktıya bir göz atın:

Çözüm

Şimdilik hepsi bu kadar. Umarım faydalı bir şeyler öğrenmişsindir. Mutlu Besteler!

Okuduğunuz için teşekkürler.