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

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

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

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

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

এই স্নিপেটের মূল পয়েন্টগুলি মনে রাখুন:

  1. ডায়ালগে DialWithDialogExample কম্পোজ করা যায় এমন র‍্যাপ TimePicker।
  2. TimePickerDialog হল একটি কাস্টম কম্পোজ করার উপযুক্ত আইটেম যা নিম্নলিখিত প্যারামিটার সহ AlertDialog তৈরি করে:
    • onDismiss: ব্যবহারকারী ডায়ালগ বাতিল করলে (বাতিল করার বোতাম বা নেভিগেশন ব্যাকের মাধ্যমে ) কল করা একটি ফাংশন।
    • onConfirm: ব্যবহারকারী "ঠিক আছে" বোতামে ক্লিক করলে এই ফাংশনটি কল করা হয়।
    • content: একটি কম্পোজ করার মতো আইটেম যা ডায়ালগের মধ্যে টাইম পিকার দেখায়।
  3. AlertDialog-এ এগুলি অন্তর্ভুক্ত:
    • "বাতিল করুন" লেবেলযুক্ত বাতিল করার বোতাম।
    • "ঠিক আছে" লেখা কনফার্ম বোতাম।
    • text প্যারামিটার হিসেবে পাস করা টাইম পিকার কন্টেন্ট।
  4. DialWithDialogExample, বর্তমান সময় সহ TimePickerState-কে ইনিশিয়ালাইজ করে এবং সেটি TimePicker ও onConfirm ফাংশন, দু'টিতেই পাস করে।
AlertDialog-এ একটি টাইম পিকার যা একটি শীর্ষক, একটি মোড টগল এবং বাতিল ও কনফার্ম করার বোতাম প্রয়োগ করে।
ছবি ১. 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") }
                }
            }
        }
    }
}

এই স্নিপেটের মূল পয়েন্টগুলি মনে রাখুন:

  1. AdvancedTimePickerExample কম্পোজ করার উপযুক্ত আইটেম কাস্টমাইজ করা যায় এমন টাইম পিকার ডায়ালগ তৈরি করে।
  2. এটি AlertDialog-এর তুলনায় আরও বেশি নমনীয়তার জন্য Dialog কম্পোজ করার উপযুক্ত।
  3. ডায়ালগে কাস্টমাইজ করা যায় এমন একটি শীর্ষক এবং ডায়াল ও ইনপুট মোডের মধ্যে পরিবর্তন করার জন্য একটি টগল বোতাম থাকে।
  4. Surface ডায়ালগে আকার এবং উচ্চতা প্রয়োগ করে, সাথে IntrinsicSize.Min প্রস্থ এবং উচ্চতা উভয়ই।
  5. Column এবং Row লেআউট ডায়ালগের স্ট্রাকচার কম্পোনেন্ট প্রদান করে।
  6. এই উদাহরণটি showDial ব্যবহার করে পিকার মোড ট্র্যাক করে।
    • IconButton মোডগুলির মধ্যে টগল করে এবং সেই অনুযায়ী আইকন আপডেট করে।
    • showDial স্টেটের উপর ভিত্তি করে ডায়ালগ কন্টেন্ট TimePicker ও TimeInput-এর মধ্যে পরিবর্তন হয়।

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

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

কাস্টম ডায়ালগে টাইম পিকার, যাতে শিরোনাম, মোড টগল করার বিকল্প এবং বাতিল ও কনফার্ম করার বোতাম থাকে।
ছবি ২. কাস্টম ডায়ালগে টাইম পিকার।

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