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

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

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

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

अपने टाइम पिकर के लिए डायलॉग बनाने का सबसे आसान तरीका है कि ऐसा कंपोज़ेबल बनाते हैं जो 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: जब उपयोगकर्ता "OK" पर क्लिक करता है, तब कॉल किया जाने वाला फ़ंक्शन बटन.
   • content: एक कंपोज़ेबल, जो डायलॉग में टाइम पिकर दिखाता है.
3. AlertDialog में ये शामिल हैं:
   • "खारिज करें" लेबल वाला खारिज करें बटन.
   • "ठीक है" लेबल वाला पुष्टि बटन.
   • टाइम पिकर कॉन्टेंट को text पैरामीटर के तौर पर पास किया गया.
4. DialWithDialogExample, TimePickerState को इसके साथ शुरू करता है: मौजूदा समय है और उसे TimePicker और onConfirm दोनों में पास करता है फ़ंक्शन का इस्तेमाल करना होगा.

पहली इमेज. AlertsDialog में टाइम पिकर.

बेहतर उदाहरण

इस स्निपेट में, पसंद के मुताबिक समय को बेहतर तरीके से लागू किया गया है 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, अलग-अलग मोड के बीच टॉगल करता है. इससे आइकॉन अपडेट होता है.
   • डायलॉग का कॉन्टेंट, TimePicker और TimeInput के बीच स्विच करता है. ऐसा इन के आधार पर होता है showDial स्थिति.

बेहतर तरीके से लागू करने पर, उपयोगकर्ताओं को अपनी ज़रूरत के मुताबिक और कई बार फिर से इस्तेमाल करने का समय मिल जाता है. पिकर का डायलॉग बॉक्स, जो आपके ऐप्लिकेशन में इस्तेमाल के अलग-अलग उदाहरणों के हिसाब से हो सकता है.

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

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

अन्य संसाधन

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