অভিযোজিত নেভিগেশন তৈরি করুন

বেশিরভাগ অ্যাপের কয়েকটি শীর্ষ-স্তরের গন্তব্য রয়েছে যা অ্যাপের প্রাথমিক নেভিগেশন UI এর মাধ্যমে অ্যাক্সেসযোগ্য। কমপ্যাক্ট উইন্ডোতে, যেমন একটি স্ট্যান্ডার্ড ফোন ডিসপ্লেতে, গন্তব্যগুলি সাধারণত উইন্ডোর নীচে একটি নেভিগেশন বারে প্রদর্শিত হয়। একটি বর্ধিত উইন্ডোতে, যেমন একটি ট্যাবলেটে একটি পূর্ণ স্ক্রীন অ্যাপ, অ্যাপের পাশাপাশি একটি নেভিগেশন রেল সাধারণত একটি ভাল পছন্দ কারণ ডিভাইসের বাম এবং ডান দিক ধরে রাখার সময় নেভিগেশন নিয়ন্ত্রণগুলি পৌঁছানো সহজ হয়৷

NavigationSuiteScaffold WindowSizeClass উপর ভিত্তি করে উপযুক্ত ন্যাভিগেশন UI কম্পোজযোগ্য প্রদর্শন করে নেভিগেশন UI-এর মধ্যে স্যুইচ করা সহজ করে। এর মধ্যে রানটাইম উইন্ডোর আকার পরিবর্তনের সময় গতিশীলভাবে UI পরিবর্তন করা অন্তর্ভুক্ত। ডিফল্ট আচরণ হল নিম্নলিখিত UI উপাদানগুলির যেকোনো একটি প্রদর্শন করা:

• নেভিগেশন বার যদি প্রস্থ বা উচ্চতা কমপ্যাক্ট হয় বা ডিভাইসটি ট্যাবলেটপ ভঙ্গিতে থাকে
• অন্য সবকিছুর জন্য নেভিগেশন রেল

নির্ভরতা যোগ করুন

NavigationSuiteScaffold হল Material3 অভিযোজিত নেভিগেশন স্যুট লাইব্রেরির অংশ। আপনার অ্যাপ বা মডিউলের build.gradle ফাইলে লাইব্রেরির জন্য একটি নির্ভরতা যোগ করুন:

implementation("androidx.compose.material3:material3-adaptive-navigation-suite")

implementation 'androidx.compose.material3:material3-adaptive-navigation-suite'

একটি ভারা তৈরি করুন

NavigationSuiteScaffold এর দুটি প্রধান অংশ হল নেভিগেশন স্যুট আইটেম এবং নির্বাচিত গন্তব্যের বিষয়বস্তু। আপনি একটি কম্পোজেবলে নেভিগেশন স্যুট আইটেমগুলিকে সরাসরি সংজ্ঞায়িত করতে পারেন, তবে এটি অন্য কোথাও সংজ্ঞায়িত করা সাধারণ, উদাহরণস্বরূপ, একটি enum-এ:

enum class AppDestinations(
    @StringRes val label: Int,
    val icon: ImageVector,
    @StringRes val contentDescription: Int
) {
    HOME(R.string.home, Icons.Default.Home, R.string.home),
    FAVORITES(R.string.favorites, Icons.Default.Favorite, R.string.favorites),
    SHOPPING(R.string.shopping, Icons.Default.ShoppingCart, R.string.shopping),
    PROFILE(R.string.profile, Icons.Default.AccountBox, R.string.profile),
}
SampleNavigationSuiteScaffold.kt

NavigationSuiteScaffold ব্যবহার করতে, আপনাকে অবশ্যই বর্তমান গন্তব্য ট্র্যাক করতে হবে, যা আপনি rememberSaveable ব্যবহার করে করতে পারেন:

var currentDestination by rememberSaveable { mutableStateOf(AppDestinations.HOME) }
SampleNavigationSuiteScaffold.kt

