[Android/Kotlin]Compose Dialog

함수 뜯어보고 탐구하기

---

Dialog

팝업 메시지를 표시하거나 기본 앱 콘텐츠 위의 레이어에서 사용자 입력을 요청합니다. 사용자의 주의력을 끄는 방해 UI 환경을 만듭니다.

fun AlertDialog(
    onDismissRequest: () -> Unit,
    confirmButton: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    dismissButton: @Composable (() -> Unit)? = null,
    icon: @Composable (() -> Unit)? = null,
    title: @Composable (() -> Unit)? = null,
    text: @Composable (() -> Unit)? = null,
    shape: Shape = AlertDialogDefaults.shape,
    containerColor: Color = AlertDialogDefaults.containerColor,
    iconContentColor: Color = AlertDialogDefaults.iconContentColor,
    titleContentColor: Color = AlertDialogDefaults.titleContentColor,
    textContentColor: Color = AlertDialogDefaults.textContentColor,
    tonalElevation: Dp = AlertDialogDefaults.TonalElevation,
    properties: DialogProperties = DialogProperties()
)

 

알림 대화 상자 AlertDialog Composable은 Material Design 테마 대화상자를 만드는 데 편리한 API를 제공합니다. AlertDialog에는 대화의 특정 요소를 처리하기 위한 특정 매개변수가 있습니다. 여기에는 다음이 포함됩니다.

 

• title: 대화상자 상단에 표시되는 텍스트입니다.
• text: 대화상자 중앙에 표시되는 텍스트입니다.
• icon: 대화상자 상단에 표시되는 그래픽입니다.
• onDismissRequest: 사용자가 대화상자 외부를 탭하는 등 대화상자를 닫을 때 호출되는 함수입니다.
• dismissButton: 닫기 버튼 역할을 하는 컴포저블입니다.
• confirmButton: 확인 버튼 역할을 하는 컴포저블입니다.

아래는 알림 대화상자 사용에 대한 예시입니다.

@Composable
fun AlertDialogExample(
    onDismissRequest: () -> Unit,
    onConfirmation: () -> Unit,
    dialogTitle: String,
    dialogText: String,
    icon: ImageVector,
) {
    AlertDialog(
        icon = {
            Icon(icon, contentDescription = "Example Icon")
        },
        title = {
            Text(text = dialogTitle)
        },
        text = {
            Text(text = dialogText)
        },
        onDismissRequest = {
            onDismissRequest()
        },
        confirmButton = {
            TextButton(
                onClick = {
                    onConfirmation()
                }
            ) {
                Text("Confirm")
            }
        },
        dismissButton = {
            TextButton(
                onClick = {
                    onDismissRequest()
                }
            ) {
                Text("Dismiss")
            }
        }
    )
}

 

*AlertDialog에서 text라고 람다 형식의 매개변수가 있으므로 한 개의 텍스트만 들어가는 것이 아니라 여러가지 contents를 사용할 수 있습니다. ex ) text가 3개가 들어가거나 Image가 들어가거나

이러한 사항은 title, icon도 해당합니다.

 

이러한 정해져있는 형식이 아닌 Custom을 하는 자유 형식을 사용할 경우에는 대화상자 Dialog Composable을 사용해야 합니다.

 

Dialog는 콘텐츠에 스타일 지정이나 사전 정의된 슬롯을 제공하지 않는 기본 Composable입니다. 이 형태는 Card와 같은 컨테이너로 직접 Custom해서 채워야 합니다.

• onDismissRequest: 사용자가 대화상자를 닫을 때 호출되는 람다입니다.
• properties: 맞춤설정의 추가 범위를 제공하는 DialogProperties의 인스턴스입니다.

actual fun Dialog(
    onDismissRequest: () -> Unit,
    properties: DialogProperties,
    content: @Composable () -> Unit
)

 

Dialog로 AlertDialog를 구현한 예시입니다.

@Composable
fun DialogWithImage(
    onDismissRequest: () -> Unit,
    onConfirmation: () -> Unit,
    painter: Painter,
    imageDescription: String,
) {
    Dialog(onDismissRequest = { onDismissRequest() }) {
        // Draw a rectangle shape with rounded corners inside the dialog
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .height(375.dp)
                .padding(16.dp),
            shape = RoundedCornerShape(16.dp),
        ) {
            Column(
                modifier = Modifier
                    .fillMaxSize(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally,
            ) {
                Image(
                    painter = painter,
                    contentDescription = imageDescription,
                    contentScale = ContentScale.Fit,
                    modifier = Modifier
                        .height(160.dp)
                )
                Text(
                    text = "Title",
                    modifier = Modifier.padding(16.dp),
                )
                Text(
                    text = "This is an example of an alert dialog with buttons",
                    modifier = Modifier.padding(16.dp),
                )
                Row(
                    modifier = Modifier
                        .fillMaxWidth(),
                    horizontalArrangement = Arrangement.Center,
                ) {
                    TextButton(
                        onClick = { onDismissRequest() },
                        modifier = Modifier.padding(8.dp),
                    ) {
                        Text("Dismiss")
                    }
                    TextButton(
                        onClick = { onConfirmation() },
                        modifier = Modifier.padding(8.dp),
                    ) {
                        Text("Confirm")
                    }
                }
            }
        }
    }
}

 

@Composable
fun exDialog(){
    var openDialog by remember { mutableStateOf(true) }
    if (openDialog){
        Dialog(
            onDismissRequest = { openDialog = false }
        ) {
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(375.dp)
                    .padding(16.dp),
                shape = RoundedCornerShape(16.dp),
            ) {
                Column(
                    modifier = Modifier
                        .fillMaxSize(),
                    verticalArrangement = Arrangement.Center,
                    horizontalAlignment = Alignment.CenterHorizontally,
                ) {
                    Image(
                        painter = painterResource(R.drawable.arrow_drop_up_circle) ,
                        contentDescription = "Yus ex",
                        contentScale = ContentScale.Fit,
                        modifier = Modifier
                            .height(160.dp)
                    )
                    Text(
                        text = "This is a dialog with buttons and an image.",
                        modifier = Modifier.padding(16.dp),
                    )
                    Row(
                        modifier = Modifier
                            .fillMaxWidth(),
                        horizontalArrangement = Arrangement.Center,
                    ) {
                        TextButton(
                            onClick = { openDialog = false },
                            modifier = Modifier.padding(8.dp),
                        ) {
                            Text("Dismiss")
                        }
                        TextButton(
                            onClick = { openDialog = false },
                            modifier = Modifier.padding(8.dp),
                        ) {
                            Text("Confirm")
                        }
                    }
                }
            }
        }
    }
}

 

구분선 Divider

• HorizontalDivider: 열에서 항목을 구분합니다.
• VerticalDivider: 행의 항목을 구분합니다.

fun HorizontalDivider(
    modifier: Modifier = Modifier,
    thickness: Dp = DividerDefaults.Thickness,
    color: Color = DividerDefaults.color,
)

 

fun VerticalDivider(
    modifier: Modifier = Modifier,
    thickness: Dp = DividerDefaults.Thickness,
    color: Color = DividerDefaults.color,
)

 

구성 요소의 매개 변수

• thickness: 이 매개변수를 사용하여 구분선의 두께를 지정합니다.
• color: 이 매개변수를 사용하여 구분선의 색상을 지정합니다.

        HorizontalDivider(thickness = 2.dp)