Material Design 3 هو التطور التالي لتصميم Material Design. ويشمل ذلك المظاهر والمكونات الجديدة وميزات تخصيص Material You، مثل الألوان الديناميكية. وهو تحديث لتطبيق Material Design 2 ويتوافق مع النمط المرئي الجديد وواجهة مستخدم النظام على الإصدار 12 من نظام التشغيل Android والإصدارات الأحدث.
يركِّز هذا الدليل على نقل البيانات من مكتبة Jetpack (androidx.compose.material) إلى مكتبة Jetpack Compose 3 (androidx.compose.material3).
.الأساليب
بوجه عام، يجب عدم استخدام كلٍّ من الإصدارَين 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.
لم تتغير تبعيات Material الأخرى خارج المكتبتين الرئيسيتين M2 وM3. وهي تستخدم مزيجًا من الحزم والإصدارات M2 وM3، ولكن هذا لا يؤثر في عملية الترحيل. ويمكن استخدامها كما هي مع الإصدار M3:
| المكتبة | الحزمة والإصدار |
|---|---|
| إنشاء رموز Material | 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 API تجريبية. وفي مثل هذه الحالات، عليك تفعيل الميزة على مستوى الوظيفة أو الملف باستخدام التعليق التوضيحي 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
}
اللون
يختلف نظام الألوان في الإصدار 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 |
لا إيجابية ولا سلبية |
يمكنك نسخ قيم الكود السداسي العشري للون للمظاهر الفاتحة والداكنة من الأداة واستخدامها لتنفيذ مثيل M3 ColorScheme. بدلاً من ذلك، يمكن لـ Material Theme Builder تصدير رمز Compose.
isLight
وعلى عكس الفئة Colors M2، لا تتضمّن الفئة ColorScheme M3 المعلَمة
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 هي اللون الديناميكي. بدلاً من استخدام الألوان المخصّصة، بإمكان الإصدار M3 ColorScheme الاستفادة من ألوان خلفية الجهاز على الإصدار 12 من نظام التشغيل Android والإصدارات الأحدث، وذلك باستخدام الوظائف التالية:
أسلوب الخط
يختلف نظام الطباعة في الإصدار 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 |
شكل
يختلف نظام الشكل في 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 أن تكون متشابهة قدر الإمكان مع أقرب نظيراتها في الإصدار 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 API وترقّب وصول صفحة الإصدارات إلى واجهات برمجة التطبيقات الجديدة والمحدّثة.
سقّالة وأشرطة للوجبات الخفيفة ودرج التنقل
تختلف السقالة في 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 لم تعُد مطلوبة. لعرض أشرطة الإعلام المنبثق مع ScaffoldM3، استخدِم 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* من Scaffold Scaffold من M3. وتشمل هذه البيانات معلَمات مثل 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()
}
}
)
}
)
شريط التطبيق العلوي
تختلف أهم أشرطة التطبيقات في الإصدار M3 عن تلك المتوفرة في الإصدار M2. في كل من M2
وM3، تتم تسمية شريط التطبيق العلوي الرئيسي القابل للإنشاء باسم TopAppBar ولكن تختلف حزم
الاستيراد والمعلمات:
التصميم 2
import androidx.compose.material.TopAppBar
TopAppBar(…)
التصميم 3
import androidx.compose.material3.TopAppBar
TopAppBar(…)
ننصحك باستخدام M3 CenterAlignedTopAppBar إذا كنت تركّز سابقًا
على المحتوى في TopAppBar M2. من المفيد أن تكون على دراية بالسمتَين
MediumTopAppBar وLargeTopAppBar أيضًا.
تحتوي أشرطة التطبيقات M3 العليا على مَعلمة scrollBehavior جديدة لتوفير وظائف مختلفة عند التمرير عبر فئة TopAppBarScrollBehavior، مثل تغيير المسقط الرأسي. يُستخدَم هذا الإجراء مع المحتوى الذي يتم تمريره عبر Modifer.nestedScroll. وقد كان ذلك ممكنًا في الإصدار TopAppBar من M2 من خلال
تغيير المَعلمة 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. وفي 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(…)
}
الأزرار وأزرار الرموز وأزرار الإجراءات العائمة
تختلف الأزرار وأزرار الرموز وأزرار الإجراءات العائمة في الإصدار 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.
Switch
يختلف مفتاح التبديل في الإصدار M3 عن الإصدار M2. في كل من M2 وM3، تتم تسمية المبدل
القابل للإنشاء باسم Switch لكن حزم الاستيراد تختلف:
التصميم 2
import androidx.compose.material.Switch
Switch(…)
التصميم 3
import androidx.compose.material3.Switch
Switch(…)
الأسطح والارتفاع
تختلف أنظمة السطح والارتفاع في M3 عن M2. هناك نوعان من الارتفاع في M3:
- ارتفاع الظل (يؤدي إلى زيادة الظل بنفس الطريقة M2)
- ارتفاع الدرجات اللونية (يتراكب على لون، جديد إلى M3)
في Compose، ينطبق ذلك على الوظيفة Surface M2 و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.
التوكيد والمحتوى ألفا
يختلف التوكيد في M3 بشكل كبير عن التوكيد في M2. في التوكيد M2 ينطوي على استخدام ألوان "تشغيل" مع قيم ألفا معينة للتمييز بين المحتوى مثل النص والأيقونات. في M3، يوجد الآن نهجان مختلفان:
- استخدام ألوان "on" إلى جانب ألوان "التباين على" من نظام ألوان 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، عليك استخدام الإصدار 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"
يمكنك الاطّلاع على أحدث الإصدارات في صفحة إصدارات MDC-Android Compose Theme Adapter.
يتمثل الاختلاف الرئيسي بين الإصدارين 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
}
يمكنك الاطّلاع على ملف README للحصول على مزيد من المعلومات.
راجع دليل النقل إلى Material Design 3 لمزيد من المعلومات حول الانتقال من Material 2 إلى Material 3 في طرق العرض.
روابط مفيدة
لمعرفة المزيد من المعلومات عن نقل البيانات من M2 إلى M3 في Compose، يُرجى الرجوع إلى الموارد الإضافية التالية.
مستندات Google
نماذج التطبيقات
- الرد على نموذج تطبيق M3
- نقل بيانات نموذج Jetchat من الإصدار M2 إلى M3
- نقل بيانات نموذج Jetnews من الإصدار M2 إلى الإصدار M3
- نقل بيانات نموذج Jetsurvey من الإصدار M2 إلى الإصدار M3
- الآن في وحدة Android M3 الرئيسية في تطبيق :core-designsystem
الفيديوهات الطويلة
مرجع واجهة برمجة التطبيقات ورمز المصدر
أفلام مُقترَحة لك
- ملاحظة: يتم عرض نص الرابط عند إيقاف JavaScript.
- Material Design 2 في Compose
- التصميم المتعدد الأبعاد 3 في Compose
- أنظمة التصميم المخصّصة في Compose