إنشاء تنقُّل تكيُّفي

تتضمن معظم التطبيقات بعض الوجهات ذات المستوى الأعلى التي يمكن الوصول إليها من خلال واجهة المستخدم للتنقل الأساسية للتطبيق. في النوافذ المكثّفة، مثل الهاتف العادي العرض، يتم عرض الوجهات عادةً في شريط تنقل أسفل النافذة. في نافذة موسعة، مثل تطبيق بملء الشاشة على جهاز لوحي، فإن شريط تنقل إلى جانب التطبيق يكون عادةً خيارًا أفضل نظرًا يسهل الوصول إلى عناصر التحكم في التنقل أثناء الضغط مع الاستمرار على الجانبين الأيسر والأيمن الجهاز.

تسهيل التبديل بين التطبيقات باستخدام NavigationSuiteScaffold بين واجهات المستخدم للتنقل من خلال عرض واجهة مستخدم التنقل المناسبة القابلة للإنشاء بناءً على WindowSizeClass. ويتضمن ذلك بشكل ديناميكي تغيير واجهة المستخدم أثناء تغييرات حجم نافذة بيئة التشغيل. السلوك الافتراضي هو تُظهر أيًا من مكونات واجهة المستخدم التالية:

• شريط التنقل إذا كان العرض أو الارتفاع مضغوطًا أو إذا كان الجهاز في وضع "التثبيت على سطح مستوٍ"
• شريط التنقّل لكل الخدمات الأخرى

الشكل 1. يعرض NavigationSuiteScaffold شريط تنقل في نوافذ مضغوطة.

الشكل 2. يعرض "NavigationSuiteScaffold" شريط تنقُّل في النوافذ الموسّعة.

إضافة التبعيات

NavigationSuiteScaffold هي جزء من حزمة التنقّل التكيُّفي في Material3 المكتبة. أضِف تبعية للمكتبة في ملف build.gradle لتطبيقك. أو الوحدة:

Kotlin

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

Groovy

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

ملاحظة: تتوفّر مكتبة material3-adaptive-navigation-suite كإصدار تجريبي.

إنشاء سقالة

الجزآن الرئيسيان في "NavigationSuiteScaffold" هما عناصر حزمة التنقّل. ومحتوى الوجهة المحدّدة. يمكنك تحديد عناصر حزمة التنقل في عنصر قابل للإنشاء، ولكن من الشائع أن يتم تحديد هذه في مكان آخر، على سبيل المثال، في تعداد:

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

في محتوى الوجهة lambda، استخدِم القيمة currentDestination من أجل لتحديد واجهة المستخدم التي تريد عرضها. إذا كنت تستخدم مكتبة تنقُّل في تطبيقك، استخدِمها هنا لعرض الوجهة المناسبة. يمكن أن تكفي عبارة "متى" في:

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

مصادر إضافية

الاطلاع على إرشادات التصميم المتعدد الأبعاد:

• شريط التنقّل
• شريط التنقّل
• لائحة التنقل

يمكنك الاطّلاع على مكوّنات المكتبة التالية البالغ عددها androidx.compose.material3:

• NavigationBar
• NavigationRail
• ModalNavigationDrawer
• PermanentNavigationDrawer