নিম্নলিখিত উদাহরণে, navigationSuiteItems প্যারামিটার (টাইপ NavigationSuiteScope একটি পৃথক গন্তব্যের জন্য নেভিগেশন UI সংজ্ঞায়িত করতে তার item ফাংশন ব্যবহার করে। গন্তব্য UI নেভিগেশন বার, রেল এবং ড্রয়ার জুড়ে ব্যবহার করা হয়। নেভিগেশন আইটেম তৈরি করতে, আপনি আপনার AppDestinations এ লুপ করুন ( পূর্ববর্তী স্নিপেটে সংজ্ঞায়িত):

NavigationSuiteScaffold(
    navigationSuiteItems = {
        AppDestinations.entries.forEach {
            item(
                icon = {
                    Icon(
                        it.icon,
                        contentDescription = stringResource(it.contentDescription)
                    )
                },
                label = { Text(stringResource(it.label)) },
                selected = it == currentDestination,
                onClick = { currentDestination = it }
            )
        }
    }
) {
    // TODO: Destination content.
}
SampleNavigationSuiteScaffold.kt

গন্তব্য বিষয়বস্তু ল্যাম্বডা-এর মধ্যে, কোন UI প্রদর্শন করতে হবে তা নির্ধারণ করতে currentDestination মান ব্যবহার করুন। আপনি যদি আপনার অ্যাপে একটি নেভিগেশন লাইব্রেরি ব্যবহার করেন তবে উপযুক্ত গন্তব্য প্রদর্শন করতে এটি এখানে ব্যবহার করুন। একটি যখন বিবৃতি যথেষ্ট হতে পারে:

NavigationSuiteScaffold(
    navigationSuiteItems = { /*...*/ }
) {
    // Destination content.
    when (currentDestination) {
        AppDestinations.HOME -> HomeDestination()
        AppDestinations.FAVORITES -> FavoritesDestination()
        AppDestinations.SHOPPING -> ShoppingDestination()
        AppDestinations.PROFILE -> ProfileDestination()
    }
}
SampleNavigationSuiteScaffold.kt

রং পরিবর্তন করুন

NavigationSuiteScaffold পুরো এলাকা জুড়ে একটি Surface তৈরি করে যা স্ক্যাফোল্ড দখল করে, সাধারণত পুরো উইন্ডো। এর উপরে, স্ক্যাফোল্ড নির্দিষ্ট নেভিগেশন UI আঁকে, যেমন একটি NavigationBar । সারফেস এবং নেভিগেশন UI উভয়ই আপনার অ্যাপের থিমে নির্দিষ্ট করা মান ব্যবহার করে, কিন্তু আপনি থিমের মানগুলিকে ওভাররাইড করতে পারেন।

containerColor প্যারামিটার পৃষ্ঠের রঙ নির্দিষ্ট করে। ডিফল্ট হল আপনার রঙের স্কিমের পটভূমির রঙ। contentColor প্যারামিটার সেই পৃষ্ঠের সামগ্রীর রঙ নির্দিষ্ট করে। ডিফল্ট হল "চালু" রঙ যা containerColor জন্য নির্দিষ্ট করা হয়েছে। উদাহরণস্বরূপ, যদি containerColor background কালার ব্যবহার করে, তাহলে contentColor onBackground কালার ব্যবহার করে। রঙ সিস্টেম কীভাবে কাজ করে সে সম্পর্কে আরও বিশদ বিবরণের জন্য রচনায় উপাদান ডিজাইন 3 থিমিং দেখুন। এই মানগুলিকে ওভাররাইড করার সময়, আপনার থিমে সংজ্ঞায়িত মানগুলি ব্যবহার করুন যাতে আপনার অ্যাপ অন্ধকার এবং হালকা প্রদর্শন মোড সমর্থন করে:

NavigationSuiteScaffold(
    navigationSuiteItems = { /* ... */ },
    containerColor = MaterialTheme.colorScheme.primary,
    contentColor = MaterialTheme.colorScheme.onPrimary,
) {
    // Content...
}
SampleNavigationSuiteScaffold.kt

নেভিগেশন UI NavigationSuiteScaffold পৃষ্ঠের সামনে আঁকা হয়েছে। UI রঙগুলির জন্য ডিফল্ট মানগুলি NavigationSuiteDefaults.colors() দ্বারা সরবরাহ করা হয়, তবে আপনি এই মানগুলিও ওভাররাইড করতে পারেন৷ উদাহরণ স্বরূপ, আপনি যদি ন্যাভিগেশন বারের ব্যাকগ্রাউন্ড স্বচ্ছ হতে চান কিন্তু অন্যান্য মানগুলি ডিফল্ট হতে চান, তাহলে navigationBarContainerColor ওভাররাইড করুন :

NavigationSuiteScaffold(
    navigationSuiteItems = { /* ... */ },
    navigationSuiteColors = NavigationSuiteDefaults.colors(
        navigationBarContainerColor = Color.Transparent,
    )
) {
    // Content...
}
SampleNavigationSuiteScaffold.kt

শেষ পর্যন্ত, আপনি নেভিগেশন UI-তে প্রতিটি আইটেম কাস্টমাইজ করতে পারেন। item ফাংশন কল করার সময়, আপনি NavigationSuiteItemColors এর একটি উদাহরণে পাস করতে পারেন। ক্লাস একটি নেভিগেশন বার, নেভিগেশন রেল, এবং নেভিগেশন ড্রয়ারের আইটেমগুলির জন্য রং নির্দিষ্ট করে। এর মানে হল প্রতিটি নেভিগেশন UI টাইপ জুড়ে আপনার অভিন্ন রং থাকতে পারে, অথবা আপনি আপনার প্রয়োজনের উপর ভিত্তি করে রঙের পরিবর্তন করতে পারেন। সমস্ত আইটেমের জন্য একই অবজেক্ট ইন্সট্যান্স ব্যবহার করতে NavigationSuiteScaffold স্তরে রঙগুলি সংজ্ঞায়িত করুন এবং শুধুমাত্র আপনি যেগুলি পরিবর্তন করতে চান তাকে ওভাররাইড করতে NavigationSuiteDefaults.itemColors() ফাংশনটি কল করুন:

val myNavigationSuiteItemColors = NavigationSuiteDefaults.itemColors(
    navigationBarItemColors = NavigationBarItemDefaults.colors(
        indicatorColor = MaterialTheme.colorScheme.primaryContainer,
        selectedIconColor = MaterialTheme.colorScheme.onPrimaryContainer
    ),
)

NavigationSuiteScaffold(
    navigationSuiteItems = {
        AppDestinations.entries.forEach {
            item(
                icon = {
                    Icon(
                        it.icon,
                        contentDescription = stringResource(it.contentDescription)
                    )
                },
                label = { Text(stringResource(it.label)) },
                selected = it == currentDestination,
                onClick = { currentDestination = it },
                colors = myNavigationSuiteItemColors,
            )
        }
    },
) {
    // Content...
}
SampleNavigationSuiteScaffold.kt

নেভিগেশন প্রকার কাস্টমাইজ করুন

NavigationSuiteScaffold এর ডিফল্ট আচরণ উইন্ডো আকারের ক্লাসের উপর ভিত্তি করে নেভিগেশন UI পরিবর্তন করে। যাইহোক, আপনি এই আচরণ ওভাররাইড করতে চাইতে পারেন. উদাহরণস্বরূপ, যদি আপনার অ্যাপটি একটি ফিডের জন্য সামগ্রীর একটি একক বড় ফলক দেখায়, তবে অ্যাপটি প্রসারিত উইন্ডোগুলির জন্য একটি স্থায়ী নেভিগেশন ড্রয়ার ব্যবহার করতে পারে তবে এখনও কমপ্যাক্ট এবং মাঝারি উইন্ডো আকারের ক্লাসগুলির জন্য ডিফল্ট আচরণে ফিরে আসে:

val adaptiveInfo = currentWindowAdaptiveInfo()
val customNavSuiteType = with(adaptiveInfo) {
    if (windowSizeClass.windowWidthSizeClass == WindowWidthSizeClass.EXPANDED) {
        NavigationSuiteType.NavigationDrawer
    } else {
        NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(adaptiveInfo)
    }
}

NavigationSuiteScaffold(
    navigationSuiteItems = { /* ... */ },
    layoutType = customNavSuiteType,
) {
    // Content...
}
SampleNavigationSuiteScaffold.kt

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

• ন্যাভিগেশন নীতি

• উপাদান নকশা নির্দেশিকা:

  • নেভিগেশন বার
  • নেভিগেশন রেল
  • নেভিগেশন ড্রয়ার

• androidx.compose.material3 লাইব্রেরি উপাদান:

  • NavigationBar
  • NavigationRail
  • ModalNavigationDrawer
  • PermanentNavigationDrawer