Compose 박스 메뉴 - DropdownMenuBox

7월 25, 2024

DropdownMenuBox

DropdownMenuBox는 사용자가 옵션을 선택하도록 하는 UI 중 많이 사용하는 것 중 하나 이다.

그림1. DropdownMenuBox

기본적으로 접혀 있다가 선택 시에만 펼쳐 서 옵션들을 나타내기 때문에 많은 옵션들을 담을 수 있으며, 공간을 덜 낭비하게 된다.

선택해야 할 옵션이 많지 않으면 굳이 사용할 필요는 없지만

공간을 덜 낭비하고, DropdownMenuBox를 사용하면 여기서 무엇을 위하여 선택하는 것이 명확히 알 수 있어서 경우에 따라서 유용하게 사용할 수 있다.

ExposedDropdownMenuBox 사용

Compose에서 DropdownMenuBox를 구현하기 위해서는 ExposedDropdownMenuBox를 사용할 수 있다.

ExposedDropdownMenuBox 구현을 알아보기 전 먼저 여기서 사용할 각 변수들을 먼저 살펴보면

val sample = listOf("item01", "item02", "item03", "item04")
var text by remember { mutableStateOf("") }
var expanded by remember { mutableStateOf(false) }

sample : 메뉴 박스서 보여줄 선택 옵션들
text : 옵션 선택 시 해당 옵션 값 지정. 특정한 값에 대한 선택이면 이런 식으로 값을 저장할 수도 있으며, 옵션에 따른 결과가 동작일 경우에는 각 Click 이벤트를 구현하면 된다.
expanded : 메뉴 박스가 나타날지 감춰질지 여부

앞서 ExposedDropdownMenuBox서 사용할 변수들을 알아 봤으니 계속해서 ExposedDropdownMenuBox를 사용하는 것을 보면

ExposedDropdownMenuBox 구현하기 위해서 OutlinedTextField와 ExposedDropdownMenu를 같이 사용할 것이다.

왜냐하면 ExposedDropdownMenu 자체는 expended=false일 경우 감춰지기 때문에 보이지 않으니, 클릭조차 할 수가 없기 때문이다.

하지만 ExposedDropdownMenuBox는 이름에 Box가 들어가는 만큼 Box 컴포저블 같이 내부의 컴포넌트들이 겹쳐져 나타나게 되고

그러니 TextField와 같이 Box에 넣어주었기 때문에 TextField는 보여지고 이를 클릭함으로써 박스 메뉴가 나타나게 하면 된다.

이러한 이유로 OutlinedTextField와 ExposedDropdownMenu를 같이 사용하는 것이다.

그림2. Box Menu

ExposedDropdownMenuBox(expanded = expanded, onExpandedChange = { expanded = !expanded }) {
    OutlinedTextField(
        value = text, onValueChange = {}, modifier = Modifier.menuAnchor(),
        label = { Text("Options") },
        readOnly = true,
        trailingIcon = {
            ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded)
        }
    )

    ExposedDropdownMenu(expanded = expanded, onDismissRequest = { expanded = false },
        modifier = Modifier.background(Color(255, 209, 209, 255))) {
        sample.forEach { item ->
            DropdownMenuItem(text = { Text(item) }, onClick = {
                text = item
                expanded = false
            })
        }
    }
}

modifier = Modifier.menuAnchor() 이 부분을 지정해 주어야만 해당 TextField가 메뉴가 나타나는 기준이 되도록 동작한다.
물론 여기서 반드시 TextField를 사용할 필요는 없다.
sample 리스트를 forEach문으로 DropdownMenuItem을 추가해 주었다.

참고

전체 코드 | Github

이 블로그 검색

Compose World