সেগমেন্টেড বোতাম, সেগমেন্টেড বোতাম

ব্যবহারকারীদের পাশাপাশি থাকা একাধিক বিকল্প থেকে বেছে নেওয়ার সুযোগ দিতে একটি সেগমেন্টেড বাটন ব্যবহার করুন। সেগমেন্টেড বাটন দুই প্রকারের হয়:

  • একক-নির্বাচন বোতাম : ব্যবহারকারীদের একটি বিকল্প বেছে নিতে দেয়।
  • মাল্টি-সিলেক্ট বাটন : এর মাধ্যমে ব্যবহারকারীরা দুই থেকে পাঁচটি আইটেম বেছে নিতে পারেন। আরও জটিল বিকল্প বা পাঁচটির বেশি আইটেমের জন্য চিপ ব্যবহার করুন।
একটি খণ্ডিত বাটন কম্পোনেন্ট দেখানো হয়েছে। প্রথম বাটনটি দিয়ে একটি মাত্র নির্বাচন করা যায়, এবং দ্বিতীয় বাটনটি দিয়ে একাধিক নির্বাচন করা যায়।
চিত্র 1. একটি একক-নির্বাচন বোতাম (1) এবং একটি বহু-নির্বাচন বোতাম (2)।

এপিআই পৃষ্ঠ

সেগমেন্টেড বাটন তৈরি করতে SingleChoiceSegmentedButtonRow এবং MultiChoiceSegmentedButtonRow লেআউটগুলো ব্যবহার করুন। এই লেআউটগুলো SegmentedButton গুলোকে সঠিকভাবে অবস্থান ও আকার দেয় এবং নিম্নলিখিত মূল প্যারামিটারগুলো শেয়ার করে:

  • space : বাটনগুলোর মধ্যকার ওভারল্যাপ সমন্বয় করে।
  • content : এতে সেগমেন্টেড বাটন সারির বিষয়বস্তু থাকে, যা সাধারণত একাধিক SegmentedButton এর একটি অনুক্রম।

একটি একক-নির্বাচন সেগমেন্টেড বাটন তৈরি করুন

এই উদাহরণটি দেখায় কিভাবে একটি সিঙ্গেল-সিলেক্ট সেগমেন্টেড বাটন তৈরি করতে হয়: 

@Composable
fun SingleChoiceSegmentedButton(modifier: Modifier = Modifier) {
    var selectedIndex by remember { mutableIntStateOf(0) }
    val options = listOf("Day", "Month", "Week")

    SingleChoiceSegmentedButtonRow {
        options.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(
                    index = index,
                    count = options.size
                ),
                onClick = { selectedIndex = index },
                selected = index == selectedIndex,
                label = { Text(label) }
            )
        }
    }
}
SegmentedButton.kt

