التصميم المتعدد الأبعاد 3 هو نقطة التطور التالية للتصميم المتعدد الأبعاد. ويتضمّن تحديثًا للمظاهر والمكوّنات وميزات تخصيص Material You، مثل اللون الديناميكي. ويشكّل تحديثًا للتصميم المتعدد الأبعاد 2 وهو متوافق مع النمط المرئي الجديد وواجهة مستخدم النظام على نظام التشغيل Android 12 والإصدارات الأحدث.
يركّز هذا الدليل على الانتقال من مكتبة Jetpack Compose (androidx.compose.material) في Jetpack إلى مكتبة Jetpack Compose 3 (androidx.compose.material3) Jetpack.
المناهج
بشكل عام، يجب عدم استخدام الحسابَين M2 وM3 معًا على المدى الطويل في تطبيق واحد. ويرجع ذلك إلى حقيقة أن نظامي التصميم والمكتبات المعنيتان مختلفان بشكل كبير من حيث تصميمات تجربة المستخدم وواجهة المستخدم وعمليات تنفيذ Compose.
قد يستخدم تطبيقك نظام تصميم، مثل نظام تم إنشاؤه باستخدام Figma. في مثل هذه الحالات، ننصحك أنت أو فريق التصميم بنقل البيانات من الإصدار M2 إلى M3 قبل بدء عملية نقل Compose. ليس من المنطقي نقل تطبيق إلى M3 إذا كان تصميم تجربة المستخدم/واجهة المستخدم يعتمد على M2.
علاوةً على ذلك، يجب أن يختلف أسلوبك في نقل البيانات بناءً على حجم تطبيقك وتعقيده وتصميم تجربة المستخدم/واجهة المستخدم. يساعدك القيام بذلك في تقليل التأثير على قاعدة التعليمات البرمجية الخاصة بك. وعليك اتّخاذ نهج تدريجي لإجراء عملية نقل البيانات.
حالات نقل البيانات
عليك بدء عملية نقل البيانات في أقرب وقت ممكن. ومع ذلك، من المهم التفكير في ما إذا كان تطبيقك في وضع واقعي أم لا بخصوص الانتقال الكامل من الإصدار M2 إلى الإصدار M3. هناك بعض السيناريوهات "المحظورة" التي يجب التفكير فيها قبل البدء:
السيناريو | النهج المقترَح |
---|---|
ما مِن "أدوات حظر" | بدء نقل البيانات على مراحل |
لا يتوفّر بعد مكوّن من الإصدار M2 في الإصدار M3. راجِع قسم المكوّنات والتنسيقات أدناه. | بدء نقل البيانات على مراحل |
لم تقم أنت أو فريق التصميم الخاص بك بنقل نظام تصميم التطبيق من M2 إلى M3 | نقل نظام التصميم من M2 إلى M3، ثم بدء النقل التدريجي |
وحتى إذا كنت متأثرًا بالسيناريوهات المذكورة أعلاه، يجب عليك اتباع نهج تدريجي للنقل قبل تنفيذ تحديث للتطبيق وإصداره. في هذه الحالات، عليك استخدام الحسابَين M2 وM3 جنبًا إلى جنب، مع إيقاف الإصدار M2 تدريجيًا أثناء الانتقال إلى الإصدار M3.
النهج المرحلي
في ما يلي الخطوات العامة لنقل البيانات على مراحل:
- أضِف تبعية M3 إلى جانب تبعية M2.
- يمكنك إضافة إصدارات M3 من مظاهر تطبيقك إلى جانب إصدارات M2 من مظاهر التطبيق.
- يجب نقل الوحدات الفردية أو الشاشات أو العناصر القابلة للإنشاء إلى الإصدار M3، وفقًا لحجم تطبيقك ودرجة تعقيده (راجِع الأقسام أدناه للاطّلاع على التفاصيل).
- وبعد اكتمال عملية النقل، يجب إزالة إصدارات M2 من مظاهر تطبيقك.
- أزِل تبعية M2.
التبعيات
يتضمّن الإصدار M3 حزمة وإصدارًا منفصلَين إلى الإصدار M2:
التصميم 2
implementation "androidx.compose.material:material:$m2-version"
التصميم 3
implementation "androidx.compose.material3:material3:$m3-version"
يمكنك الاطّلاع على أحدث إصدارات M3 في صفحة إصدارات Compose Material 3.
لم تتغير تبعيات المواد الأخرى خارج مكتبات M2 وM3 الرئيسية. تستخدم هذه التطبيقات مزيجًا من حزم M2 وM3 والإصدارات الأحدث، ولكن ليس لذلك أي تأثير في نقل البيانات. يمكن استخدامها كما هي مع M3:
المكتبة | الحزمة والإصدار |
---|---|
إنشاء رموز المواد | androidx.compose.material:material-icons-*:$m2-version |
إنشاء تمويج المواد | androidx.compose.material:material-ripple:$m2-version |
إنشاء فئة حجم النوافذ للمواد 3 | androidx.compose.material3:material3-window-size-class:$m3-version |
واجهات برمجة التطبيقات التجريبية
تعتبر بعض واجهات برمجة تطبيقات M3 تجريبية. في هذه الحالات، يجب تفعيل الميزة على مستوى الوظيفة أو الملف باستخدام التعليق التوضيحي ExperimentalMaterial3Api
:
import androidx.compose.material3.ExperimentalMaterial3Api
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppComposable() {
// M3 composables
}
التصميم
في كل من M2 وM3، يكون اسم المظهر القابل للإنشاء MaterialTheme
ولكن تختلف حزم الاستيراد والمعلمات:
التصميم 2
import androidx.compose.material.MaterialTheme
MaterialTheme(
colors = AppColors,
typography = AppTypography,
shapes = AppShapes
) {
// M2 content
}
التصميم 3
import androidx.compose.material3.MaterialTheme
MaterialTheme(
colorScheme = AppColorScheme,
typography = AppTypography,
shapes = AppShapes
) {
// M3 content
}
اللون
![مقارنة بين أنظمة الألوان M2 وM3](https://developer.android.com/static/develop/ui/compose/images/migration-color-update.png?authuser=8&hl=ar)
يختلف نظام الألوان في M3 بشكل كبير عن M2. زاد عدد معلمات الألوان، ولها أسماء مختلفة، ويتم تعيينها بشكل مختلف لمكونات M3. في Compose، ينطبق ذلك على الفئة M2
Colors
والفئة M3 ColorScheme
والدوال ذات الصلة:
التصميم 2
import androidx.compose.material.lightColors
import androidx.compose.material.darkColors
val AppLightColors = lightColors(
// M2 light Color parameters
)
val AppDarkColors = darkColors(
// M2 dark Color parameters
)
val AppColors = if (darkTheme) {
AppDarkColors
} else {
AppLightColors
}
التصميم 3
import androidx.compose.material3.lightColorScheme
import androidx.compose.material3.darkColorScheme
val AppLightColorScheme = lightColorScheme(
// M3 light Color parameters
)
val AppDarkColorScheme = darkColorScheme(
// M3 dark Color parameters
)
val AppColorScheme = if (darkTheme) {
AppDarkColorScheme
} else {
AppLightColorScheme
}
نظرًا للاختلافات الكبيرة بين نظامي الألوان M2 وM3، لا يمكن ربط معلَمات Color
بطريقة معقولة. بدلاً من ذلك، استخدِم أداة إنشاء
Material Theme Builder لإنشاء نظام ألوان M3. استخدم ألوان M2
كألوان مصدر "أساسية" في الأداة، والتي توسِّع الأداة إلى لوحات الدرجات اللونية التي يستخدمها نظام الألوان M3. يوصى بالتعيينات التالية
كنقطة بداية:
التصميم 2 | أداة إنشاء المظاهر المتعددة الأبعاد |
---|---|
primary |
Primary |
primaryVariant |
Secondary |
secondary |
Tertiary |
surface أو background |
لا إيجابية ولا سلبية |
![ألوان M2 المستخدمة في Material Theme Builder لإنشاء نظام ألوان M3](https://developer.android.com/static/develop/ui/compose/images/migration-colorscheme-update.png?authuser=8&hl=ar)
يمكنك نسخ قيم الرموز السداسية العشرية للألوان للمظاهر الفاتحة والداكنة من الأداة واستخدامها لتنفيذ مثيل M3 ColorScheme. وبدلاً من ذلك، يمكن لأداة Material Theme Builder تصدير رمز Compose.
isLight
على عكس الفئة Colors
M2، لا تتضمّن الفئة M3 ColorScheme
مَعلمة isLight
. بشكل عام، يجب أن تحاول تصميم كل ما يحتاج
إلى هذه المعلومات على مستوى الموضوع. على سبيل المثال:
التصميم 2
import androidx.compose.material.lightColors
import androidx.compose.material.darkColors
import androidx.compose.material.MaterialTheme
@Composable
private fun AppTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit
) {
val colors = if (darkTheme) darkColors(…) else lightColors(…)
MaterialTheme(
colors = colors,
content = content
)
}
@Composable
fun AppComposable() {
AppTheme {
val cardElevation = if (MaterialTheme.colors.isLight) 0.dp else 4.dp
…
}
}
التصميم 3
import androidx.compose.material3.lightColorScheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.MaterialTheme
val LocalCardElevation = staticCompositionLocalOf { Dp.Unspecified }
@Composable
private fun AppTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit
) {
val cardElevation = if (darkTheme) 4.dp else 0.dp
CompositionLocalProvider(LocalCardElevation provides cardElevation) {
val colorScheme = if (darkTheme) darkColorScheme(…) else lightColorScheme(…)
MaterialTheme(
colorScheme = colorScheme,
content = content
)
}
}
@Composable
fun AppComposable() {
AppTheme {
val cardElevation = LocalCardElevation.current
…
}
}
اطّلع على أنظمة التصميم المخصّصة في دليل Compose للحصول على مزيد من المعلومات.
ألوان ديناميكية
هناك ميزة جديدة في الإصدار M3 هي اللون الديناميكي. بدلاً من استخدام ألوان مخصّصة، يمكن لـ ColorScheme
M3 الاستفادة من ألوان خلفية الجهاز على Android 12 والإصدارات الأحدث، وذلك باستخدام الدوال التالية:
أسلوب الخط
![مقارنة بين نظامَي الطباعة M2 وM3](https://developer.android.com/static/develop/ui/compose/images/migration-typography-update.png?authuser=8&hl=ar)
يختلف نظام الطباعة في M3 عن التصميم M2. عدد معلمات أسلوب الخط هو ذاته تقريبًا، لكن لها أسماء مختلفة
وترتبط بشكل مختلف بمكونات M3. في Compose، ينطبق ذلك على الفئة M2
Typography
والفئة M3 Typography
:
التصميم 2
import androidx.compose.material.Typography
val AppTypography = Typography(
// M2 TextStyle parameters
)
التصميم 3
import androidx.compose.material3.Typography
val AppTypography = Typography(
// M3 TextStyle parameters
)
يُنصَح باستخدام عمليات ربط مَعلمات TextStyle
التالية كنقطة بداية:
التصميم 2 | التصميم 3 |
---|---|
h1 |
displayLarge |
h2 |
displayMedium |
h3 |
displaySmall |
ما مِن مدة | headlineLarge |
h4 |
headlineMedium |
h5 |
headlineSmall |
h6 |
titleLarge |
subtitle1 |
titleMedium |
subtitle2 |
titleSmall |
body1 |
bodyLarge |
body2 |
bodyMedium |
caption |
bodySmall |
button |
labelLarge |
ما مِن مدة | labelMedium |
overline |
labelSmall |
شكل
![مقارنة بين أنظمة الشكل M2 وM3](https://developer.android.com/static/develop/ui/compose/images/migration-shape-update.png?authuser=8&hl=ar)
يختلف نظام الشكل في M3 عن M2. لقد زاد عدد معلمات الشكل، وتم تسميتها بشكل مختلف ويتم ربطها بشكل مختلف بمكونات M3. في Compose، ينطبق ذلك على الفئة M2 Shapes
والفئة M3 Shapes
:
التصميم 2
import androidx.compose.material.Shapes
val AppShapes = Shapes(
// M2 Shape parameters
)
التصميم 3
import androidx.compose.material3.Shapes
val AppShapes = Shapes(
// M3 Shape parameters
)
يُنصَح باستخدام عمليات ربط مَعلمات Shape
التالية كنقطة بداية:
التصميم 2 | التصميم 3 |
---|---|
ما مِن مدة | extraSmall |
small |
small |
medium |
medium |
large |
large |
ما مِن مدة | extraLarge |
المكونات والتخطيطات
تتوفر معظم المكونات والتخطيطات من M2 في M3. مع ذلك، هناك بعض السمات المفقودة والجديدة التي لم تكن متوفرة في الإصدار M2. فضلاً عن ذلك، تحتوي بعض مكوّنات M3 على اختلافات أكثر من نظيراتها في M2. بشكل عام، تحاول أسطح M3 API أن تكون مشابهة قدر الإمكان لأقرب نظيراتها في M2.
بالنظر إلى أنظمة الألوان وأسلوب الخط والشكل المحدثة، تميل مكونات M3 إلى التعيين بشكل مختلف مع قيم الموضوعات الجديدة. ننصحك بمراجعة دليل الرموز المميّزة في رمز المصدر Compose Material 3 كمصدر للحقيقة المتعلّقة بعمليات الربط هذه.
بينما تتطلب بعض المكوّنات اعتبارات خاصة، يُنصَح باستخدام عمليات ربط الدوال التالية كنقطة بداية:
واجهات برمجة التطبيقات المفقودة:
التصميم 2 | التصميم 3 |
---|---|
androidx.compose.material.swipeable |
غير متوفّر بعد |
واجهات برمجة التطبيقات التي تم استبدالها:
التصميم 2 | التصميم 3 |
---|---|
androidx.compose.material.BackdropScaffold |
لا يتوفّر إصدار مكافئ M3، يُرجى نقل البيانات إلى Scaffold أو BottomSheetScaffold بدلاً من ذلك. |
androidx.compose.material.BottomDrawer |
لا يتوفّر إصدار مكافئ M3، يُرجى نقل البيانات إلى ModalBottomSheet بدلاً من ذلك. |
واجهات برمجة التطبيقات التي تمت إعادة تسميتها:
جميع واجهات برمجة التطبيقات الأخرى:
يمكنك الاطّلاع على أحدث مكوّنات وتنسيقات M3 في نظرة عامة على مرجع واجهة برمجة التطبيقات Compose Material 3، وتابِع صفحة الإصدارات للاطّلاع على واجهات برمجة التطبيقات الجديدة والمحدّثة.
سقالة وأشرطة وجبات خفيفة ودرج تنقل
![مقارنة بين السقالة M2 وM3 مع شريط الإعلام المنبثق ودرج التنقل](https://developer.android.com/static/develop/ui/compose/images/migration-scaffold-update.gif?authuser=8&hl=ar)
تختلف السقالة في M3 عن M2. في الإصدارَين M2 وM3، يكون اسم التنسيق الرئيسي القابل للإنشاء هو Scaffold
، لكنّ حِزم الاستيراد والمَعلمات تختلف:
التصميم 2
import androidx.compose.material.Scaffold
Scaffold(
// M2 scaffold parameters
)
التصميم 3
import androidx.compose.material3.Scaffold
Scaffold(
// M3 scaffold parameters
)
تحتوي المَعلمة M2 Scaffold
على المَعلمة backgroundColor
، وقد تم تسميتها الآن باسم
containerColor
في M3 Scaffold
:
التصميم 2
import androidx.compose.material.Scaffold
Scaffold(
backgroundColor = …,
content = { … }
)
التصميم 3
import androidx.compose.material3.Scaffold
Scaffold(
containerColor = …,
content = { … }
)
لم تعُد الفئة M2 ScaffoldState
متوفّرة في M3 لأنّها تحتوي على مَعلمة drawerState
لم تعُد ضرورية. لعرض أشرطة الوجبات الخفيفة مع
M3 Scaffold
، استخدِم SnackbarHostState
بدلاً من ذلك:
التصميم 2
import androidx.compose.material.Scaffold
import androidx.compose.material.rememberScaffoldState
val scaffoldState = rememberScaffoldState()
val scope = rememberCoroutineScope()
Scaffold(
scaffoldState = scaffoldState,
content = {
…
scope.launch {
scaffoldState.snackbarHostState.showSnackbar(…)
}
}
)
التصميم 3
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
val snackbarHostState = remember { SnackbarHostState() }
val scope = rememberCoroutineScope()
Scaffold(
snackbarHost = { SnackbarHost(snackbarHostState) },
content = {
…
scope.launch {
snackbarHostState.showSnackbar(…)
}
}
)
تمت إزالة جميع معلَمات drawer*
من M2 Scaffold
من M3 Scaffold
. وتشمل هذه المعلَمات مثل drawerShape
وdrawerContent
. لعرض درج يتضمن Scaffold
M3، استخدِم درج تنقُّل قابلاً للإنشاء، مثل ModalNavigationDrawer
، بدلاً من ذلك:
التصميم 2
import androidx.compose.material.DrawerValue
import
import androidx.compose.material.Scaffold
import androidx.compose.material.rememberDrawerState
import androidx.compose.material.rememberScaffoldState
val scaffoldState = rememberScaffoldState(
drawerState = rememberDrawerState(DrawerValue.Closed)
)
val scope = rememberCoroutineScope()
Scaffold(
scaffoldState = scaffoldState,
drawerContent = { … },
drawerGesturesEnabled = …,
drawerShape = …,
drawerElevation = …,
drawerBackgroundColor = …,
drawerContentColor = …,
drawerScrimColor = …,
content = {
…
scope.launch {
scaffoldState.drawerState.open()
}
}
)
التصميم 3
import androidx.compose.material3.DrawerValue
import androidx.compose.material3.ModalDrawerSheet
import androidx.compose.material3.ModalNavigationDrawer
import androidx.compose.material3.Scaffold
import androidx.compose.material3.rememberDrawerState
val drawerState = rememberDrawerState(DrawerValue.Closed)
val scope = rememberCoroutineScope()
ModalNavigationDrawer(
drawerState = drawerState,
drawerContent = {
ModalDrawerSheet(
drawerShape = …,
drawerTonalElevation = …,
drawerContainerColor = …,
drawerContentColor = …,
content = { … }
)
},
gesturesEnabled = …,
scrimColor = …,
content = {
Scaffold(
content = {
…
scope.launch {
drawerState.open()
}
}
)
}
)
شريط التطبيق العلوي
![مقارنة بين سقالة M2 وM3 مع شريط التطبيق العلوي وقائمة التمرير](https://developer.android.com/static/develop/ui/compose/images/migration-topbar-update.png?authuser=8&hl=ar)
تختلف أشرطة التطبيقات الأفضل في الإصدار M3 عن تلك في الإصدار M2. في كلا الإصدارين M2 وM3، يكون اسم شريط التطبيق العلوي القابل للإنشاء هو TopAppBar
،
لكن حزم الاستيراد والمعلمات تختلف:
التصميم 2
import androidx.compose.material.TopAppBar
TopAppBar(…)
التصميم 3
import androidx.compose.material3.TopAppBar
TopAppBar(…)
يمكنك استخدام M3 CenterAlignedTopAppBar
إذا كنت ترتكز سابقًا على المحتوى ضمن M2 TopAppBar
. من المفيد أيضًا الاطّلاع على MediumTopAppBar
وLargeTopAppBar
.
تحتوي أشرطة التطبيقات العليا M3 على مَعلمة scrollBehavior
جديدة لتوفير
وظائف مختلفة عند التنقّل في الفئة TopAppBarScrollBehavior
،
مثل تغيير المسقط الرأسي. يعمل ذلك بالتزامن مع تمرير المحتوى من خلال Modifer.nestedScroll
. وقد كان ذلك ممكنًا في الإصدار M2 TopAppBar
من خلال
تغيير مَعلمة elevation
يدويًا:
التصميم 2
import androidx.compose.material.AppBarDefaults
import androidx.compose.material.Scaffold
import androidx.compose.material.TopAppBar
val state = rememberLazyListState()
val isAtTop by remember {
derivedStateOf {
state.firstVisibleItemIndex == 0 && state.firstVisibleItemScrollOffset == 0
}
}
Scaffold(
topBar = {
TopAppBar(
elevation = if (isAtTop) {
0.dp
} else {
AppBarDefaults.TopAppBarElevation
},
…
)
},
content = {
LazyColumn(state = state) { … }
}
)
التصميم 3
import androidx.compose.material3.Scaffold
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()
Scaffold(
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
topBar = {
TopAppBar(
scrollBehavior = scrollBehavior,
…
)
},
content = {
LazyColumn { … }
}
)
شريط التنقل السفلي / شريط التنقل
![مقارنة بين شريط التنقّل السفلي M2 وشريط التنقّل M3](https://developer.android.com/static/develop/ui/compose/images/migration-bottomnav-update.png?authuser=8&hl=ar)
تمت إعادة تسمية شريط التنقّل السفلي في M2 ليصبح شريط التنقّل في M3. في التصميم M2، هناك العنصران BottomNavigation
وBottomNavigationItem
القابلان للإنشاء، بينما في الإصدار M3 هناك العنصران
NavigationBar
وNavigationBarItem
القابلَين للإنشاء:
التصميم 2
import androidx.compose.material.BottomNavigation
import androidx.compose.material.BottomNavigationItem
BottomNavigation {
BottomNavigationItem(…)
BottomNavigationItem(…)
BottomNavigationItem(…)
}
التصميم 3
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
NavigationBar {
NavigationBarItem(…)
NavigationBarItem(…)
NavigationBarItem(…)
}
الأزرار وأزرار الرموز وأزرار التحكم في الإجراءات (FAB)
![مقارنة بين الزرَّين M2 وM3](https://developer.android.com/static/develop/ui/compose/images/migration-buttons-update.png?authuser=8&hl=ar)
تختلف الأزرار وأزرار الرموز وأزرار الإجراءات العائمة في الإصدار M3 عن تلك المتوفرة في الإصدار M2. يشمل التصميم M3 جميع عناصر الزر M2 القابلة للإنشاء:
التصميم 2
import androidx.compose.material.Button
import androidx.compose.material.ExtendedFloatingActionButton
import androidx.compose.material.FloatingActionButton
import androidx.compose.material.IconButton
import androidx.compose.material.IconToggleButton
import androidx.compose.material.OutlinedButton
import androidx.compose.material.TextButton
// M2 buttons
Button(…)
OutlinedButton(…)
TextButton(…)
// M2 icon buttons
IconButton(…)
IconToggleButton(…)
// M2 FABs
FloatingActionButton(…)
ExtendedFloatingActionButton(…)
التصميم 3
import androidx.compose.material3.Button
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.IconButton
import androidx.compose.material3.IconToggleButton
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.TextButton
// M3 buttons
Button(…)
OutlinedButton(…)
TextButton(…)
// M3 icon buttons
IconButton(…)
IconToggleButton(…)
// M3 FABs
FloatingActionButton(…)
ExtendedFloatingActionButton(…)
يتضمن M3 أيضًا تباينات جديدة للأزرار. يمكنك الاطّلاع عليها في نظرة عامة على المراجع الخاصة بواجهة برمجة التطبيقات في Compose Material 3.
تبديل
![مقارنة بين المبدلات M2 وM3](https://developer.android.com/static/develop/ui/compose/images/migration-switch-update.png?authuser=8&hl=ar)
يختلف التبديل في M3 عن الحساب M2. في الإصدارين M2 وM3، تتم تسمية مفتاح التحكّم
القابل للإنشاء باسم Switch
، لكنّ حزم الاستيراد تختلف:
التصميم 2
import androidx.compose.material.Switch
Switch(…)
التصميم 3
import androidx.compose.material3.Switch
Switch(…)
الأسطح والارتفاع
![مقارنة بين ارتفاع السطح M2 وارتفاع السطح M3 في المظهرَين الفاتح والداكن](https://developer.android.com/static/develop/ui/compose/images/migration-elevation-update.png?authuser=8&hl=ar)
تختلف أنظمة السطح والارتفاع في M3 عن أنظمة التشغيل M2. هناك نوعان من الارتفاع في M3:
- ارتفاع الظل (لبث الظل، تمامًا مثل M2)
- ارتفاع الدرجة اللونية (يتراكب على لون، جديد على M3)
في Compose، ينطبق ذلك على الدالة M2 Surface
والدالة M3
Surface
:
التصميم 2
import androidx.compose.material.Surface
Surface(
elevation = …
) { … }
التصميم 3
import androidx.compose.material3.Surface
Surface(
shadowElevation = …,
tonalElevation = …
) { … }
يمكنك استخدام قيم elevation
Dp
في M2 لكل من shadowElevation
و/أو tonalElevation
في M3، وفقًا لاختيار تصميم تجربة المستخدم وواجهة المستخدم.
Surface
هي النسخة الاحتياطية القابلة للإنشاء خلف معظم المكوّنات، لذلك قد تعرض العناصر القابلة للإنشاء أيضًا مَعلمات الارتفاع التي يجب نقلها بالطريقة نفسها.
يحل ارتفاع الدرجات اللونية في M3 محل مفهوم تراكبات الارتفاع في المظاهر الداكنة M2 . ونتيجةً لذلك، لا يتوفّر ElevationOverlay
وLocalElevationOverlay
في الإصدار M3، وتغيّر LocalAbsoluteElevation
في الحساب M2 إلى
LocalAbsoluteTonalElevation
في الإصدار M3.
التوكيد والمحتوى ألفا
![مقارنة بين رمزَي M2 وM3 وتوكيد النص](https://developer.android.com/static/develop/ui/compose/images/migration-emphasis-update.png?authuser=8&hl=ar)
يختلف التوكيد في M3 اختلافًا كبيرًا عن M2. في التوكيد M2، ينطوي استخدام ألوان "تشغيل" مع قيم ألفا معينة للتمييز بين المحتوى مثل النص والأيقونات. في الإصدار M3، تتوفّر الآن طريقتان مختلفتان:
- استخدام ألوان "تشغيل" إلى جانب ألوان "خيار التشغيل" من نظام ألوان M3 الموسَّع.
- استخدام سُمك خط مختلفة للنص
نتيجةً لذلك، لا يتوفر ContentAlpha
وLocalContentAlpha
في
M3 ويجب استبدالهما.
يُوصى بعمليات الربط التالية كنقطة بداية:
التصميم 2 | التصميم 3 |
---|---|
onSurface لدى ContentAlpha.high |
onSurface بشكل عام، FontWeight.Medium - FontWeight.Black للنص |
onSurface لدى ContentAlpha.medium |
onSurfaceVariant بشكل عام، FontWeight.Thin - FontWeight.Normal للنص |
onSurface لدى ContentAlpha.disabled |
onSurface.copy(alpha = 0.38f) |
في ما يلي مثال على توكيد الرمز في M2 مقابل M3:
التصميم 2
import androidx.compose.material.ContentAlpha
import androidx.compose.material.LocalContentAlpha
// High emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {
Icon(…)
}
// Medium emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
Icon(…)
}
// Disabled emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {
Icon(…)
}
التصميم 3
import androidx.compose.material3.LocalContentColor
// High emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface) {
Icon(…)
}
// Medium emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurfaceVariant) {
Icon(…)
}
// Disabled emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)) {
Icon(…)
}
في ما يلي مثال على التوكيد على النص في M2 مقابل M3:
التصميم 2
import androidx.compose.material.ContentAlpha
import androidx.compose.material.LocalContentAlpha
// High emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {
Text(…)
}
// Medium emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
Text(…)
}
// Disabled emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {
Text(…)
}
التصميم 3
import androidx.compose.material3.LocalContentColor
// High emphasis
Text(
…,
fontWeight = FontWeight.Bold
)
// Medium emphasis
Text(
…,
fontWeight = FontWeight.Normal
)
// Disabled emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)) {
Text(
…,
fontWeight = FontWeight.Normal
)
}
الخلفيات والحاويات
تتم تسمية الخلفيات في الإصدار M2 باسم "الحاويات" في الإصدار M3. بشكل عام، يمكنك استبدال معلَمات
background*
في M2 بـ container*
في M3 باستخدام القيم نفسها.
على سبيل المثال:
التصميم 2
Badge(
backgroundColor = MaterialTheme.colors.primary
) { … }
التصميم 3
Badge(
containerColor = MaterialTheme.colorScheme.primary
) { … }
إمكانية التشغيل التفاعلي لمشاهدات
إذا كان تطبيقك يتضمّن "طُرق العرض" أو إمكانية التشغيل التفاعلي بتنسيق XML ويستخدم مكتبة MDC-Android Compose Theme Adapter، عليك استخدام الإصدار M3:
التصميم 2
implementation "com.google.android.material:compose-theme-adapter:$compose-theme-adapter-version"
التصميم 3
implementation "com.google.android.material:compose-theme-adapter-3:$compose-theme-adapter-3-version"
اطّلع على أحدث الإصدارات على صفحة إصدارات Compose Theme Adapter من MDC-Android.
يكمن الفرق الرئيسي بين الإصدارَين M2 وM3 في العنصرَين القابلَين للإنشاء MdcTheme
وMdc3Theme
:
التصميم 2
import com.google.android.material.composethemeadapter.MdcTheme
MdcTheme {
// M2 content
}
التصميم 3
import com.google.android.material.composethemeadapter3.Mdc3Theme
Mdc3Theme {
// M3 content
}
اطّلِع على الدليل التمهيدي لمعرفة مزيد من المعلومات.
يمكن الاطلاع على دليل النقل إلى التصميم المتعدد الأبعاد للحصول على مزيد من المعلومات حول الانتقال من المادة 2 إلى المادة 3 في طرق العرض.
روابط مفيدة
لمعرفة المزيد من المعلومات حول الانتقال من M2 إلى M3 في Compose، يمكنك الاطّلاع على المراجع الإضافية التالية.
مستندات Google
نماذج التطبيقات
- الرد على نموذج تطبيق M3
- نموذج نقل بيانات تطبيق Jetchat من M2 إلى M3
- نموذج تطبيق Jetnews من الإصدار M2 إلى M3
- نموذج من تطبيق Jetsurvey لنقل البيانات من الإصدار M2 إلى M3
- تتوفر الآن في الإصدار الرئيسي M3 من تطبيق Android :Core-designsystem (وحدة نظام التصميم الأساسي)
الفيديوهات الطويلة
مرجع واجهة برمجة التطبيقات ورمز المصدر
أفلام مُقترَحة لك
- ملاحظة: يظهر نص الرابط عند إيقاف JavaScript
- التصميم المتعدد الأبعاد 2 في Compose
- التصميم المتعدد الأبعاد 3 في Compose
- أنظمة التصميم المخصّصة في Compose