안녕하세요. 이번 포스팅에서는 안드로이드 Jetpack Compose의 RadioButton을 사용해서 RadioButton Dialog를 구현하겠습니다. RadioButton의 특징은 다중 선택이 안되고, 한 가지만 선택할 수 있는 UI입니다. 그래서 일반적으로는 RadioGroup 등을 이용해서 RadioButton의 그룹을 만든 후, 한 가지만 선택되게 구현해 왔습니다. 그런데 Compose의 Material3 RadioButton에서는 RadioGroup은 없습니다. 어떤 형태로 구현할 수 있는지 예제를 통해 확인하겠습니다. 1. RadioButton Dialog 만들기 안드로이드 Compose의 Material3에서 제공하는 RadioButton을 활용해서 만든 RadioButon Dialog입..

안녕하세요. 이번 포스팅에서는 안드로이드 Jetpack Compose에서 Checkbox를 보여주는 Dialog를 만들겠습니다. Compose의 기본 작동방식에 대해 더 초점이 맞춰져 있기 때문에 체크박스를 어떻게 만들고, 각 체크 상태를 어떤 식으로 처리해야 하는지를 중점적으로 설명하겠습니다. 1. Checkbox Dialog 만들기 Compose Material3에서 제공하는 Checkbox를 사용해서 Dialog를 만들 예정입니다. 웹 개발을 해보신 분들이라면 Checkbox에는 텍스트를 표시하는 label도 필요하다고 생각할 수 있지만, 안드로이드 Compose에서는 Row를 이용해서 Checkbox와 Text를 배치합니다. 아래 코드를 보면 어떤 식으로 label을 표현하는지 확인할 수 있습니다..

안녕하세요. 이번 포스팅에서는 안드로이드 Jetpack Compose에서 Text를 입력할 수 있는 BasicTextField를 사용해서 Dialog를 구현하겠습니다. Compose에서는 TextField와 BasicTextField가 있는데 디자인을 커스텀하기 위해서는 BasicTextField를 사용하는 것이 유리하기 때문에 BasicTextField로 Dialog를 만들겠습니다. 1. BasicTextField Dialog 만들기 Compose Material3에서 제공하는 Dialog와 BasicTextField를 사용해서 TextFieldDialog를 만들었습니다. text를 표시하기 위해서 TextState를 관리하는 변수를 만들고, 해당 변수를 BasicTextField의 value와 onV..

안녕하세요. 이번 포스팅에서는 안드로이드 Jetpack Compose에서 TimePickerDialog를 구현하겠습니다. TimePickerDialog는 시간을 설정할 때 유용하게 사용할 수 있는 Dialog입니다. Compose Material3에서 제공하는 TimePicker를 사용해서 아래 사진과 같은 Dialog를 만들겠습니다. 1. TimePicker Dialog 만들기 Compose Material3에서 제공하는 Dialog와 TimePicker를 사용해서 TimePickerDialog를 만들었습니다. Compose는 상태를 관리하기 때문에 rememberTimePickerState를 통해 초기값이나 24시간제와 같은 옵션을 설정할 수 있습니다. 해당 상태변수를 TimePicker의 state..

안녕하세요. 이번 포스팅에서는 안드로이드 Jetpack Compose에서 DatePicker Dialog를 구현하는 방법에 대해 포스팅하겠습니다. 직접 구현할 수도 있겠지만, 지금은 compose material3에서 기본으로 제공해주는 DatePickerDialog와 DatePicker 2가지를 이용해서 DatePicker Dialog를 구현하겠습니다. 1. DatePicker Dialog 만들기 먼저, compose material3에서 제공하는 DatePickerDialog와 DatePicker를 이용해서 UI를 만들겠습니다. datePickerState를 DatePicker에 전달해야하는데 UTC와 관련된 주의사항이 있습니다. initialSelectedDateMillis에는 현재 선택된 날짜에 ..

안녕하세요. 이번 포스팅에서는 안드로이드 Jetpack Compose에서 전역으로 사용할 수 있는 로딩 팝업창을 띄우는 방법에 대해 포스팅하겠습니다. 로딩을 보여주는 방법은 무수히 많지만, 저는 xml 시절부터 안드로이드에서 제공하는 기본 dialog를 상속받아서 구현하는 형태로 많이 사용했습니다. 왜냐하면 dialog에는 dismissOnBackPress, dismissOnClickOutSide 등 기본으로 제공하는 기능이 많아서 개발자가 따로 구현하지 않아도 되기 때문입니다. Compose에서도 비슷한 방법으로 간단하게 로딩창을 보여줄 수 있습니다.1. Loading Dialog 만들기전역 로딩 팝업창을 만들기 위해 먼저 LoadingState라는 싱글턴 객체를 만들어 로딩 상태를 관리합니다. 그런 ..

안녕하세요. 이번 포스팅에서는 안드로이드 Jetpack Compose에서 BottomSheetDialog를 구현하는 방법에 대해서 설명하겠습니다. BottomSheetDialog는 하단에서 위로 올라오는 형태의 dialog로써 현대 앱에서 많이 볼 수 있습니다. 기존의 xml에서 구현할 때보다 많이 쉬워졌는데 아래 예제를 통해서 설명하겠습니다. 1. Compose에서 BottomSheetDialog 사용하기 안드로이드 Jetpack Compose에서 BottomSheetDialog를 사용하면 사용자에게 추가 정보를 제공하거나 선택을 요구하는 등의 상호작용을 제공하는 상황에서 효과적입니다. Compose에서는 Material3에서 제공하는 ModalBottomSheet 컴포저블을 활용하여 손쉽게 구현할 수..

안녕하세요. 이번 포스팅에서는 안드로이드 Jetpack Compose에서 Custom Dialog를 구현하는 방법에 대해서 설명하겠습니다. Compose는 선언적 UI 프레임워크로, UI를 구성하는 방식이 기존의 XML 기반 방식과는 크게 다릅니다. 이러한 차이로 인해 Dialog를 구현하는 방식에도 몇 가지 변화가 생겼습니다. 1. Compose에서 Dialog 구현하기 Jetpack Compose에서 Dialog를 사용하는 기본적인 방법은 Dialog 컴포저블을 직접 사용하는 것입니다. Dialog 컴포저블을 사용하면, Dialog의 기본적인 요소들이 전부 구현돼있는 것을 사용하면 됩니다. 그리고 Compose의 상태 관리 시스템과도 잘 통합되어 있습니다. 2. Custom Dialog 만들기 Com..