[Jetpack Compose] AlertDialog 사용하기

 : Compose 위에서 AlertDialog 를 사용해 봤습니다.

 

▶  AlertDialog 오버라이드 2개의 함수중  다음을 사용하겠습니다.  (AndroidAlertDialog.android.kt)

 

▶ 인자중  default 값이 없는 요소를 찾아 빌드에러가 안나오게 만들어 줍니다.

    onDismissRequest , confirmButton  만 넣으면 일단 컴파일및 실행은 됩니다.

Column() {
    Text("AlertDialog Test")
    AlertDialog(
        onDismissRequest = {},
        confirmButton = {},
    )
}

 

▶ confirmButton 에 Button 을 한개 추가해 줍니다.

 AlertDialog(
    onDismissRequest = {},
    confirmButton = {
        Button(onClick = {}) {
            Text("OK")
        }
    }
)

 

▶  dismissButton 추가하기

AlertDialog(
    onDismissRequest = {},
    --> 추가된 부분
    dismissButton = {
        Button(onClick = {}) {
            Text("CANCEL")
        }
    },
    <--     
    confirmButton = {
        Button(onClick = {}) {
            Text("OK")
        }
    }
)

 

 

▶  text 추가하기

AlertDialog(
    onDismissRequest = {},
    text = {Text("Main content")},    <-- 요기 추가
    dismissButton = {
        Button(onClick = {}) {
            Text("CANCEL")
        }
    },
    confirmButton = {
        Button(onClick = {}) {
            Text("OK")
        }
    }
)

 

 

▶   title 추가하기

AlertDialog(
    onDismissRequest = {},
    title = {Text(text ="Title",color = Color.Red )},  <-- 요기 추가
    text = {Text("Main content")},
    dismissButton = {
        Button(onClick = {}) {
            Text("CANCEL")
        }
    },
    confirmButton = {
        Button(onClick = {}) {
            Text("OK")
        }
    }
)

 

 

▶  OK 나 CANCEL  버튼 클릭시 AlertDialog 사라지게 하기

Column() {
    val showDialog = remember { mutableStateOf(true) }   <-- 요기 추가

    Text("AlertDialog Test")
    if(showDialog.value == true){                   <-- 요기 추가
        AlertDialog(
            onDismissRequest = {},
            title = {Text(text ="Title",color = Color.Red )},
            text = {Text("Main content")},
            dismissButton = {
                Button(onClick = {showDialog.value = false}) {   <-- onClick 작성
                    Text("CANCEL")
                }
            },
            confirmButton = {
                Button(onClick = {showDialog.value = false}) {   <-- onClick 작성
                    Text("OK")
                }
            }
        )
    }

}

 

 

 

 

▶  background  color 적용하기

AlertDialog(
    ~~ 중략 ~~
    backgroundColor = Color.LightGray
)

 

▶ shape 변경하기  

AlertDialog(
    ~~ 중략 ~~
    shape = RoundedCornerShape(20.dp),

)

 

 

AlertDialog(
    ~~ 중략 ~~
    shape = CircleShape,

)

 

 

 

▶  contentColor

  : contentColor 를 지정할 경우  title, text 의 색상에 영향을 줍니다.

    참고로 title 이나, text compose 에서 색상을 지정하면 contentColor는 무시됩니다.

AlertDialog(
    ~~ 중략 ~~
    contentColor = Color.Blue,
)

 

 

 

AlertDialog(
    ~~ 중략 ~~
    title = { Text(text ="Title",color = Color.Red )},
    text = {Text("Main content",color = Color.Green )},
    contentColor = Color.Blue,
)

 

 

▶  Modifier

AlertDialog(
    ~~ 중략 ~~
    modifier = Modifier.width(200.dp)
        .height(150.dp)

)

 

▶ DialogProperties 

   :   다이얼로그 속성 변경

AlertDialog(
    ~~ 중략 ~~
    properties = DialogProperties(
        dismissOnBackPress = true,
        dismissOnClickOutside = false,
        securePolicy = SecureFlagPolicy.SecureOn
    )

)

→ dismissOnBackPress

   :  back 버튼 처리로 true 를 주면 back 버튼 누를경우 onDismissRequest 가 호출됨.

 

