Compose 대화상자 - AlertDialog, Dialog

7월 21, 2024

AlertDialog, Dialog

AlertDialog, Dialog 둘 다 팝업 메시지를 나타내기 위한 대화 상자를 만드는 컴포넌트이다.

팝업이 되어서 나타나기 때문에 사용자가 해당 메시지의 집중할 수 있도록 UI 구성이 가능하다.

그래서 사용자에게 작업을 확인 받아야 할 경우, 사용자에게 선택이나 입력을 요구하는 일이 있을 경우 주로 사용된다.

그림1. 대화 상자 예시

그러면 이러한 대화 상자를 만들기 위해서 AlertDialog, Dialog 2가지를 사용할 수 있는데, 이 2 가지는 각각 용도와 기능적으로 몇 가지 차이점이 있다.

가장 큰 차이점을 말하면 Dialog는 레이아웃을 자유롭게 구성이 가능하고 AlertDialog는 제공하는 레이아웃에 따라 구성해야 한다는 것이다.

상세한 차이들은 아래에서 알아보도록 하겠다.

AlertDialog

AlertDialog는 사용자가 결정을 내려야 하거나, 중요한 내용을 알리고자 할 경우 경고나 확인 취소 목적으로 사용한다.

그리고 AlertDialog는 제목, 텍스트, 취소/확인 버튼과 같이 이미 정의된 레이아웃에서 각 값을 채워 넣을 수 있도록 되어 있다.

그렇기 때문에 동일한 레이아웃으로만 구성 가능하지만, 이는 달리 말하면 형식적인 레이아웃으로 간단하게 Dialog 구현할 수 있다는 장점이 된다.

그림2. AlertDialog

@Composable
fun Dialog01(
    onDismissRequest: () -> Unit,
    onConfirmation: () -> Unit,
    dialogTitle: String,
    dialogText: String,
) {
    AlertDialog(
        icon = {
            Icon(Icons.Default.Info, contentDescription = "")
        },
        title = {
            Text(text = dialogTitle)
        },
        text = {
            Text(
                text = dialogText,
                modifier = Modifier.fillMaxWidth(),
                textAlign = TextAlign.Center
            )
        },
        onDismissRequest = {
            onDismissRequest()
        },
        confirmButton = {
            TextButton(onClick = { onConfirmation() })
            {
                Text("확인", color = Color(250, 46, 46, 255))
            }
        },
        dismissButton = {
            TextButton(onClick = { onDismissRequest() })
            {
                Text("취소")
            }
        }
    )
}

icon : 아이콘
title : 제목
text : 내용
onDismissRequest : 대화 상자 사라졌을 경우 동작
confirmButton : 확인 버튼 클릭 시 동작
dismissButton : 취소 버튼 클릭 시 동작

Dialog

앞서 보았던 AlertDialog와 달리 Dialog는 정해진 틀이 없이 자유롭게 레이아웃을 만들어 낼 수 있다.

그래서 자유롭게 이미지를 넣거나 버튼의 위치를 바꾸거나 가능해 높은 자유도를 갖는다.

하지만 이는 다르게 말하면 레이아웃을 처음부터 전부 구성해야 한다는 의미이다.

그렇기 때문에 앞서 그림 2서 본 것처럼 형식적인 레이아웃으로 충분하면 AlertDialog를 사용하고, 거기서 커스텀이 필요하다고 하면 Dialog를 사용하면 된다.

그림3. Dialog

@Composable
fun Dialog02(onDismissRequest: () -> Unit, onConfirmation: () -> Unit) {
    Dialog(onDismissRequest = { onDismissRequest() }) {
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .height(200.dp)
                .padding(16.dp),
            shape = RoundedCornerShape(16.dp),
        ) {
            Column(
                modifier = Modifier.fillMaxSize().padding(16.dp),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally,
            ) {
                Text(text = "자유롭게 텍스트나 이미지들을 넣어서 레이아웃 구성이 가능", Modifier.padding(8.dp))
                Row(
                    modifier = Modifier.fillMaxWidth(),
                    horizontalArrangement = Arrangement.Center,
                ) {
                    TextButton(onClick = { onDismissRequest() }) {
                        Text("취소")
                    }
                    TextButton(onClick = { onConfirmation() }) {
                        Text("확인", color = Color(250, 46, 46, 255))
                    }
                }
            }
        }
    }
}

Dialog 내에서 자유롭게 레이아웃을 구성하였다.

참고

전체 코드 | Github

이 블로그 검색

Compose World