কোড সম্পর্কে মূল বিষয়গুলো

  • নির্বাচিত বাটনের ইন্ডেক্স ট্র্যাক করার জন্য remember এবং mutableIntStateOf ব্যবহার করে একটি selectedIndex ভেরিয়েবল ইনিশিয়ালাইজ করা হয়।
  • বাটনের লেবেলগুলো উপস্থাপনকারী options একটি তালিকা নির্ধারণ করে।
  • SingleChoiceSegmentedButtonRow আপনাকে শুধুমাত্র একটি বাটন নির্বাচন করার সুযোগ দেয়।
  • forEachIndexed লুপের ভিতরে প্রতিটি অপশনের জন্য একটি করে SegmentedButton তৈরি করে:
    • SegmentedButtonDefaults.itemShape ব্যবহার করে, ` shape বাটনের ইনডেক্স এবং মোট অপশনের সংখ্যার উপর ভিত্তি করে বাটনের আকৃতি নির্ধারণ করে।
    • onClick ফাংশনটি ক্লিক করা বাটনের ইনডেক্স দিয়ে selectedIndex আপডেট করে।
    • selectedIndex এর উপর ভিত্তি করে বাটনটির নির্বাচন অবস্থা selected করে।
    • label Text কম্পোজেবল ব্যবহার করে বাটনের লেবেল প্রদর্শন করে।

ফলাফল

দিন, মাস এবং সপ্তাহ বিকল্পসহ একটি খণ্ডিত বাটন কম্পোনেন্ট প্রদর্শিত হচ্ছে। বর্তমানে দিন বিকল্পটি নির্বাচিত আছে।
চিত্র ২. একটি একক-নির্বাচন বাটন, যেখান থেকে একটি বিকল্প বেছে নেওয়া হয়েছে।

একটি মাল্টি-সিলেক্ট সেগমেন্টেড বাটন তৈরি করুন

এই উদাহরণটি দেখায় কিভাবে আইকনসহ একটি বহু-বিকল্পযুক্ত সেগমেন্টেড বাটন তৈরি করতে হয়, যা ব্যবহারকারীদের একাধিক বিকল্প নির্বাচন করার সুযোগ দেয়: 

@Composable
fun MultiChoiceSegmentedButton(modifier: Modifier = Modifier) {
    val selectedOptions = remember {
        mutableStateListOf(false, false, false)
    }
    val options = listOf("Walk", "Ride", "Drive")

    MultiChoiceSegmentedButtonRow {
        options.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(
                    index = index,
                    count = options.size
                ),
                checked = selectedOptions[index],
                onCheckedChange = {
                    selectedOptions[index] = !selectedOptions[index]
                },
                icon = { SegmentedButtonDefaults.Icon(selectedOptions[index]) },
                label = {
                    when (label) {
                        "Walk" -> Icon(
                            imageVector =
                            Icons.AutoMirrored.Filled.DirectionsWalk,
                            contentDescription = "Directions Walk"
                        )
                        "Ride" -> Icon(
                            imageVector =
                            Icons.Default.DirectionsBus,
                            contentDescription = "Directions Bus"
                        )
                        "Drive" -> Icon(
                            imageVector =
                            Icons.Default.DirectionsCar,
                            contentDescription = "Directions Car"
                        )
                    }
                }
            )
        }
    }
}
SegmentedButton.kt

কোড সম্পর্কে মূল বিষয়গুলো

  • কোডটি remember এবং mutableStateListOf ব্যবহার করে selectedOptions ভেরিয়েবলটি ইনিশিয়ালাইজ করে। এটি প্রতিটি বাটনের নির্বাচিত অবস্থা ট্র্যাক করে।
  • কোডটিতে বাটনগুলোকে ধারণ করার জন্য MultiChoiceSegmentedButtonRow ব্যবহার করা হয়েছে।
  • forEachIndexed লুপের ভিতরে, কোডটি প্রতিটি অপশনের জন্য একটি করে SegmentedButton তৈরি করে:
    • shape বাটনটির ইন্ডেক্স এবং অপশনগুলোর মোট সংখ্যার উপর ভিত্তি করে এর আকৃতি নির্ধারণ করে।
    • checked বিকল্পটি selectedOptions এ থাকা সংশ্লিষ্ট মানের উপর ভিত্তি করে বাটনটির চেক্ট অবস্থা নির্ধারণ করে।
    • onCheckedChange বাটনটি ক্লিক করা হলে selectedOptions এর সংশ্লিষ্ট আইটেমটির নির্বাচিত অবস্থা পরিবর্তন করে।
    • icon SegmentedButtonDefaults.Icon এবং বাটনটির চেক্ট অবস্থার উপর ভিত্তি করে একটি আইকন প্রদর্শন করে।
    • label উপযুক্ত ইমেজ ভেক্টর এবং বিষয়বস্তুর বিবরণসহ Icon কম্পোজেবল ব্যবহার করে লেবেলটির সাথে সঙ্গতিপূর্ণ একটি আইকন প্রদর্শন করে।

ফলাফল

হাঁটা, চড়া এবং গাড়ি চালানো বিকল্পসহ একটি খণ্ডিত বোতাম অংশ দেখানো হয়েছে। বর্তমানে হাঁটা এবং চড়া বিকল্প দুটি নির্বাচিত আছে।
চিত্র ৩. দুটি বিকল্প বাছাই করা একটি বহু-নির্বাচনযোগ্য খণ্ডিত বাটন।

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