Bộ chọn giờ

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

Loại

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

  • 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 mặt số.
  • Nhập: Cho phép người dùng đặt thời gian bằng bàn phím.

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

Một mặt đồng hồ và một bộ chọn thời gian nhập.
Hình 1. Bộ chọn giờ dạng quay số và nhập.

Nền tảng API

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

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

Trạng thái

Đối với cả TimePicker và TimeInput, bạn cũng phải truyền một TimePickerState. Điều này cho phép bạn đặt thời gian được chọn mặc định xuất hiện trên bộ chọn. Hàm này cũng ghi lại thời gian mà 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. Để xem các ví dụ có sử dụng hộp thoại, hãy xem hướng dẫn về Hộp thoại cho bộ chọn thời gian.

Bộ chọn giờ dạng quay số

Đoạn mã này minh hoạ cách triển khai một bộ chọn thời gian dạng 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")
        }
    }
}

Hãy xem xét những điều sau trong đoạn mã này:

  • Calendar.getInstance() khởi chạy TimePickerState với 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ả 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 để xác nhận lựa chọn và một nút để đóng bộ chọn.

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

Bộ chọn giờ dạng quay số. Người dùng có thể chọn thời gian bằng cách sử dụng mặt đồng hồ.
Hình 2. Bộ chọn giờ dạng quay số.

Bộ chọn giờ nhập vào

Đoạn mã này minh hoạ cách triển khai bộ chọn thời gian 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")
        }
    }
}

Những điểm chính cần lưu ý trong cách triển khai này:

  • Cấu trúc về cơ bản giống với bộ chọn thời gian dạng quay số, điểm khác biệt chính 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:

Bộ chọn giờ nhập. Người dùng có thể nhập thời gian bằng các trường văn bản.
Hình 3. Bộ chọn giờ nhập.

Sử dụng trạng thái

Để sử dụng thời gian mà người dùng đã chọn trong bộ chọn thời gian, hãy truyền TimePickerState thích hợp vào 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")
        }
    }
}

Sau đó, bạn có thể gọi composable 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, hãy xem phần triển khai đầy đủ trong ứng dụng đoạn mã.

Tài nguyên khác