ট্যাবসমূহ

ট্যাবের মাধ্যমে আপনি সম্পর্কিত কন্টেন্টের গ্রুপ সাজাতে পারবেন। দুই ধরনের ট্যাব আছে:

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

এই পৃষ্ঠায় দেখানো হয়েছে যে কীভাবে আপনার অ্যাপে সম্পর্কিত স্ক্রিন ও প্রাথমিক নেভিগেশন সহ প্রাইমারি ট্যাব দেখানো যায়।

API সারফেস

ট্যাব প্রয়োগ করতে Tab, PrimaryTabRow এবং SecondaryTabRow কম্পোজেবল ব্যবহার করুন। Tab কম্পোজেবল, সারির মধ্যে একটি স্বতন্ত্র ট্যাবকে দেখায় এবং সাধারণত PrimaryTabRow (প্রাইমারি ইন্ডিকেটর ট্যাবের জন্য) বা SecondaryTabRow (সেকেন্ডারি ইন্ডিকেটর ট্যাবের জন্য)-এর মধ্যে ব্যবহার করা হয়।

Tab-এ নিম্নলিখিত মূল প্যারামিটারগুলি অন্তর্ভুক্ত থাকে:

• selected: বর্তমান ট্যাবটি ভিজ্যুয়ালি হাইলাইট করা হয়েছে কিনা তা নির্ধারণ করে।
• onClick(): একটি প্রয়োজনীয় ল্যাম্বডা ফাংশন যা ব্যবহারকারী ট্যাবে ক্লিক করলে সম্পাদন করা অ্যাকশনকে সংজ্ঞায়িত করে। এখানে আপনি সাধারণত নেভিগেশন ইভেন্ট ম্যানেজ করেন, বেছে নেওয়া ট্যাবের স্ট্যাটাস আপডেট করেন অথবা সংশ্লিষ্ট কন্টেন্ট লোড করেন।
• text: ট্যাবের মধ্যে টেক্সট দেখায়। ঐচ্ছিক।
• icon: ট্যাবের মধ্যে একটি আইকন দেখায়। ঐচ্ছিক।
• enabled: ট্যাব চালু করা আছে কিনা এবং সেটির সাথে ইন্টার‍্যাক্ট করা যাবে কিনা তা কন্ট্রোল করে। false-এ সেট করা হলে, ট্যাবটি বন্ধ অবস্থায় দেখা যায় এবং ক্লিক করলে কাজ করে না।

উদাহরণ: ট্যাব-ভিত্তিক নেভিগেশন

নিম্নলিখিত স্নিপেটটি একটি অ্যাপে বিভিন্ন স্ক্রিনের মধ্যে নেভিগেট করার জন্য ট্যাব সহ একটি শীর্ষ নেভিগেশন বার প্রয়োগ করে:

@Composable
fun NavigationTabExample(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    val startDestination = Destination.SONGS
    var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }

    Scaffold(modifier = modifier) { contentPadding ->
        PrimaryTabRow(selectedTabIndex = selectedDestination, modifier = Modifier.padding(contentPadding)) {
            Destination.entries.forEachIndexed { index, destination ->
                Tab(
                    selected = selectedDestination == index,
                    onClick = {
                        navController.navigate(route = destination.route)
                        selectedDestination = index
                    },
                    text = {
                        Text(
                            text = destination.label,
                            maxLines = 2,
                            overflow = TextOverflow.Ellipsis
                        )
                    }
                )
            }
        }
        AppNavHost(navController, startDestination)
    }
}
Navigation.kt

Key points

• PrimaryTabRow-এ ট্যাবের একটি অনুভূমিক সারি দেখায়, যেখানে প্রতিটি ট্যাব একটি Destination-এর সাথে সংশ্লিষ্ট।
• val navController = rememberNavController(), NavHostController-এর একটি ইনস্ট্যান্স তৈরি করে এবং মনে রাখে, যা NavHost-এর মধ্যে নেভিগেশন ম্যানেজ করে।
• var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } বেছে নেওয়া ট্যাবের স্ট্যাটাস ম্যানেজ করে।
  • startDestination.ordinal, Destination.SONGS enum এন্ট্রির সংখ্যাসূচক ইন্ডেক্স (পজিশন) পায়।
• আপনি কোনও ট্যাবে ক্লিক করলে, onClick ল্যাম্বডা কল navController.navigate(route = destination.route) সংশ্লিষ্ট স্ক্রিনে নেভিগেট করার জন্য।
• Tab-এর onClick ল্যাম্বডা selectedDestination স্টেট আপডেট করে যাতে ক্লিক করা ট্যাবটি ভিজ্যুয়ালি হাইলাইট করা যায়।
• এটি AppNavHost কম্পোজেবলকে কল করে, navController এবং startDestination পাস করে, যাতে বেছে নেওয়া স্ক্রিনের আসল কন্টেন্ট দেখানো যায়।

ফলাফল

নিচের ছবিতে আগের স্নিপেটের ফলাফল দেখানো হয়েছে:

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

• Material 3 - ট্যাব
• Compose-এর সাহায্যে নেভিগেশন