[Android/Compose] AlertDialog 사용하기

안녕하세요! Compose에서 Android 시스템 기본 다이얼로그인 Alert Dialog에 대해 알아보고자 합니다. 이 글에서는 Compose Alert Dialog의 기본 개념과 사용법에 대해 자세히 다루겠습니다.

✅ Compose Dialog란?

Compose Alert Dialog는 Android Jetpack Compose 라이브러리의 일부로, 대화 상자를 만들기 위한 강력하고 유연한 도구입니다. 이를 통해 앱 내에서 다양한 종류의 대화 상자를 생성하고 제어할 수 있습니다. 예를 들면 경고 메시지, 선택 옵션, 입력 폼 등을 포함합니다.

✅ Compose Alert Dialog 사용하기

✓ Alert Dialog 예제

다음으로, 대화 상자의 내용과 동작을 정의하는 컴포저블을 작성합니다. 예를 들어 경고 메시지 Dialog를 만든다면 아래와 같은 예제가 될 것입니다.

@Composable
fun AlertDialogExample() {
    val showDialog = remember { mutableStateOf(false) }

    if (showDialog.value) {
        AlertDialog(
            onDismissRequest = { showDialog.value = false },
            title = { Text(text = "경고") },
            text = { Text(text = "작업을 진행하시겠습니까?") },
            confirmButton = {
                Button(
                	onClick = { 
                	showDialog.value = false 
                	// 확인 동작
                }) {
                    Text("확인")
                }
            },
            dismissButton = {
                Button(
                	onClick = {
                	showDialog.value = false
                	// 취소 동작
                }) {
                    Text("취소")
                }
            }
        )
    }
}

AlertDialog에는 onDismissRequest, title, text, confirmButton, dismissButton 등의 파라미터가 있습니다.

• onDismissRequest: 대화상자 바깥쪽을 터치하거나 뒤로 가기 버튼을 누를 때 호출됩니다.
• title: 대화상자의 제목을 설정합니다.
• text: 대화상자의 내용을 설정합니다.
• confirmButton: 확인 버튼을 설정합니다. 사용자가 이 버튼을 클릭하면 showDialog.value를 false로 설정하여 대화상자를 닫습니다.
• dismissButton: 취소 버튼을 설정합니다. 사용자가 이 버튼을 클릭하면 showDialog.value를 false로 설정하여 대화상자를 닫습니다.

✓ Alert Dialog 호출

마지막으로, 앱 내에서 해당 함수를 호출하여 대화 상자가 나타나도록 설정합니다.

@Composable
fun App() {
    // ...

    AlertDialogExample()

    // ...
}

✅ 추가적인 기능과 커스터마이징

Compose에서는 AlertDialog외에 Dialog라는 Composable을 통해 많은 유용한 기능과 커스터마이징 옵션을 제공합니다.

더 예제 코드는 Compose Material Dialogs GitHub 저장소에서 확인할 수 있습니다.