เครื่องมือเลือกเวลาช่วยให้ผู้ใช้เลือกเวลาได้ คุณสามารถ
ใช้ Composable TimePicker
และ TimeInput
เพื่อใช้เวลา
เครื่องมือเลือกในแอปของคุณ
ประเภท
เครื่องมือเลือกเวลามี 2 ประเภท ได้แก่
- โทรออก: อนุญาตให้ผู้ใช้ตั้งเวลาโดยการย้ายแฮนเดิลไปรอบๆ หน้าปัด
- การป้อนข้อมูล: อนุญาตให้ผู้ใช้ตั้งเวลาโดยใช้แป้นพิมพ์
รูปภาพต่อไปนี้แสดงตัวอย่างเครื่องมือเลือกเวลาโทรทางด้านซ้าย และ เครื่องมือเลือกเวลาป้อนข้อมูลทางด้านขวา
![เครื่องมือเลือกเวลาแบบโทรและอินพุตเวลา](https://developer.android.com/static/develop/ui/compose/images/components/timepickers.png?hl=th)
แพลตฟอร์ม API
หากต้องการใช้เครื่องมือเลือกเวลา ให้ใช้ TimePicker
หรือ TimeInput
Composable:
TimePicker
: ใช้เครื่องมือเลือกเวลาโทรTimeInput
: ใช้เครื่องมือเลือกเวลาป้อนข้อมูล
รัฐ
สำหรับทั้ง TimePicker
และ TimeInput
คุณต้องสอบผ่าน
TimePickerState
ซึ่งจะช่วยให้คุณตั้งเวลาเริ่มต้นที่เลือกให้ปรากฏขึ้นได้
บนเครื่องมือเลือก นอกจากนี้ยังแสดงเวลาที่ผู้ใช้เลือกโดยใช้
เครื่องมือเลือก
Dialog
เครื่องมือเลือกเวลาจะปรากฏในกล่องโต้ตอบ ตัวอย่างในคู่มือนี้ไม่ได้ใช้กล่องโต้ตอบ สำหรับตัวอย่างที่ใช้กล่องโต้ตอบ โปรดดูคู่มือกล่องโต้ตอบสำหรับเครื่องมือเลือกเวลา
เครื่องมือเลือกเวลาโทร
ข้อมูลโค้ดนี้จะสาธิตวิธีใช้เครื่องมือเลือกเวลาโทรพื้นฐาน
@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") } } }
ลองพิจารณาสิ่งต่อไปนี้ในข้อมูลโค้ด
Calendar.getInstance()
จะเริ่มต้นTimePickerState
ด้วยเหตุการณ์ปัจจุบัน- ตัวอย่างนี้ใช้
java.util.Calendar
เปิดใช้งาน Java การกำจัดน้ำตาล API มากกว่า 8 รายการในโปรเจ็กต์ของคุณเพื่อใช้แทนjava.time.LocalTime
ใน Android ทุกเวอร์ชัน
- ตัวอย่างนี้ใช้
- Composable ของ
TimePicker
จะแสดงเครื่องมือเลือกเวลาโดยใช้timePickerState
เป็นพารามิเตอร์ - การใช้งานมี 2 ปุ่ม โดยปุ่มหนึ่งเพื่อยืนยันการเลือกและ อีกปุ่มหนึ่งเพื่อปิดเครื่องมือเลือก
การติดตั้งใช้งานนี้จะปรากฏดังนี้
![เครื่องมือเลือกเวลาโทร ผู้ใช้เลือกเวลาได้โดยใช้แป้นหมุน](https://developer.android.com/static/develop/ui/compose/images/components/timepicker-dial.png?hl=th)
เครื่องมือเลือกเวลาอินพุต
ข้อมูลโค้ดนี้แสดงวิธีใช้เครื่องมือเลือกเวลาของรูปแบบอินพุตพื้นฐาน
@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") } } }
ประเด็นสำคัญที่ต้องทราบในการติดตั้งใช้งานนี้
- โครงสร้างนี้จะเหมือนกับเครื่องมือเลือกเวลาโทร โดยมีองค์ประกอบหลัก
ความแตกต่างคือการใช้
TimeInput
แทนที่จะเป็นTimePicker
- ตั้งค่าพารามิเตอร์
is24Hour
สำหรับtimePickerState
เป็นtrue
อย่างชัดเจน โดยค่าเริ่มต้น ค่านี้จะเป็นfalse
การติดตั้งใช้งานนี้จะปรากฏดังนี้
![เครื่องมือเลือกเวลาอินพุต ผู้ใช้สามารถป้อนเวลาโดยใช้ช่องข้อความ](https://developer.android.com/static/develop/ui/compose/images/components/timepicker-input.png?hl=th)
ใช้รัฐ
หากต้องการใช้เวลาที่ผู้ใช้เลือกในเครื่องมือเลือกเวลา ให้ส่ง
TimePickerState
ที่เหมาะสมให้กับฟังก์ชัน onConfirm
ของคุณ ผู้ปกครอง
Composable จะสามารถเข้าถึงเวลาที่เลือกผ่าน 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") } } }
จากนั้นคุณเรียก Composable ดังนี้
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.")
}
สำหรับรายละเอียดเพิ่มเติม ดูการติดตั้งทั้งหมดในข้อมูลโค้ด แอป