নেভিগেশন বার

নেভিগেশন বার ব্যবহারকারীদের অ্যাপের মধ্যে বিভিন্ন গন্তব্যের মধ্যে পরিবর্তন করার অনুমতি দেয়। আপনি নেভিগেশন বার ব্যবহার করতে পারেন:

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

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

API সারফেস

গন্তব্য পরিবর্তন করার লজিক প্রয়োগ করতে NavigationBar এবং NavigationBarItem কম্পোজেবল ব্যবহার করুন। প্রতিটি NavigationBarItem একটি গন্তব্যকে বোঝায়।

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

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

যেমন: নিচের দিকে নেভিগেশন বার

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

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

    Scaffold(
        modifier = modifier,
        bottomBar = {
            NavigationBar(windowInsets = NavigationBarDefaults.windowInsets) {
                Destination.entries.forEachIndexed { index, destination ->
                    NavigationBarItem(
                        selected = selectedDestination == index,
                        onClick = {
                            navController.navigate(route = destination.route)
                            selectedDestination = index
                        },
                        icon = {
                            Icon(
                                destination.icon,
                                contentDescription = destination.contentDescription
                            )
                        },
                        label = { Text(destination.label) }
                    )
                }
            }
        }
    ) { contentPadding ->
        AppNavHost(navController, startDestination, modifier = Modifier.padding(contentPadding))
    }
}

Key points

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

ফলাফল

নিচের ছবিতে আগের স্নিপেট থেকে তৈরি হওয়া নেভিগেশন বার দেখানো হয়েছে:

একটি অ্যাপ স্ক্রিন যেখানে নিচের দিকে নেভিগেশন বারে অনুভূমিকভাবে ৩টি গন্তব্য তালিকাভুক্ত করা হয়েছে: গান, অ্যালবাম এবং প্লেলিস্ট। প্রতিটি গন্তব্যের সাথে একটি প্রাসঙ্গিক আইকন পেয়ার করা থাকে (যেমন, "গান"-এর জন্য মিউজিক নোট)।
ছবি ২. একটি নেভিগেশন বার যাতে সংশ্লিষ্ট আইকন সহ ৩টি গন্তব্য রয়েছে: গান, অ্যালবাম এবং প্লেলিস্ট।

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