ایجاد ناوبری تطبیقی

اکثر برنامه ها دارای چند مقصد سطح بالا هستند که از طریق رابط کاربری ناوبری اصلی برنامه قابل دسترسی هستند. در پنجره‌های فشرده، مانند صفحه نمایش استاندارد تلفن، مقصدها معمولاً در نوار ناوبری در پایین پنجره نمایش داده می‌شوند. در یک پنجره باز شده، مانند یک برنامه تمام صفحه در رایانه لوحی، یک ریل ناوبری در کنار برنامه معمولاً انتخاب بهتری است زیرا هنگام نگه داشتن سمت چپ و راست دستگاه، دسترسی به کنترل‌های پیمایش آسان‌تر است.

NavigationSuiteScaffold جابه‌جایی بین رابط‌های کاربری ناوبری را با نمایش رابط کاربری ناوبری مناسب بر اساس WindowSizeClass ساده می‌کند. این شامل تغییر پویا UI در طول تغییر اندازه پنجره زمان اجرا است. رفتار پیش‌فرض این است که یکی از مؤلفه‌های رابط کاربری زیر را نشان دهد:

  • اگر عرض یا ارتفاع فشرده باشد یا اگر دستگاه در وضعیت رومیزی قرار دارد، نوار پیمایش
  • راه آهن ناوبری برای هر چیز دیگری
شکل 1. NavigationSuiteScaffold یک نوار ناوبری را در پنجره های فشرده نمایش می دهد.
شکل 2. NavigationSuiteScaffold یک ریل ناوبری را در پنجره های باز شده نمایش می دهد.

وابستگی ها را اضافه کنید

NavigationSuiteScaffold بخشی از کتابخانه مجموعه ناوبری تطبیقی ​​Material3 است. یک وابستگی برای کتابخانه در فایل build.gradle برنامه یا ماژول خود اضافه کنید:

کاتلین 

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

شیار 

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

یک داربست ایجاد کنید

دو بخش اصلی NavigationSuiteScaffold عبارتند از موارد مجموعه ناوبری و محتوای مقصد انتخاب شده. شما می توانید مستقیماً موارد مجموعه ناوبری را در یک Composable تعریف کنید، اما معمول است که این موارد در جای دیگری تعریف شوند، به عنوان مثال، در یک 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 از تابع item خود برای تعریف رابط کاربری ناوبری برای یک مقصد استفاده می‌کند. رابط کاربری مقصد در نوارهای ناوبری، ریل‌ها و کشوها استفاده می‌شود. برای ایجاد موارد ناوبری، روی 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

در محتوای لامبدا مقصد، از مقدار currentDestination استفاده کنید تا تصمیم بگیرید چه UI نمایش داده شود. اگر از کتابخانه ناوبری در برنامه خود استفاده می کنید، از آن برای نمایش مقصد مناسب در اینجا استفاده کنید. یک عبارت وقتی می تواند کافی باشد: 

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

تغییر رنگ

NavigationSuiteScaffold یک Surface در کل منطقه ای که داربست اشغال می کند، معمولاً پنجره کامل ایجاد می کند. علاوه بر آن، داربست رابط کاربری ناوبری خاص، مانند NavigationBar را ترسیم می کند. هم سطح و هم رابط کاربری پیمایش از مقادیر مشخص شده در طرح زمینه برنامه شما استفاده می کنند، اما می توانید مقادیر طرح زمینه را لغو کنید.

پارامتر containerColor رنگ سطح را مشخص می کند. پیش فرض رنگ پس زمینه طرح رنگ شما است. پارامتر contentColor رنگ محتوای روی آن سطح را مشخص می کند. پیش‌فرض، رنگ «روشن» هر چیزی است که برای containerColor مشخص شده است. برای مثال، اگر containerColor از رنگ background استفاده می‌کند، contentColor از رنگ onBackground استفاده می‌کند. برای جزئیات بیشتر در مورد نحوه عملکرد سیستم رنگ، به طرح زمینه Material Design 3 در Compose مراجعه کنید. هنگام نادیده گرفتن این مقادیر، از مقادیر تعریف شده در طرح زمینه خود استفاده کنید تا برنامه شما از حالت های نمایش تیره و روشن پشتیبانی کند: 

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

رابط کاربری ناوبری در جلوی سطح NavigationSuiteScaffold کشیده شده است. مقادیر پیش‌فرض رنگ‌های رابط کاربری توسط NavigationSuiteDefaults.colors() ارائه می‌شوند، اما می‌توانید این مقادیر را نیز لغو کنید. برای مثال، اگر می‌خواهید پس‌زمینه نوار پیمایش شفاف باشد اما مقادیر دیگر پیش‌فرض باشند، navigationBarContainerColor لغو کنید: 

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

در نهایت، می‌توانید هر مورد را در رابط کاربری ناوبری سفارشی کنید. هنگام فراخوانی تابع item ، می‌توانید نمونه‌ای از NavigationSuiteItemColors را ارسال کنید. کلاس رنگ‌ها را برای آیتم‌های نوار پیمایش، ریل ناوبری و کشوی ناوبری مشخص می‌کند. این بدان معناست که می‌توانید رنگ‌های یکسانی را در هر نوع رابط کاربری ناوبری داشته باشید، یا می‌توانید رنگ‌ها را بر اساس نیاز خود تغییر دهید. رنگ ها را در سطح 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 رابط کاربری ناوبری را بر اساس کلاس‌های اندازه پنجره تغییر می‌دهد. با این حال، ممکن است بخواهید این رفتار را نادیده بگیرید. به عنوان مثال، اگر برنامه شما یک صفحه بزرگ از محتوا را برای یک فید نشان می‌دهد، برنامه می‌تواند از کشوی پیمایش دائمی برای پنجره‌های بازشده استفاده کند، اما همچنان به رفتار پیش‌فرض برای کلاس‌های اندازه پنجره فشرده و متوسط ​​برمی‌گردد: 

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

منابع اضافی

قبلی
پشتیبانی از پنجره دسکتاپ
بعدی
یک چیدمان فهرست با جزئیات بسازید