टाइम पिकर अक्सर डायलॉग में दिखते हैं. इस मामले में, सामान्य और डायलॉग का कम से कम तरीके से इस्तेमाल किया जा सकता है या आपके पास कस्टम डायलॉग बॉक्स लागू करने का विकल्प है, आसानी से इस्तेमाल किया जा सकता है.
डायलॉग बॉक्स के बारे में ज़्यादा जानकारी पाने के लिए, जिसमें टाइम पिकर इस्तेमाल करने का तरीका भी शामिल है राज्य में, टाइम पिकर गाइड देखें.
बुनियादी उदाहरण
अपने टाइम पिकर के लिए डायलॉग बनाने का सबसे आसान तरीका है कि
ऐसा कंपोज़ेबल बनाते हैं जो 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() } ) }
इस स्निपेट की अहम बातों को नोट करें:
DialWithDialogExample
कंपोज़ेबल,TimePicker
को डायलॉग में रैप कर देता है.TimePickerDialog
एक कस्टम कंपोज़ेबल है, जोAlertDialog
नीचे दिए पैरामीटर:onDismiss
: जब उपयोगकर्ता, डायलॉग को खारिज करता है, तो उसे कॉल किया जाता है (इसके ज़रिए खारिज करने का बटन या फिर से नेविगेशन बार पर जाएं).onConfirm
: जब उपयोगकर्ता "OK" पर क्लिक करता है, तब कॉल किया जाने वाला फ़ंक्शन बटन.content
: एक कंपोज़ेबल, जो डायलॉग में टाइम पिकर दिखाता है.
AlertDialog
में ये शामिल हैं:- "खारिज करें" लेबल वाला खारिज करें बटन.
- "ठीक है" लेबल वाला पुष्टि बटन.
- टाइम पिकर कॉन्टेंट को
text
पैरामीटर के तौर पर पास किया गया.
DialWithDialogExample
,TimePickerState
को इसके साथ शुरू करता है: मौजूदा समय है और उसेTimePicker
औरonConfirm
दोनों में पास करता है फ़ंक्शन का इस्तेमाल करना होगा.
![AlertsDialog में मौजूद टाइम पिकर, जो टाइटल, मोड टॉगल, और खारिज करने और पुष्टि करने वाले बटन को लागू करता है.](https://developer.android.com/static/develop/ui/compose/images/components/timepicker-basic.png?hl=hi)
बेहतर उदाहरण
इस स्निपेट में, पसंद के मुताबिक समय को बेहतर तरीके से लागू किया गया है 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") } } } } } }
इस स्निपेट की अहम बातों को नोट करें:
AdvancedTimePickerExample
कंपोज़ेबल, पसंद के मुताबिक समय तय करता है पिकर का डायलॉग बॉक्स.- यह
AlertDialog
की तुलना में ज़्यादा विकल्प के लिए,Dialog
कंपोज़ेबल का इस्तेमाल करता है. - डायलॉग में पसंद के मुताबिक बनाया जा सकने वाला टाइटल और स्विच करने के लिए टॉगल बटन शामिल है डायल और इनपुट मोड के बीच स्विच कर सकते हैं.
Surface
डायलॉग बॉक्स में आकार और ऊंचाई को लागू करता है. चौड़ाई और ऊंचाई, दोनों के लिएIntrinsicSize.Min
.Column
औरRow
लेआउट, डायलॉग बॉक्स के कॉम्पोनेंट दिखाता है.- इस उदाहरण में,
showDial
का इस्तेमाल करके पिकर मोड को ट्रैक किया गया है.IconButton
, अलग-अलग मोड के बीच टॉगल करता है. इससे आइकॉन अपडेट होता है.- डायलॉग का कॉन्टेंट,
TimePicker
औरTimeInput
के बीच स्विच करता है. ऐसा इन के आधार पर होता हैshowDial
स्थिति.
बेहतर तरीके से लागू करने पर, उपयोगकर्ताओं को अपनी ज़रूरत के मुताबिक और कई बार फिर से इस्तेमाल करने का समय मिल जाता है. पिकर का डायलॉग बॉक्स, जो आपके ऐप्लिकेशन में इस्तेमाल के अलग-अलग उदाहरणों के हिसाब से हो सकता है.
यह लागू होने का तरीका इस तरह दिखता है:
![कस्टम डायलॉग बॉक्स में मौजूद टाइम पिकर, जिसमें टाइटल, मोड टॉगल, और 'खारिज करें' और 'पुष्टि करें' बटन शामिल होते हैं.](https://developer.android.com/static/develop/ui/compose/images/components/timepicker-advanced.png?hl=hi)