টাইম পিকারের জন্য ডায়ালগ

টাইম পিকার প্রায়ই ডায়ালগে দেখা যায়। আপনি তুলনামূলকভাবে জেনেরিক এবং ডায়ালগের ন্যূনতম প্রয়োগ ব্যবহার করতে পারেন অথবা আরও নমনীয়তার সাথে কাস্টম ডায়ালগ প্রয়োগ করতে পারেন।

সাধারণভাবে ডায়ালগ সম্পর্কে আরও তথ্য পেতে, যার মধ্যে টাইম পিকার স্টেট কীভাবে ব্যবহার করতে হয় তা অন্তর্ভুক্ত, টাইম পিকার সংক্রান্ত নির্দেশিকা দেখুন।

প্রাথমিক উদাহরণ

আপনার টাইম পিকারের জন্য ডায়ালগ তৈরি করার সবচেয়ে সহজ উপায় হল 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-এর মধ্যে পরিবর্তন হয়।

এই উন্নত ইমপ্লিমেন্টেশন অত্যন্ত কাস্টমাইজ ও আবার ব্যবহার করা যায় এমন টাইম পিকার ডায়ালগ প্রদান করে যা আপনার অ্যাপে বিভিন্ন ব্যবহারের ক্ষেত্রে মানিয়ে নিতে পারে।

এই প্রয়োগটি নিম্নলিখিতভাবে দেখানো হয়:

ছবি ২. কাস্টম ডায়ালগে টাইম পিকার।

অতিরিক্ত রিসোর্স

• টাইম পিকার সংক্রান্ত নির্দেশিকা
• মেটেরিয়াল ডিজাইন - টাইম পিকার