ডায়ালগে প্রায়ই টাইম পিকার দেখা যায়। আপনি ডায়ালগের তুলনামূলকভাবে জেনেরিক ও ন্যূনতম প্রয়োগ ব্যবহার করতে পারেন অথবা আরও বেশি ফ্লেক্সিবিলিটি সহ কাস্টম ডায়ালগ প্রয়োগ করতে পারেন।
টাইম পিকার স্টেট কীভাবে ব্যবহার করতে হয় সহ ডায়ালগ সম্পর্কে আরও তথ্যের জন্য, টাইম পিকার গাইড দেখুন।
প্রাথমিক উদাহরণ
আপনার টাইম পিকারের জন্য ডায়ালগ তৈরি করার সবচেয়ে সহজ উপায় হল
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: ব্যবহারকারী "ঠিক আছে" বোতামে ক্লিক করলে এই ফাংশনটি কল করা হয়।content: একটি কম্পোজ করার মতো আইটেম যা ডায়ালগের মধ্যে টাইম পিকার দেখায়।
AlertDialog-এ এগুলি অন্তর্ভুক্ত:- "বাতিল করুন" লেবেলযুক্ত বাতিল করার বোতাম।
- "ঠিক আছে" লেখা কনফার্ম বোতাম।
textপ্যারামিটার হিসেবে পাস করা টাইম পিকার কন্টেন্ট।
DialWithDialogExample, বর্তমান সময় সহTimePickerState-কে ইনিশিয়ালাইজ করে এবং সেটিTimePickerওonConfirmফাংশন, দু'টিতেই পাস করে।
উন্নত উদাহরণ
এই স্নিপেট 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মোডগুলির মধ্যে টগল করে এবং সেই অনুযায়ী আইকন আপডেট করে।showDialস্টেটের উপর ভিত্তি করে ডায়ালগ কন্টেন্টTimePickerওTimeInput-এর মধ্যে পরিবর্তন হয়।
এই উন্নত ইমপ্লিমেন্টেশন অত্যন্ত কাস্টমাইজ করা যায় এবং আবার ব্যবহার করা যায় এমন টাইম পিকার ডায়লগ প্রদান করে যা আপনার অ্যাপের বিভিন্ন ব্যবহারের ক্ষেত্রে মানিয়ে নিতে পারে।
এই প্রয়োগটি নিম্নলিখিতভাবে দেখা যায়: