เครื่องมือเลือกเวลาช่วยให้ผู้ใช้เลือกเวลาได้ คุณสามารถใช้ Composable TimePicker และ TimeInput เพื่อใช้เครื่องมือเลือกเวลาในแอปได้
ประเภท
เครื่องมือเลือกเวลามี 2 ประเภท ได้แก่
- หน้าปัด: ให้ผู้ใช้ตั้งเวลาโดยเลื่อนแฮนเดิลไปรอบๆ หน้าปัด
- ป้อนข้อมูล: ให้ผู้ใช้ตั้งเวลาโดยใช้แป้นพิมพ์
รูปภาพต่อไปนี้แสดงตัวอย่างเครื่องมือเลือกเวลาแบบหน้าปัดทางด้านซ้าย และเครื่องมือเลือกเวลาแบบป้อนข้อมูลทางด้านขวา
แพลตฟอร์ม API
หากต้องการใช้เครื่องมือเลือกเวลา ให้ใช้ Composable TimePicker หรือ TimeInput ดังนี้
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เปิดใช้กระบวนการ Desugaring ของ Java 8+ API ในโปรเจ็กต์เพื่อใช้java.time.LocalTimeใน Android ทุกเวอร์ชันแทน
- ตัวอย่างนี้ใช้
TimePickerComposable จะแสดงเครื่องมือเลือกเวลา โดยใช้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") } } }
ประเด็นสำคัญที่ควรทราบในการติดตั้งใช้งานนี้มีดังนี้
- โครงสร้างจะเหมือนกับเครื่องมือเลือกเวลาแบบหน้าปัด โดยมีความแตกต่างหลักคือการใช้
TimeInputแทนTimePicker - พารามิเตอร์
is24HourสำหรับtimePickerStateได้รับการตั้งค่าเป็นtrueอย่างชัดแจ้ง โดยค่าเริ่มต้น ค่านี้คือfalse
การใช้งานนี้จะปรากฏดังนี้
ใช้สถานะ
หากต้องการใช้เวลาที่ผู้ใช้เลือกในเครื่องมือเลือกเวลา ให้ส่ง 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.")
}
ดูรายละเอียดเพิ่มเติมได้ที่การติดตั้งใช้งานแบบเต็มรูปแบบในแอปข้อมูลโค้ด