Jetpack Compose 에서 Dialog 구현하기

Dialog 는 안드로이드에서 생각보다 자주 사용되는 기능입니다.

 

단순하게 정보를 보여주고 확인버튼을 누르면 Dismiss 되는 형태부터

이런저런 옵션을 설정한다던지

유저가 정보들을 입력할 수 있는 창을 제공한다던지

 

현재 화면에서 가볍게 무언가를 띄울 때 가장 유용하게 사용되는게 이 Dialog 인데

Compose 환경에서 Dialog 는 기존보다 쉽게 구현할 수 있도록 지원해주고 있습니다.

 

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

 

이전에는 Dialog 객체를 생성한 뒤 거기에 setContentView 를 통해 xml 레이아웃을 붙였었는데

이제는 Dialog 라는 Composable 의 Content 영역에 View 를 그려주기만 하면 됩니다.

 

@Composable
fun CustomDialog(onDismiss: ()->Unit){
    Dialog(onDismissRequest = onDismiss) {
        Box(modifier = Modifier
            .width(320.dp)
            .height(160.dp)
            .padding(0.dp)
            .background(
                color = White,
                shape = RoundedCornerShape(12.dp)
            )
            ){
            Text(
                modifier = Modifier
                    .align(Alignment.TopCenter)
                    .offset(y = 16.dp),
                text = "Custom Dialog",
                fontWeight = FontWeight.SemiBold,
                fontSize = 16.sp,
                color = Color.Black)
            Text(
                modifier = Modifier
                    .align(Alignment.Center)
                    .padding(horizontal = 28.dp),
                text = "Compose 에서 Dialog 를 구현하는 예제입니다.",
                fontWeight = FontWeight.Normal,
                fontSize = 13.sp,
                color = Color.Black)
            Button(
                modifier = Modifier
                    .fillMaxWidth()
                    .align(Alignment.BottomCenter),
                elevation = ButtonDefaults.elevation(defaultElevation = 0.dp),
                onClick = {onDismiss()},
                colors = ButtonDefaults.buttonColors(backgroundColor = Color.Transparent)
            ) {
                Text(text = "확인",
                    color = Teal)
            }
        }
    }
}

 

안드로이드 개발자이지만 애플 유저라 아이폰 스럽게 만들어봤습니다.

 

이런 식으로 View 를 구현하고 Dialog 의 상태는 외부에서 이벤트를 통해 remember 된 State 로 처리해주시면 됩니다

Surface(
    modifier = Modifier.fillMaxSize(),
    color = MaterialTheme.colors.background
) {
    val openDialog = remember {
        mutableStateOf(false)
    }
    Button(onClick = { openDialog.value = true }) {
        Text(text = "Show Dialog")
    }
    if (openDialog.value)
    CustomDialog {
        openDialog.value = false
    }
}

 

이 코드를 에뮬레이터에서 실행시켜 보면 아래와 같이 정상적으로 동작합니다.