시간 선택도구

시간 선택도구는 사용자가 시간을 선택하는 방법을 제공합니다. TimePicker 및 TimeInput 컴포저블을 사용하여 앱에 시간 선택 도구를 구현할 수 있습니다.

유형

시간 선택 도구에는 두 가지 유형이 있습니다.

  • 시계 화면: 사용자가 시계 화면에서 핸들을 움직여 시간을 설정할 수 있습니다.
  • 입력: 사용자가 키보드를 사용하여 시간을 설정할 수 있습니다.

다음 이미지는 왼쪽에 전화 걸기 시간 선택 도구의 예를 보여줍니다. 오른쪽에 있는 입력 시간 선택 도구를 이용하세요.

다이얼과 시간 선택 도구 입력
그림 1. 다이얼과 시간 입력 선택 도구

API 노출 영역

시간 선택 도구를 구현하려면 TimePicker 또는 TimeInput 컴포저블을 사용합니다.

  • TimePicker: 다이얼 시간 선택 도구를 구현합니다.
  • TimeInput: 입력 시간 선택 도구를 구현합니다.
를 통해 개인정보처리방침을 정의할 수 있습니다.

상태

TimePicker와 TimeInput 모두 TimePickerState 이렇게 하면 다른 광고 항목을 표시할 때 을 클릭합니다. 또한 사용자가 선택 도구를 클릭합니다.

대화상자

시간 선택 도구가 대화상자에 표시됩니다. 이 가이드의 예에서는 대화상자를 사용하지 않습니다. 대화상자를 사용하는 예시는 시간 선택기용 대화상자 가이드를 참고하세요.

다이얼 시간 선택 도구

이 스니펫은 기본 전화 걸기 시간 선택 도구를 구현하는 방법을 보여줍니다.

@Composable
fun DialExample(
    onConfirm: () -> Unit,
    onDismiss: () -> Unit,
) {
    val currentTime = Calendar.getInstance()

    val timePickerState = rememberTimePickerState(
        initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
        initialMinute = currentTime.get(Calendar.MINUTE),
        is24Hour = true,
    )

    Column {
        TimePicker(
            state = timePickerState,
        )
        Button(onClick = onDismiss) {
            Text("Dismiss picker")
        }
        Button(onClick = onConfirm) {
            Text("Confirm selection")
        }
    }
}
TimePickers.kt

이 스니펫에서 다음을 고려하세요.

  • Calendar.getInstance()는 TimePickerState를 현재 있습니다.
  • TimePicker 컴포저블은 timePickerState을 매개변수로 사용하여 시간 선택 도구를 표시합니다.
  • 구현에는 선택을 확인하는 버튼과 선택 도구를 닫는 버튼의 두 가지 버튼이 포함되어 있습니다.

이 구현은 다음과 같이 표시됩니다.

다이얼 시간 선택 도구 사용자는 다이얼을 사용하여 시간을 선택할 수 있습니다.
그림 2. 다이얼 시간 선택 도구

시간 선택 도구 입력

이 스니펫은 기본 입력 형식 시간 선택 도구를 구현하는 방법을 보여줍니다.

@Composable
fun InputExample(
    onConfirm: () -> Unit,
    onDismiss: () -> Unit,
) {
    val currentTime = Calendar.getInstance()

    val timePickerState = rememberTimePickerState(
        initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
        initialMinute = currentTime.get(Calendar.MINUTE),
        is24Hour = true,
    )

    Column {
        TimeInput(
            state = timePickerState,
        )
        Button(onClick = onDismiss) {
            Text("Dismiss picker")
        }
        Button(onClick = onConfirm) {
            Text("Confirm selection")
        }
    }
}
TimePickers.kt

이 구현에서 유의해야 할 핵심 사항은 다음과 같습니다.

  • 구조는 기본적으로 전화 걸기 시간 선택 도구와 동일하며 기본 TimePicker 대신 TimeInput를 사용한다는 점이 다릅니다.
  • timePickerState의 is24Hour 매개변수가 명시적으로 true로 설정됩니다. 기본적으로 이 값은 false입니다.

이 구현은 다음과 같이 표시됩니다.

입력 시간 선택 도구 사용자는 텍스트 필드를 사용하여 시간을 입력할 수 있습니다.
그림 3. 입력 시간 선택 도구

상태 사용

사용자가 시간 선택 도구에서 선택한 시간을 활용하려면 onConfirm 함수에 적절한 TimePickerState를 추가해야 합니다. 부모 그러면 컴포저블이 TimePickerState.hour를 통해 선택된 시간에 액세스할 수 있고, TimePickerState.minute

다음 스니펫은 그 방법을 보여줍니다.

@Composable
fun DialUseStateExample(
    onConfirm: (TimePickerState) -> Unit,
    onDismiss: () -> Unit,
) {
    val currentTime = Calendar.getInstance()

    val timePickerState = rememberTimePickerState(
        initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
        initialMinute = currentTime.get(Calendar.MINUTE),
        is24Hour = true,
    )

    Column {
        TimePicker(
            state = timePickerState,
        )
        Button(onClick = onDismiss) {
            Text("Dismiss picker")
        }
        Button(onClick = { onConfirm(timePickerState) }) {
            Text("Confirm selection")
        }
    }
}
TimePickers.kt

그러면 다음과 같이 컴포저블을 호출할 수 있습니다.

var selectedTime: TimePickerState? by remember { mutableStateOf(null) }

// ...

DialUseStateExample(
    onDismiss = {
        showDialExample = false
    },
    onConfirm = {
            time ->
        selectedTime = time
        showDialExample = false
    },
)

// ...

if (selectedTime != null) {
    val cal = Calendar.getInstance()
    cal.set(Calendar.HOUR_OF_DAY, selectedTime!!.hour)
    cal.set(Calendar.MINUTE, selectedTime!!.minute)
    cal.isLenient = false
    Text("Selected time = ${formatter.format(cal.time)}")
} else {
    Text("No time selected.")
}

자세한 내용은 스니펫의 전체 구현 앱을 엽니다.

추가 리소스