टाइम पिकर

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

प्रकार

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

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

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

डायल और समय चुनने वाला इनपुट पिकर.
पहली इमेज. डायल और समय चुनने के लिए इनपुट पिकर.

एपीआई का प्लैटफ़ॉर्म

समय चुनने वाले टूल को लागू करने के लिए, TimePicker या TimeInput के साथ काम करने वाले कॉम्पोनेंट का इस्तेमाल करें:

  • TimePicker: डायल टाइम पिकर लागू करता है.
  • TimeInput: समय चुनने के लिए इनपुट पिकर लागू करता है.

राज्य

TimePicker और TimeInput, दोनों के लिए आपको TimePickerState भी पास करना होगा. इससे, पिकर पर दिखने वाला डिफ़ॉल्ट समय चुना जा सकता है. यह उस समय को भी कैप्चर करता है जिसे उपयोगकर्ता ने पिकर का इस्तेमाल करके चुना है.

डायलॉग

टाइम पिकर, डायलॉग में दिखते हैं. इस गाइड में दिए गए उदाहरणों में डायलॉग का इस्तेमाल नहीं किया गया है. डॉयलॉग का इस्तेमाल करने वाले उदाहरणों के लिए, टाइम पिकर के लिए डॉयलॉग गाइड देखें.

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

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

@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+ एपीआई डीसुगरिंग को चालू करें, ताकि सभी 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.")
}

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

अन्य संसाधन