Android Jetpack Compose – Exposed Dropdown Menu

Bu çalışmamızda klasik android yapısından olan Spinner nesnesine alternatif olarak oluşturacağımız Exposed Dropdown Menü örneği yapacağız, çalışmamız Spinner nesnesine göre daha estetik bir arayüze sahip olacaktır.

Çıktı:

Surface scopu içerisine;

Column(modifier = Modifier.fillMaxWidth().padding(10.dp).height(50.dp)) {
   ExposedDropdownMenu()
}

ExposedDropdownMenu adlı bir fonksiyon üretelim.

@Composable
fun ExposedDropdownMenu(){
   // kodlar bu aralığa yazılacak.
}

oluşturduğumuz fonksiyonun içerisine gerekli olan değişkenlerimizi üretelim.

    //listenin genişletilebilirlik durumunu kaydediyoruz. Varsayılan kapalı gelsin.
    var expanded by remember { mutableStateOf(false) }
    // şehirlerin listelenmesini sağlıyoruz.
    val cities = listOf("Istanbul","New York","Paris","Tokyo")
    // selectedText adında bir değişken üretiyoruz, varsayılan değerini boş bırakıyoruz.
    var selectedText by remember { mutableStateOf("") }
    // textfieldSize adlı bir değişken ürettik, yazının alanı kadar yer üretmek için.
    var textfieldSize by remember { mutableStateOf(Size.Zero)}

    //sağ köşede göstereceğimiz iconun, genişletilirlik durumuna göre değişmesini sağlıyoruz.
    val icon = if (expanded)
        Icons.Filled.ArrowForward
    else
        Icons.Filled.ArrowDropDown

ardından TextField ve DropdownMenu’yü kapsayabilmesi için Column üretelim.

Column() {
}

bu column içerisine önce OutlinedTextField nesnemizi (Klasik android’de EditText) tanımlıyoruz.

OutlinedTextField(
            value = selectedText,
            onValueChange = { selectedText = it },
            modifier = Modifier
                .fillMaxWidth()
                .onGloballyPositioned { coordinates ->
                    textfieldSize = coordinates.size.toSize()
                },
            label = {Text("Choose City")},
            trailingIcon = {
                Icon(icon,"contentDescription",
                    Modifier.clickable { expanded = !expanded })
            }
)

ardından OutlinedTextField’da bulunan sağ köşedeki icona basıldığında açılacak olan dropdown menünün tanımlanmasını sağlıyoruz.

DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
            modifier = Modifier
                .width(with(LocalDensity.current){textfieldSize.width.toDp()})
        ) {
            cities.forEach { label ->
                DropdownMenuItem(onClick = {
                    selectedText = label
                }) {
                    Text(text = label)
                }
            }
}

yukarıda oluşturduğumuz expanded adlı state ile dropdown içerisindeki expanded durumunu değiştirmiş oluyoruz. Böylece dropdown menünün açılması ve kapanması gibi eylemlerin gerçekleşmesini sağlıyoruz. Aynı durumu OutlinedTextField nesnesinin iconuna tıklanması zamanında da gerçekleştiriyoruz.

Çalışmamız bu kadar, kolay gelsin…