Compose 숫자 선택 - NumberPicker

7월 22, 2024

NumberPicker

NumberPicker는 사용자가 숫자를 선택하도록 하여 입력 받는 방법이다.

스크롤로 숫자를 선택하여 사용자가 편하게 숫자를 입력할 수 있도록 할 수 있지만

숫자를 그대로 입력 받도록 구현하면 되기 때문에 반드시 필요한 요소도 아니다.

그림1. NumberPicker

그렇지만 날짜와 같이 어느 정도 선택 범위가 정해져 있는 년, 월, 일이나 시간 같은 값을 입력 받아야 할 때

사용자에게 제한된 범위를 제한하여 입력 받을 수 있는 NumberPicker가 더욱 높은 사용성을 제공할 수 있다.

그러면 이제 이러한 경우에 활용할 수 있는 NumberPicker는 구현하는 방법을 알아보도록 하겠다.

NumberPicker 구현

기존의 안드로이드에서는 NumberPicker를 구현하기 위한 방법을 제공하였지만

Compose에서는 NumberPicker 구현한 컴포저블이 정의되어 있지 않기 때문에 직접 구현해 줄 필요가 있다.

그렇기 때문에 구현하는 방법이 다양하게 있는데, 그 중 가장 간단한 방법은 기존의 NumberPicker와 AndroidView를 사용하는 방법이다.

AndroidView는 기존 안드로이드 뷰를 Compose에 통합 하는 데 사용하는 컴포저블 함수이다.

앞서 기존 안드로이드에서는 NumberPicker를 제공했었다 했는데

그러니 AndroidView를 사용하여 기존의 NumberPicker를 사용하면 간단하게 NumberPicker 구현이 가능해진다.

추가적으로 Dialog와 함께 사용하여 값을 입력 받도록 하였다.

그림2. 실행 화면

@Composable
fun MyNumberPicker(
    context: Context,
    onDismissRequest: () -> Unit,
    onConfirmation: (Int) -> Unit,
    default: Int
) {
    val numberPicker = NumberPicker(context)
    numberPicker.minValue = 0
    numberPicker.maxValue = 100
    numberPicker.value = default

    Dialog(onDismissRequest = { onDismissRequest() }) {
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .height(300.dp)
                .padding(16.dp),
            shape = RoundedCornerShape(16.dp),
        ) {
            Column(
                modifier = Modifier
                    .fillMaxSize(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally,
            ) {
                AndroidView(factory = { numberPicker })
                Row(
                    modifier = Modifier
                        .fillMaxWidth(),
                    horizontalArrangement = Arrangement.Center,
                ) {
                    TextButton(
                        onClick = { onDismissRequest() },
                        modifier = Modifier.padding(8.dp),
                    ) {
                        Text("취소")
                    }
                    TextButton(
                        onClick = { onConfirmation(numberPicker.value) },
                        modifier = Modifier.padding(8.dp),
                    ) {
                        Text("확인")
                    }
                }
            }
        }
    }
}

minValue: NumberPicker 최소 값
maxValue: NumberPicker 최대 값
value: NumberPicker 초기 값 - NumberPicker에서 숫자를 선택한 후 다시 NumberPicker를 열었을 때 앞서 선택한 숫자부터 시작하는 것이 자연스럽다.
Dialog 확인 버튼 클릭 시에만 값이 변경되며 Dialog가 닫히며 취소 버튼 클릭 시 Dialog가 닫히기만 한다.

참고

전체 코드 | Github

이 블로그 검색

Compose World