시간 선택도구

시간 선택도구는 사용자가 시간을 선택하는 방법을 제공합니다. 다음과 같은 작업을 할 수 있습니다. 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.")
}

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

추가 리소스