เครื่องมือเลือกเวลา

เครื่องมือเลือกเวลาช่วยให้ผู้ใช้เลือกเวลาได้ คุณสามารถ ใช้ Composable TimePicker และ TimeInput เพื่อใช้เวลา เครื่องมือเลือกในแอปของคุณ

หมายเหตุ: TimePicker และ TimeInput เป็นเวอร์ชันทดลอง แจ้งปัญหาใน เครื่องมือติดตามปัญหา

ประเภท

เครื่องมือเลือกเวลามี 2 ประเภท ได้แก่

• โทรออก: อนุญาตให้ผู้ใช้ตั้งเวลาโดยการย้ายแฮนเดิลไปรอบๆ หน้าปัด
• การป้อนข้อมูล: อนุญาตให้ผู้ใช้ตั้งเวลาโดยใช้แป้นพิมพ์

รูปภาพต่อไปนี้แสดงตัวอย่างเครื่องมือเลือกเวลาโทรทางด้านซ้าย และ เครื่องมือเลือกเวลาป้อนข้อมูลทางด้านขวา

รูปที่ 1 เครื่องมือเลือกเวลาแบบโทรและอินพุตเวลา

แพลตฟอร์ม API

หากต้องการใช้เครื่องมือเลือกเวลา ให้ใช้ TimePicker หรือ TimeInput Composable:

• TimePicker: ใช้เครื่องมือเลือกเวลาโทร
• TimeInput: ใช้เครื่องมือเลือกเวลาป้อนข้อมูล

หมายเหตุ: แม้ว่าจะแสดงองค์ประกอบที่แตกต่างกัน แต่ TimePicker และ TimeInput จะแสดง Composable ที่คล้ายกันมากในแง่ของพารามิเตอร์ ดังนั้น สลับสับเปลี่ยนกันได้อย่างมาก

รัฐ

สำหรับทั้ง 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")
        }
    }
}
TimePickers.kt

ลองพิจารณาสิ่งต่อไปนี้ในข้อมูลโค้ด

• Calendar.getInstance() จะเริ่มต้น TimePickerState ด้วยเหตุการณ์ปัจจุบัน
  • ตัวอย่างนี้ใช้ java.util.Calendar เปิดใช้งาน Java การกำจัดน้ำตาล API มากกว่า 8 รายการในโปรเจ็กต์ของคุณเพื่อใช้แทน java.time.LocalTime ใน Android ทุกเวอร์ชัน
• Composable ของ TimePicker จะแสดงเครื่องมือเลือกเวลาโดยใช้ timePickerState เป็นพารามิเตอร์
• การใช้งานมี 2 ปุ่ม โดยปุ่มหนึ่งเพื่อยืนยันการเลือกและ อีกปุ่มหนึ่งเพื่อปิดเครื่องมือเลือก

การติดตั้งใช้งานนี้จะปรากฏดังนี้

รูปที่ 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

ประเด็นสำคัญที่ต้องทราบในการติดตั้งใช้งานนี้

• โครงสร้างนี้จะเหมือนกับเครื่องมือเลือกเวลาโทร โดยมีองค์ประกอบหลัก ความแตกต่างคือการใช้ TimeInput แทนที่จะเป็น TimePicker
• ตั้งค่าพารามิเตอร์ is24Hour สำหรับ timePickerState เป็น true อย่างชัดเจน โดยค่าเริ่มต้น ค่านี้จะเป็น false

การติดตั้งใช้งานนี้จะปรากฏดังนี้

รูปที่ 3 เครื่องมือเลือกเวลาป้อนข้อมูล

ใช้รัฐ

หากต้องการใช้เวลาที่ผู้ใช้เลือกในเครื่องมือเลือกเวลา ให้ส่ง 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")
        }
    }
}
TimePickers.kt

จากนั้นคุณเรียก 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.")
}

สำหรับรายละเอียดเพิ่มเติม ดูการติดตั้งทั้งหมดในข้อมูลโค้ด แอป

แหล่งข้อมูลเพิ่มเติม

• TimePicker
• ดีไซน์ Material - เครื่องมือเลือกเวลา