[Kotlin / Compose] Dialog, DropDownMenu

Compose를 사용하여 Dialog 생성

AlertDialog 함수를 사용하여 다이얼로그를 생성하고, 그 안에 제목, 내용 및 버튼을 정의할 수 있다.

@Composable
fun DialogEx() {
	// 다이얼로그의 표시 여부 
    var openDialog by remember { mutableStateOf(false) }
    // 다이얼로그 내에서 버튼을 누를 때마다 값이 증가 
    var counter by remember { mutableStateOf(0) }

    Column {
        Button(onClick = { openDialog = !openDialog }) {
            Text(text = "다이얼로그 열기")
        }
        Text(text = "카운터: $counter")
    }

	// 다이얼로그가 열려있을 때만 다이얼로그를 표시
    if (openDialog) {
    	// AlertDialog를 사용하여 다이얼로그를 생성
        AlertDialog(onDismissRequest = {
        	// openDialog = false로 설정하여 다이얼로그가 닫힌 상태임을 나타냄 
            openDialog = false
        }, confirmButton = {
        	// "더하기" 버튼을 만들고 버튼 클릭시 counter를 증가시킨 후 다이얼로그를 dismiss
            Button(onClick = {
                counter++
                openDialog = false
            }) {
                Text(text = "더하기")
            }
        }, dismissButton = {
        	// "취소" 버튼으로 다이얼로그를 dismiss 
            Button(onClick = {
                openDialog = false
            }) {
                Text(text = "취소")
            }
        }, title = {
        	// 다이얼로그의 제목을 설정
            Text(text = "더하기")
        }, text = {
        	// 다이얼로그의 내용을 설정 
            Text(text = "더하기 버튼을 누르면 카운터를 증가합니다.\n버튼을 눌러주세요.")
        })
    }
}

onDismissRequest
onDismissRequest는 다이얼로그가 닫히는 시점을 알려주는 이벤트 핸들러로 다이얼로그가 사용자에 의해 닫힐 때 호출된다.

Custom Dialog

Dialog 클래스를 사용하여 커스텀 가능한 다이얼로그를 만들 수 있으며 이를 통해 사용자 지정 레이아웃을 포함하여 다양한 스타일의 다이얼로그를 만들 수 있다.

@Composable
fun DialogEx() {
    var openDialog by remember { mutableStateOf(false) }
    var counter by remember { mutableStateOf(0) }

    Column {
        Button(onClick = { openDialog = true }) {
            Text(text = "다이얼로그 열기")
        }
        Text(text = "카운터: $counter")
    }

    if (openDialog) {
        Dialog(onDismissRequest = {
            openDialog = false
        }) {
        	// Surface를 사용하여 다이얼로그의 배경을 만들고 스타일을 지정 
            Surface {
            	// Column을 사용하여 수직으로 요소를 배치 
                Column(modifier = Modifier.padding(8.dp)) {
                    Text(text = "버튼을 클릭해주세요.\n * +1을 누르면 값이 증가됩니다.\n * -1을 누르면 값이 감소합니다.")
                    Row(modifier = Modifier.align(Alignment.End)) {
                        Button(onClick = {
                            openDialog = false
                        }) {
                            Text(text = "취소")
                        }
                        Button(onClick = {
                            openDialog = false
                            counter++
                        }) {
                            Text(text = "+1")
                        }
                        Button(onClick = {
                            openDialog = false
                            counter--
                        }) {
                            Text(text = "-1")
                        }
                    }
                }
            }
        }
    }
}

DropDownMenu

DropDownMenu는 사용자가 특정 작업을 선택할 수 있는 DropDownMenu를 제공하는 UI 요소로 사용자가 메뉴를 펼치고 원하는 항목을 선택할 수 있는 방식으로 작동한다.

@Composable
fun DropDownMenuEx() {
    var expandDropDownMenu by remember { mutableStateOf(false) }
    var counter by remember { mutableStateOf(0) }

    // Column을 사용하여 UI 요소를 세로로 배치
    Column {
        // Button을 클릭하면 expandDropDownMenu = true로 되어 드롭 다운 메뉴가 열림
        Button(onClick = { expandDropDownMenu = true }) {
            Text(text = "드롭다운 메뉴 열기")
        }
        Text(text = "카운터: $counter")
    }

    // DropdownMenu를 사용하여 드롭 다운 메뉴를 생성
    DropdownMenu(
        // expanded는 expandDropDownMenu 변수의 값을 사용하여 드롭 다운 메뉴가 열려 있는지를 결정
        expanded = expandDropDownMenu,
        // 사용자가 드롭 다운 메뉴를 닫으려고 할 때 호출되는 콜백 함수 
        onDismissRequest = {
            expandDropDownMenu = false
        }
    ) {
        // 드롭 다운 메뉴의 각 항목을 나타냄 
        DropdownMenuItem(
            text = { Text(text = "증가") },
            onClick = {
                counter++
            })
        DropdownMenuItem(
            text = { Text(text = "감소") },
            onClick = {
                counter--
            })
    }
}

• DropdownMenu의 주요 요소
  • DropdownMenu : 드롭 다운 메뉴 자체를 나타내는 요소로, 확장 여부를 제어하는 wxpanded 속성과 메뉴가 닫혔을 때 호출 되는 onDismissRequest 콜백 함수가 있다.
  • DropdownMenuItem : 드롭 다운 메뉴 내에서 개별 항목을 나타내는 요소로 사용자가 선택할 수 있는 옵션을 표시하는 텍스트와 해당 옵션을 클릭했을 때 실행 되는 작업을 정의하는 onClick 핸들러가 포함되어 있다.