Dialog & Custom Dialog

 

오늘은 jetpack compose 를 이용하여 다이얼로그 만드는 방법을 알아보고자 한다🙂

첫번째로, 기본 다이얼로그이다. 기본 다이얼로그는 AlertDialog 로 만들어야 한다. 

기본 다이얼로그

1. AlertDialog 의 기본 구조 및 정의

다이얼로그를 만들려면 AlertDialog 를 사용해야 하는데, 아래와 같은 구조로 코드를 작성하면 된다. 

AlertDialog(
    onDismissRequest = {},
    confirmButton = {},
    dismissButton = {},
    title = {},
    text = {}
)

 

여기서 AlertDialog 정의로 들어가보면 아래와 같다.

@Composable
fun AlertDialog(
    onDissmissRequest: () -> Unit,
    confirmButton: @Composable () -> Unit,
    dismissButton: @Composable (() -> Unit)? = null,
    title: @Composable (() -> Unit)? = null,
    text: @Composable (() -> Unit)? = null
) { .. }

 

onDismissRequest 를 제외하고 confirmButton, dismissButton, title, text 가 slotAPI 로 정의되어 있는 것을 확인할 수 있다. slotAPI 유무는 @Composable 어노테이션을 통해 알 수 있다.

---

2. AlertDialog 의 파라미터 설명

1) onDismissRequest

다이얼로그 밖을 클릭했을 때 어떤 행동을 할 것인지에 정의하면 된다.

다이얼로그를 종료하거나 아님 종료하지 못하게 막는 방법이 있다.

 

2) confirmButton

다이얼로그의 오른쪽 하단에 배치되는 버튼이다.

@Composable 어노테이션이 붙은 slotAPI 이기 때문에, 버튼 자체도 정의를 해야한다.

 

3) dismissButton

다이얼로그의 왼쪽 하단에 배치되는 버튼이다.

마찬가지로 @Composable 어노테이션이 붙은 slotAPI 이기 때문에, 버튼 자체도 정의를 해야한다.

보통 취소하기 등을 표시한다.

 

4) title

다이얼로그의 제목을 표기한다.

 

5) text

다이얼로그의 내용을 표기한다.

---

3. 예시 화면

기본 다이얼로그 화면

---

두번째는 커스텀 다이얼로그를 만드는 방법이다. 원하는 모양으로 커스터마이징을 할 때 쓰기 좋다.

이때 필요한 것은 Dialog 이다.

커스텀 다이얼로그

1. Dialog 기본 구조

Dialog 의 구조는 아래와 같다.

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

 

여기서 properties 는 기본값이 있고, onDismissRequest 와 content 를 정의해주면 된다.

---

2. Dialog 파라미터 설명

1) onDismissRequest : 사용자가 다이얼로그 바깥의 화면을 눌렀을 때 발생할 이벤트를 처리해주면 된다.

2) content : Slot Api 로, 여기서 만들고 싶은 화면을 구성하면 된다. 보통, content 를 만들때는 가장 최상위 계층으로 Surface 를 사용한다.

---

3. 예시 화면

커스텀 다이얼로그 화면

 

중간에 TextField 를 배치해봤다. 이런 식으로 다이얼로그 화면을 만들 수 있다.