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

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

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

API সারফেস

সেগমেন্ট করা বোতাম তৈরি করতে 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) }
            )
        }
    }
}

কোড সম্পর্কে গুরুত্বপূর্ণ পয়েন্ট

  • remember এবং mutableIntStateOf ব্যবহার করে selectedIndex ভেরিয়েবল ইনিশিয়ালাইজ করে যাতে বেছে নেওয়া বোতামের ইন্ডেক্স ট্র্যাক করা যায়।
  • বোতামের লেবেলকে উপস্থাপন করে এমন options-এর তালিকা নির্ধারণ করে।
  • SingleChoiceSegmentedButtonRow আপনাকে শুধুমাত্র একটি বোতাম বেছে নিতে দেয়।
  • forEachIndexed লুপের মধ্যে প্রতিটি বিকল্পের জন্য একটি SegmentedButton তৈরি করে:
    • shape SegmentedButtonDefaults.itemShape ব্যবহার করে বোতামের ইন্ডেক্স ও বিকল্পের মোট সংখ্যার উপর ভিত্তি করে বোতামের আকার নির্ধারণ করে।
    • onClick ক্লিক করা বোতামের ইন্ডেক্স সহ selectedIndex আপডেট করে।
    • selected, selectedIndex-এর উপর ভিত্তি করে বোতামের বেছে নেওয়ার স্ট্যাটাস সেট করে।
    • 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(
                            painter = rememberVectorPainter(AppIcons.DirectionsWalk),
                            contentDescription = "Directions Walk"
                        )
                        "Ride" -> Icon(
                            painter = rememberVectorPainter(AppIcons.DirectionsBus),
                            contentDescription = "Directions Bus"
                        )
                        "Drive" -> Icon(
                            painter = rememberVectorPainter(AppIcons.DirectionsCar),
                            contentDescription = "Directions Car"
                        )
                    }
                }
            )
        }
    }
}

কোড সম্পর্কে গুরুত্বপূর্ণ পয়েন্ট

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

ফলাফল

'হাঁটা', 'রাইড' ও 'ড্রাইভ' বিকল্প সহ একটি সেগমেন্টেড বোতাম কম্পোনেন্ট দেখানো হয়েছে। বর্তমানে 'হাঁটা' ও 'রাইড' বিকল্প বেছে নেওয়া হয়েছে।
ছবি ৩. দুটি বিকল্প বেছে নেওয়া সহ একাধিক-বাছাই সেগমেন্টেড বোতাম।

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