সময় বাছাইকারীদের জন্য ডায়ালগ

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

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

মৌলিক উদাহরণ

আপনার টাইম পিকারের জন্য একটি ডায়ালগ তৈরি করার সবচেয়ে সহজ উপায় হলো 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 : ব্যবহারকারী "OK" বোতামে ক্লিক করলে এই ফাংশনটি কল করা হয়।
    • content : একটি কম্পোজেবল যা ডায়ালগের মধ্যে টাইম পিকার প্রদর্শন করে।
  3. AlertDialog অন্তর্ভুক্ত রয়েছে:
    • "Dismiss" লেবেলযুক্ত একটি ডিসমিস বাটন।
    • "OK" লেখা একটি নিশ্চিতকরণ বাটন।
    • টাইম পিকারের বিষয়বস্তু text প্যারামিটার হিসেবে পাঠানো হয়েছে।
  4. DialWithDialogExample বর্তমান সময় দিয়ে TimePickerState ইনিশিয়ালাইজ করে এবং এটিকে TimePickeronConfirm উভয় ফাংশনেই প্রেরণ করে।
অ্যালার্টডায়ালগের একটি টাইম পিকার, যাতে একটি শিরোনাম, একটি মোড টগল এবং ডিসমিস ও কনফার্ম বাটন রয়েছে।
চিত্র ১. অ্যালার্টডায়ালগের একটি সময় নির্বাচক।

উন্নত উদাহরণ

এই কোড স্নিপেটটি জেটপ্যাক কম্পোজে একটি কাস্টমাইজযোগ্য টাইম পিকার ডায়ালগের একটি উন্নত বাস্তবায়ন প্রদর্শন করে।

@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 composable ব্যবহার করে।
  3. ডায়ালগ বক্সে একটি পরিবর্তনযোগ্য শিরোনাম এবং ডায়াল ও ইনপুট মোডের মধ্যে পরিবর্তন করার জন্য একটি টগল বাটন রয়েছে।
  4. Surface ডায়ালগে আকৃতি এবং উচ্চতা প্রয়োগ করে, যেখানে প্রস্থ এবং উচ্চতা উভয়ের জন্যই IntrinsicSize.Min ব্যবহৃত হয়।
  5. Column এবং Row বিন্যাস ডায়ালগের কাঠামোগত উপাদানগুলো প্রদান করে।
  6. এই উদাহরণটি showDial ব্যবহার করে পিকার মোড ট্র্যাক করে।
    • একটি IconButton মোডগুলির মধ্যে টগল করে এবং সেই অনুযায়ী আইকনটি আপডেট করে।
    • showDial অবস্থার উপর ভিত্তি করে ডায়ালগের বিষয়বস্তু TimePicker এবং TimeInput মধ্যে পরিবর্তিত হয়।

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

এই বাস্তবায়নটি নিম্নরূপ:

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

অতিরিক্ত সম্পদ