→ dismissOnClickOutside

  : Dialog 외부 클릭시 처리로 true를 주면  Dialog 외부 클릭시 onDismissRequest 가 호출됨.

 

→ securePolicy

  : SecureFlagPolicy.SecureOn 를 사용하면 화면 캡쳐기능이 동작안함. 

 

 

  SecureFlagPolicy.SecureOff 대입하면 캡쳐 기능 동작함.

 

▶ onDismissRequest

   :  Back 버튼을 클릭하거나 AlertDialog 의 외부를 터치할 경우  호출됩니다.

      CANCEL (dismissButton) 이나 OK (confrimButton) 버튼 클릭시는 호출되지 않습니다.

 

 

< 기타>

▶ confirm && dismiss 버튼 위치 변경하기

 :  AlertDialog 의 다른 Override 메서드를 사용해야 합니다.

AlertDialog(onDismissRequest = { /*TODO*/ },
    title = {Text(text ="Title" ) },
    text = {Text("Main content")},
    buttons = {
        Row(modifier = Modifier.fillMaxWidth().padding(bottom = 12.dp),
            horizontalArrangement = Arrangement.SpaceEvenly,
        ){
            TextButton(onClick = {showDialog.value = false}){Text("확인")}
            TextButton(onClick = {showDialog.value = false}){Text("취소")}
        }
    },
    modifier =Modifier.width(200.dp).height(200.dp)
)

 

▶  text 입력 추가하기

AlertDialog(onDismissRequest = { /*TODO*/ },
    title = {Text(text ="SET NAME" ) },
    text = {
        TextField(
            value =textState.value,
            onValueChange = {
                textState.value = it
            }
        )
           },
    buttons = {
        Row(modifier = Modifier.fillMaxWidth().padding(bottom = 12.dp),
            horizontalArrangement = Arrangement.SpaceEvenly,
        ){
            TextButton(onClick = {
                showDialog.value = false
            }){Text("확인")}
            TextButton(onClick = {showDialog.value = false}){Text("취소")}
        }
    },
    modifier =Modifier.width(200.dp).height(200.dp)
)

 

▶  text 항목에 4개의 버튼을 추가해 봤습니다.

@Composable
fun NavikeyConnect(showDialog:MutableState<Boolean>){
    if(showDialog.value == true){
        AlertDialog(onDismissRequest = { /*TODO*/ },
            title = {Text(text ="Connect Navi hot key" ) },
            text = {
                Column() {
                    Row(modifier = Modifier
                        .fillMaxWidth()
                        .padding(bottom = 10.dp),
                        horizontalArrangement = Arrangement.SpaceEvenly,){
                        Button(modifier = Modifier.width(100.dp),
                            onClick = {
                                showDialog.value = false
                            }) {
                            Text("LEFT")
                        }

                        Button(modifier = Modifier.width(100.dp),
                            onClick = {
                                showDialog.value = false
                            }) {
                            Text("RIGHT")
                        }
                    }
                    Row(modifier = Modifier
                        .fillMaxWidth()
                        .padding(bottom = 10.dp),
                        horizontalArrangement = Arrangement.SpaceEvenly,){
                        Button(modifier = Modifier.width(100.dp),
                            onClick = {
                                showDialog.value = false
                            }) {
                            Text("UP")
                        }
                        Button(modifier = Modifier.width(100.dp),
                            onClick = {
                                showDialog.value = false
                            }) {
                            Text("DOWN")
                        }
                    }
                }
            },
            buttons = {
                Row(modifier = Modifier
                    .fillMaxWidth()
                    .padding(bottom = 12.dp),
                    horizontalArrangement = Arrangement.SpaceEvenly,
                ){
                    TextButton(onClick = {
                        showDialog.value = false
                    }){Text("확인")}
                    TextButton(onClick = {showDialog.value = false}){Text("취소")}
                }
            },
            modifier = Modifier
                .width(800.dp)
                .height(200.dp)
        )
    }
}

setContent {
    Column() {
            val showConnectDialog = remember { mutableStateOf(false) }
            Button(onClick = {
                showConnectDialog.value = true
            }){
                Text("CONNECT")
            }
            if(showConnectDialog.value == true) {
                NavikeyConnect(showConnectDialog)
            }
            ~~ 중략 ~~ 
    }
}

 

 

그럼 오늘도 수고하세요.