टाइम पिकर

टाइम पिकर की मदद से, उपयोगकर्ता कोई समय चुन सकते हैं. अपने ऐप्लिकेशन में टाइम पिकर को लागू करने के लिए, TimePicker और TimeInput कंपोज़ेबल का इस्तेमाल किया जा सकता है.

टाइप

टाइम पिकर दो तरह के होते हैं:

• डायल: इसकी मदद से उपयोगकर्ता, डायल के चारों ओर हैंडल को घुमाकर समय सेट कर सकते हैं.
• इनपुट: इससे उपयोगकर्ता, कीबोर्ड का इस्तेमाल करके समय सेट कर सकते हैं.

नीचे दी गई इमेज में, बाईं ओर डायल टाइम पिकर और दाईं ओर इनपुट टाइम पिकर का उदाहरण दिया गया है:

एपीआई सरफ़ेस

टाइम पिकर को लागू करने के लिए, 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")
        }
    }
}
TimePickers.kt

इस स्निपेट में इन बातों का ध्यान रखें:

• Calendar.getInstance(), TimePickerState को मौजूदा समय के साथ शुरू करता है.
  • इस उदाहरण में java.util.Calendar का इस्तेमाल किया गया है. अपने प्रोजेक्ट में Java 8+ API desugaring की सुविधा चालू करें, ताकि सभी Android वर्शन पर java.time.LocalTime का इस्तेमाल किया जा सके.
• TimePicker कंपोज़ेबल, टाइम पिकर दिखाता है. यह timePickerState को पैरामीटर के तौर पर लेता है.
• इस सुविधा को लागू करने के लिए, दो बटन शामिल किए गए हैं: एक बटन से चुने गए विकल्प की पुष्टि की जाती है और दूसरे बटन से पिकर को खारिज किया जाता है.

लागू होने पर यह इस तरह दिखता है:

समय चुनने वाला टूल

इस स्निपेट में, टाइम पिकर की बुनियादी इनपुट स्टाइल को लागू करने का तरीका दिखाया गया है.

@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

इस सुविधा को लागू करते समय इन बातों का ध्यान रखें:

• यह स्ट्रक्चर, डायल टाइम पिकर के स्ट्रक्चर जैसा ही होता है. हालांकि, इसमें मुख्य अंतर यह होता है कि TimePicker के बजाय TimeInput का इस्तेमाल किया जाता है.
• timePickerState के लिए is24Hour पैरामीटर को साफ़ तौर पर true पर सेट किया गया है. डिफ़ॉल्ट रूप से, यह वैल्यू false होती है.

लागू होने पर यह इस तरह दिखता है:

स्टेट का इस्तेमाल करना

उपयोगकर्ता ने टाइम पिकर में जो समय चुना है उसका इस्तेमाल करने के लिए, अपने onConfirm फ़ंक्शन को सही TimePickerState पास करें. इसके बाद, पैरंट कंपोज़ेबल, 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

इसके बाद, कंपोज़ेबल को इस तरह कॉल किया जा सकता है:

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

ज़्यादा जानकारी के लिए, snippets ऐप्लिकेशन में पूरी तरह से लागू करने का तरीका देखें.

अन्य संसाधन

• TimePicker
• मटीरियल डिज़ाइन - टाइम पिकर