टाइम पिकर के लिए डायलॉग

टाइम पिकर अक्सर डायलॉग में दिखते हैं. डायलॉग बॉक्स को सामान्य और कम से कम सुविधाओं के साथ लागू किया जा सकता है. इसके अलावा, ज़्यादा सुविधाओं के साथ कस्टम डायलॉग बॉक्स भी लागू किया जा सकता है.

डायलॉग के बारे में ज़्यादा जानकारी पाने के लिए, टाइम पिकर की गाइड देखें. इसमें टाइम पिकर की स्थिति को इस्तेमाल करने का तरीका भी बताया गया है.

बुनियादी उदाहरण

टाइम पिकर के लिए डायलॉग बनाने का सबसे आसान तरीका है कि आप ऐसा कॉम्पोज़ेबल बनाएं जो AlertDialog को लागू करे. यहां दिए गए स्निपेट में, इस तरीके का इस्तेमाल करके बनाए गए एक सामान्य डायलॉग बॉक्स का उदाहरण दिया गया है:

@Composable
fun DialWithDialogExample(
    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,
    )

    TimePickerDialog(
        onDismiss = { onDismiss() },
        onConfirm = { onConfirm(timePickerState) }
    ) {
        TimePicker(
            state = timePickerState,
        )
    }
}

@Composable
fun TimePickerDialog(
    onDismiss: () -> Unit,
    onConfirm: () -> Unit,
    content: @Composable () -> Unit
) {
    AlertDialog(
        onDismissRequest = onDismiss,
        dismissButton = {
            TextButton(onClick = { onDismiss() }) {
                Text("Dismiss")
            }
        },
        confirmButton = {
            TextButton(onClick = { onConfirm() }) {
                Text("OK")
            }
        },
        text = { content() }
    )
}
TimePickers.kt

इस स्निपेट में मौजूद मुख्य बातों पर ध्यान दें:

1. DialWithDialogExample कंपोज़ेबल, TimePicker को डायलॉग में रैप करता है.
2. TimePickerDialog एक कस्टम कंपोज़ेबल है, जो इन पैरामीटर के साथ AlertDialog बनाता है:
   • onDismiss: यह फ़ंक्शन तब कॉल किया जाता है, जब उपयोगकर्ता डायलॉग को खारिज करता है. इसके लिए, खारिज करने वाले बटन या 'वापस जाएं' बटन का इस्तेमाल किया जाता है.
   • onConfirm: जब उपयोगकर्ता "ठीक है" बटन पर क्लिक करता है, तब कॉल किया जाने वाला फ़ंक्शन.
   • content: एक ऐसा कॉम्पोज़ेबल जो डायलॉग बॉक्स में टाइम पिकर दिखाता है.
3. AlertDialog में ये शामिल हैं:
   • "खारिज करें" लेबल वाला खारिज करने का बटन.
   • "ठीक है" लेबल वाला पुष्टि करने का बटन.
   • टाइम पिकर का कॉन्टेंट, text पैरामीटर के तौर पर पास किया गया.
4. DialWithDialogExample, TimePickerState को मौजूदा समय के साथ शुरू करता है. साथ ही, इसे TimePicker और onConfirm, दोनों फ़ंक्शन को पास करता है.

पहली इमेज. AlertDialog में समय चुनने वाला विजेट.

बेहतर उदाहरण

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

@Composable
fun AdvancedTimePickerExample(
    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,
    )

    /** Determines whether the time picker is dial or input */
    var showDial by remember { mutableStateOf(true) }

    /** The icon used for the icon button that switches from dial to input */
    val toggleIcon = if (showDial) {
        Icons.Filled.EditCalendar
    } else {
        Icons.Filled.AccessTime
    }

    AdvancedTimePickerDialog(
        onDismiss = { onDismiss() },
        onConfirm = { onConfirm(timePickerState) },
        toggle = {
            IconButton(onClick = { showDial = !showDial }) {
                Icon(
                    imageVector = toggleIcon,
                    contentDescription = "Time picker type toggle",
                )
            }
        },
    ) {
        if (showDial) {
            TimePicker(
                state = timePickerState,
            )
        } else {
            TimeInput(
                state = timePickerState,
            )
        }
    }
}

@Composable
fun AdvancedTimePickerDialog(
    title: String = "Select Time",
    onDismiss: () -> Unit,
    onConfirm: () -> Unit,
    toggle: @Composable () -> Unit = {},
    content: @Composable () -> Unit,
) {
    Dialog(
        onDismissRequest = onDismiss,
        properties = DialogProperties(usePlatformDefaultWidth = false),
    ) {
        Surface(
            shape = MaterialTheme.shapes.extraLarge,
            tonalElevation = 6.dp,
            modifier =
            Modifier
                .width(IntrinsicSize.Min)
                .height(IntrinsicSize.Min)
                .background(
                    shape = MaterialTheme.shapes.extraLarge,
                    color = MaterialTheme.colorScheme.surface
                ),
        ) {
            Column(
                modifier = Modifier.padding(24.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(bottom = 20.dp),
                    text = title,
                    style = MaterialTheme.typography.labelMedium
                )
                content()
                Row(
                    modifier = Modifier
                        .height(40.dp)
                        .fillMaxWidth()
                ) {
                    toggle()
                    Spacer(modifier = Modifier.weight(1f))
                    TextButton(onClick = onDismiss) { Text("Cancel") }
                    TextButton(onClick = onConfirm) { Text("OK") }
                }
            }
        }
    }
}
TimePickers.kt

इस स्निपेट में मौजूद मुख्य बातों पर ध्यान दें:

1. AdvancedTimePickerExample कंपोज़ेबल, पसंद के मुताबिक बनाया जा सकने वाला टाइम पिकर डायलॉग बनाता है.
2. यह AlertDialog के मुकाबले ज़्यादा फ़्लेक्सिबिलिटी के लिए, Dialog कंपोज़ेबल का इस्तेमाल करता है.
3. डायलॉग में, पसंद के मुताबिक बनाया जा सकने वाला टाइटल और डायल और इनपुट मोड के बीच स्विच करने के लिए एक टॉगल बटन शामिल होता है.
4. Surface, डायलॉग पर शेप और एलिवेशन लागू करता है. साथ ही, चौड़ाई और ऊंचाई, दोनों के लिए IntrinsicSize.Min का इस्तेमाल करता है.
5. Column और Row लेआउट, डायलॉग के स्ट्रक्चर कॉम्पोनेंट उपलब्ध कराते हैं.
6. इस उदाहरण में, showDial का इस्तेमाल करके पिकर मोड को ट्रैक किया गया है.
   • IconButton से मोड के बीच टॉगल किया जा सकता है. इससे आइकॉन भी अपडेट हो जाता है.
   • showDial की स्थिति के आधार पर, डायलॉग बॉक्स का कॉन्टेंट TimePicker और TimeInput के बीच स्विच होता है.

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

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

दूसरी इमेज. कस्टम डायलॉग बॉक्स में टाइम पिकर.

अन्य संसाधन

• टाइम पिकर के लिए गाइड
• Material Design - Time Pickers