Bộ chọn giờ

Bộ chọn giờ giúp người dùng chọn giờ. Bạn có thể sử dụng các thành phần kết hợp TimePicker và TimeInput để triển khai thời gian trong ứng dụng của bạn.

Lưu ý: TimePicker và TimeInput đang trong giai đoạn thử nghiệm. Hãy gửi mọi vấn đề trên công cụ theo dõi lỗi.

Loại

Có hai loại bộ chọn giờ:

• Quay số: Cho phép người dùng đặt thời gian bằng cách di chuyển tay điều khiển xung quanh núm quay số.
• Đầu vào: Cho phép người dùng đặt thời gian bằng bàn phím.

Hình ảnh sau đây cung cấp ví dụ về bộ chọn thời gian quay số ở bên trái và bộ chọn thời gian nhập ở bên phải:

Hình 1. Một mặt đồng hồ và một bộ chọn giờ đầu vào.

Nền tảng API

Để triển khai bộ chọn giờ, hãy sử dụng TimePicker hoặc TimeInput thành phần kết hợp:

• TimePicker: Triển khai bộ chọn thời gian quay số.
• TimeInput: Triển khai bộ chọn thời gian nhập.

Lưu ý: Mặc dù hiển thị các thành phần khác nhau, nhưng TimePicker và TimeInput là các thành phần kết hợp rất giống nhau về tham số. Do đó, hoàn toàn có thể thay thế cho nhau.

Trạng thái

Đối với cả TimePicker và TimeInput, bạn cũng phải truyền một tham số TimePickerState. Thao tác này cho phép bạn đặt thời gian mặc định đã chọn xuất hiện trên bộ chọn. Thẻ này cũng ghi lại thời gian người dùng đã chọn bằng bộ chọn.

Hộp thoại

Bộ chọn giờ xuất hiện trong hộp thoại. Các ví dụ trong hướng dẫn này không sử dụng hộp thoại. Để biết các ví dụ sử dụng hộp thoại, hãy xem hướng dẫn Hộp thoại cho bộ chọn giờ.

Bộ chọn thời gian quay số

Đoạn mã này minh hoạ cách triển khai bộ chọn thời gian quay số cơ bản.

@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

Hãy cân nhắc những điều sau trong đoạn mã này:

• Calendar.getInstance() khởi chạy TimePickerState bằng thời gian hiện tại.
  • Ví dụ này sử dụng java.util.Calendar. Bật tính năng đơn giản hoá API Java 8 trở lên trong dự án để sử dụng java.time.LocalTime trên tất cả các phiên bản Android.
• Thành phần kết hợp TimePicker hiển thị bộ chọn giờ, lấy timePickerState làm tham số.
• Quá trình triển khai bao gồm hai nút: một nút dùng để xác nhận lựa chọn và nút khác để loại bỏ bộ chọn.

Phương thức triển khai có dạng như sau:

Hình 2. Bộ chọn thời gian quay số.

Bộ chọn thời gian nhập

Đoạn mã này minh hoạ cách triển khai bộ chọn thời gian của kiểu nhập cơ bản.

@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

Các điểm chính cần lưu ý trong quá trình triển khai này:

• Về cơ bản, cấu trúc này giống với bộ chọn giờ quay số, với điểm khác biệt là việc sử dụng TimeInput thay vì TimePicker.
• Tham số is24Hour cho timePickerState được đặt rõ ràng thành true. Theo mặc định, giá trị này là false.

Phương thức triển khai có dạng như sau:

Hình 3. Bộ chọn giờ nhập.

Sử dụng trạng thái

Để tận dụng thời gian mà người dùng đã chọn trong bộ chọn giờ, hãy chuyển TimePickerState phù hợp với hàm onConfirm. Sau đó, thành phần kết hợp mẹ có thể truy cập vào thời gian đã chọn thông qua TimePickerState.hour và TimePickerState.minute.

Đoạn mã sau đây minh hoạ cách thực hiện việc này:

@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

Sau đó, bạn có thể gọi thành phần kết hợp như sau:

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.")
}

Để biết thêm thông tin chi tiết, hãy xem phần triển khai đầy đủ trong ứng dụng đoạn mã.

Tài nguyên khác

• TimePicker
• Material Design – Bộ chọn giờ