يتيح Jetpack Compose تنفيذ Material Design 3، وهو المرحلة التالية من تطوير نظام Material Design. تشمل Material 3 تصاميم ومكونات وميزات تخصيص Material You المعدّلة مثل اللون الديناميكي، وهي مصممة لتكون متوافقة مع النمط المرئي الجديد وواجهة مستخدم النظام على Android 12 والإصدارات الأحدث.
نوضح أدناه تطبيق Material Design 3 باستخدام Reply sample app كمثال. تعتمد عينة Reply بالكامل على Material Design 3.
التبعية
لبدء استخدام Material 3 في تطبيق Compose، أضِف تبعية Compose Material 3 إلى ملفات build.gradle
:
implementation "androidx.compose.material3:material3:$material3_version"
بمجرد إضافة التبعية، يمكنك البدء في إضافة أنظمة Material Design، بما في ذلك اللون وأسلوب الخط والشكل، إلى تطبيقاتك.
واجهات برمجة التطبيقات التجريبية
تعتبر بعض واجهات برمجة تطبيقات M3 تجريبية. في هذه الحالات، يجب تفعيل الميزة على مستوى الوظيفة أو الملف باستخدام التعليق التوضيحي ExperimentalMaterial3Api
:
// import androidx.compose.material3.ExperimentalMaterial3Api @OptIn(ExperimentalMaterial3Api::class) @Composable fun AppComposable() { // M3 composables }
تحديد نسق المواد
يحتوي مظهر M3 على الأنظمة الفرعية التالية: نظام الألوان وأسلوب الخط والأشكال. عند تخصيص هذه القيم، تظهر التغييرات التي أجريتها تلقائيًا في مكونات M3 التي تستخدمها لإنشاء تطبيقك.
تنفِّذ Jetpack Compose هذه المفاهيم باستخدام MaterialTheme
M3
القابل للإنشاء:
MaterialTheme( colorScheme = /* ... typography = /* ... shapes = /* ... ) { // M3 app content }
لتصميم محتوى تطبيقك، حدد نظام الألوان وأسلوب الخط والأشكال الخاصة بتطبيقك.
النمط اللوني
أساس نظام الألوان هو مجموعة من خمسة ألوان رئيسية. يتعلق كل لون من هذه الألوان بلوحة ألوان من 13 درجة، يتم استخدامها بواسطة مكونات Material 3. على سبيل المثال، هذا هو نظام الألوان للمظهر الفاتح في الرد:
يمكنك الاطّلاع على مزيد من المعلومات عن أدوار الألوان ونظام الألوان.
إنشاء أنظمة ألوان
على الرغم من أنّه يمكنك إنشاء ColorScheme
مخصّصة يدويًا، يسهل غالبًا
إنشائه باستخدام ألوان المصدر من علامتك التجارية. تتيح لك أداة تصميم
نسق المواد إجراء ذلك، وتصدير
رمز إنشاء القوالب اختياريًا. يتم إنشاء الملفات التالية:
- يحتوي
Color.kt
على ألوان مظهرك مع جميع الأدوار المحددة لكل من الألوان الفاتحة والداكنة.
val md_theme_light_primary = Color(0xFF476810) val md_theme_light_onPrimary = Color(0xFFFFFFFF) val md_theme_light_primaryContainer = Color(0xFFC7F089) // .. // .. val md_theme_dark_primary = Color(0xFFACD370) val md_theme_dark_onPrimary = Color(0xFF213600) val md_theme_dark_primaryContainer = Color(0xFF324F00) // .. // ..
- يحتوي
Theme.kt
على إعداد لدرجات الألوان الفاتحة والداكنة ومظهر التطبيق.
private val LightColorScheme = lightColorScheme( primary = md_theme_light_primary, onPrimary = md_theme_light_onPrimary, primaryContainer = md_theme_light_primaryContainer, // .. ) private val DarkColorScheme = darkColorScheme( primary = md_theme_dark_primary, onPrimary = md_theme_dark_onPrimary, primaryContainer = md_theme_dark_primaryContainer, // .. ) @Composable fun ReplyTheme( darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit ) { val colorScheme = if (!darkTheme) { LightColorScheme } else { DarkColorScheme } MaterialTheme( colorScheme = colorScheme, content = content ) }
لإتاحة المظهرَين الفاتح والداكن، استخدِم isSystemInDarkTheme()
. وبناءً على إعداد النظام، حدِّد نظام الألوان الذي تريد استخدامه: فاتح أم داكن.
أنظمة الألوان الديناميكية
اللون الديناميكي هو الجزء الأساسي من Material You، والذي تستمد فيه الخوارزمية ألوانًا مخصّصة من خلفية المستخدم ليتم تطبيقها على تطبيقاته وواجهة مستخدم النظام. تُستخدم لوحة الألوان هذه كنقطة بداية لإنشاء أنظمة ألوان فاتحة وداكنة.
تتوفّر الألوان الديناميكية على نظام التشغيل Android 12 والإصدارات الأحدث. إذا كان اللون الديناميكي متاحًا،
يمكنك إعداد سمة ColorScheme
ديناميكية. إذا لم يكن الأمر كذلك، عليك العودة
إلى استخدام إضاءة مخصّصة أو إضاءة مخصّصة ColorScheme
.
توفّر ColorScheme
دوال الإنشاء لإنشاء نظام ألوان ديناميكي فاتح أو داكن:
// Dynamic color is available on Android 12+ val dynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S val colors = when { dynamicColor && darkTheme -> dynamicDarkColorScheme(LocalContext.current) dynamicColor && !darkTheme -> dynamicLightColorScheme(LocalContext.current) darkTheme -> DarkColorScheme else -> LightColorScheme }
استخدام الألوان
يمكنك الوصول إلى ألوان نسق المواد في تطبيقك من خلال
MaterialTheme.colorScheme
:
Text( text = "Hello theming", color = MaterialTheme.colorScheme.primary )
يمكن استخدام كل دور لوني في مجموعة متنوعة من الأماكن اعتمادًا على حالة المكون وبروزه وتوكيده.
- اللون الأساسي هو اللون الأساسي، ويستخدم للمكونات الرئيسية مثل الأزرار البارزة والحالات النشطة ودرجة لون الأسطح المرتفعة.
- يتم استخدام لون المفتاح الثانوي للمكونات الأقل بروزًا في واجهة المستخدم، مثل شرائح التصفية، ويزيد من فرصة تعبير اللون.
- يُستخدم اللون الرئيسي الثالث لاشتقاق أدوار اللكنات المتباينة التي يمكن استخدامها لموازنة الألوان الأساسية والثانوية أو جذب انتباه محسّن لعنصر.
يستخدم تصميم تطبيق Reply العينة لون الحاوية الأساسية أعلى الحاوية الأساسية للتأكيد على العنصر المحدد.
Card( colors = CardDefaults.cardColors( containerColor = if (isSelected) MaterialTheme.colorScheme.primaryContainer else MaterialTheme.colorScheme.surfaceVariant ) ) { Text( text = "Dinner club", style = MaterialTheme.typography.bodyLarge, color = if (isSelected) MaterialTheme.colorScheme.onPrimaryContainer else MaterialTheme.colorScheme.onSurface, ) }
يمكنك هنا أن ترى في درج "التنقل خلال الرد" كيف يتم استخدام ألوان الحاوية الثانوية والثالثة في التباين لإنشاء التوكيد والتمييز.
أسلوب الخط
يحدد التصميم المتعدد الأبعاد 3 مقياس من النوع، بما في ذلك أنماط النص التي تم تعديلها من خلال Material Design 2. تم تبسيط التسمية والتجميع لـ: العرض، والعنوان، والعنوان، والنص الأساسي، والتسمية، بأحجام كبيرة ومتوسطة وصغيرة لكل منها.
M3 | الحجم التلقائي للخط/ارتفاع الخط |
displayLarge |
Roboto 57/64 |
displayMedium |
Roboto 45/52 |
displaySmall |
Roboto 36/44 |
headlineLarge |
Roboto 32/40 |
headlineMedium |
Roboto 28/36 |
headlineSmall |
Roboto 24/32 |
titleLarge |
New- Roboto Medium 22/28 |
titleMedium |
Roboto Medium 16/24 |
titleSmall |
Roboto Medium 14/20 |
bodyLarge |
Roboto 16/24 |
bodyMedium |
Roboto 14/20 |
bodySmall |
Roboto 12/16 |
labelLarge |
Roboto Medium 14/20 |
labelMedium |
Roboto Medium 12/16 |
labelSmall |
New Roboto Medium, 11/16 |
تعريف أسلوب الخط
توفِّر ميزة Compose لفئة M3 Typography
، بالإضافة إلى الفئات TextStyle
والمتعلّقة بالخطوط، نماذج لمقياس النوع Material 3. توفر الدالة الإنشائية Typography
قيمًا تلقائية لكل نمط حتى تتمكّن من حذف أي معلمات لا تريد تخصيصها:
val replyTypography = Typography( titleLarge = TextStyle( fontWeight = FontWeight.SemiBold, fontSize = 22.sp, lineHeight = 28.sp, letterSpacing = 0.sp ), titleMedium = TextStyle( fontWeight = FontWeight.SemiBold, fontSize = 16.sp, lineHeight = 24.sp, letterSpacing = 0.15.sp ), // .. ) // ..
من المحتمل ألا يحتاج منتجك إلى جميع الأنماط الافتراضية الخمسة عشر من مقياس النوع "Material Design" (التصميم المتعدد الأبعاد). في هذا المثال، يتم اختيار خمسة أحجام لمجموعة مصغَّرة بينما يتم حذف البقية.
يمكنك تخصيص أسلوب الخط من خلال تغيير القيم التلقائية للسمة TextStyle
والسمات المتعلقة بالخط مثل fontFamily
وletterSpacing
.
bodyLarge = TextStyle( fontWeight = FontWeight.Normal, fontFamily = FontFamily.SansSerif, fontStyle = FontStyle.Italic, fontSize = 16.sp, lineHeight = 24.sp, letterSpacing = 0.15.sp, baselineShift = BaselineShift.Subscript ),
بعد تحديد Typography
، عليك تمريره إلى M3 MaterialTheme
:
MaterialTheme( typography = replyTypography, ) { // M3 app Content }
استخدام أنماط النص
يمكنك استرداد أسلوب الخط المقدَّم في M3 MaterialTheme
القابل للإنشاء من خلال استخدام MaterialTheme.typography
على النحو التالي:
Text( text = "Hello M3 theming", style = MaterialTheme.typography.titleLarge ) Text( text = "you are learning typography", style = MaterialTheme.typography.bodyMedium )
يمكنك قراءة المزيد عن إرشادات المواد حول تطبيق أسلوب الخط.
الأشكال
يمكن عرض الأسطح المادية بأشكال مختلفة. تشكل الانتباه المباشر، وتحديد المكونات، وتوصيل الحالة، والتعبير عن العلامة التجارية.
يحدد مقياس الشكل نمط زوايا الحاوية، مما يوفر نطاقًا من التقريب من المربع إلى الدائري بالكامل.
تحديد الأشكال
توفِّر ميزة Compose لفئة M3 Shapes
مَعلمات موسّعة لدعم
أشكال M3 الجديدة. يشبه مقياس الشكل M3 مقياس الكتابة، ما يتيح مجموعة معبرة من الأشكال في واجهة المستخدم.
توجد أحجام مختلفة للأشكال:
- صغير جدًا
- صغير
- متوسطة
- كبير
- كبيرة جدًا
بشكل افتراضي، لكل شكل قيمة افتراضية، ولكن يمكنك تجاوز ما يلي:
val replyShapes = Shapes( extraSmall = RoundedCornerShape(4.dp), small = RoundedCornerShape(8.dp), medium = RoundedCornerShape(12.dp), large = RoundedCornerShape(16.dp), extraLarge = RoundedCornerShape(24.dp) )
بعد تحديد Shapes
، يمكنك تمريره إلى M3 MaterialTheme
:
MaterialTheme( shapes = replyShapes, ) { // M3 app Content }
استخدام الأشكال
يمكنك تخصيص مقياس الشكل لجميع المكوّنات في MaterialTheme
أو يمكنك إجراء ذلك على أساس كل مكوّن على حدة.
تطبيق الأشكال المتوسطة والكبيرة باستخدام القيم التلقائية:
Card(shape = MaterialTheme.shapes.medium) { /* card content */ } FloatingActionButton( shape = MaterialTheme.shapes.large, onClick = { } ) { /* fab content */ }
هناك شكلان آخران — RectangleShape
وCircleShape
— وهما جزءان من Compose. يكون شكل المستطيل بدون نصف قطر حدي، بينما يُظهر شكل الدائرة حواف محاطة بالكامل:
Card(shape = RectangleShape) { /* card content */ } Card(shape = CircleShape) { /* card content */ }
توضح الأمثلة أدناه بعض المكونات التي يتم تطبيق قيم الشكل الافتراضية عليها عليها:
يمكنك قراءة المزيد عن إرشادات المواد حول تطبيق الشكل.
التوكيد
يتم توفير التوكيد في M3 باستخدام مجموعات متنوعة من الألوان ومجموعات الألوان الخاصة بها. في الإصدار M3، هناك طريقتان لإضافة التوكيد إلى واجهة المستخدم الخاصة بك:
- باستخدام السطح ومتغير السطح والخلفية إلى جانب الألوان على السطح والمتغيرات على السطح من نظام ألوان M3 الموسع. على سبيل المثال، يمكن استخدام السطح مع المتغير السطحي والتباين السطحي ويمكن استخدامه مع السطح لتوفير مستويات مختلفة من التوكيد.
- استخدام سُمك خط مختلفة للنص أعلاه، لقد رأيت أنه يمكنك توفير ترجيحات مخصصة لمقياس الكتابة لدينا لتوفير توكيد مختلف.
bodyLarge = TextStyle( fontWeight = FontWeight.Bold ), bodyMedium = TextStyle( fontWeight = FontWeight.Normal )
الارتفاع
تمثل المادة 3 المسقط الرأسي باستخدام تراكبات ألوان الدرجات اللونية بشكل أساسي. إنها طريقة جديدة للتمييز بين الحاويات والأسطح عن بعضها البعض - يؤدي زيادة ارتفاع درجات اللون إلى استخدام نغمة أكثر بروزًا - بالإضافة إلى الظلال.
تم أيضًا تغيير تراكبات الارتفاع في المظاهر الداكنة إلى تراكبات ألوان التدرج في المادة 3. يأتي لون التراكب من فتحة اللون الأساسية.
يشمل سطح M3، الجزء الخلفي الذي يمكن إنشاؤه خلف معظم مكونات M3، دعمًا لارتفاع الدرجات اللونية والظل:
Surface( modifier = Modifier, tonalElevation = /*... shadowElevation = /*... ) { Column(content = content) }
مكونات التصميم المتعدد الأبعاد
يأتي التصميم المتعدد الأبعاد مع مجموعة كبيرة من مكونات التصميم المتعدد الأبعاد (مثل الأزرار والشرائح والبطاقات وشريط التنقل) التي تتبع بالفعل "المظهر المتعدد الأبعاد" وتساعدك في إنشاء تطبيقات "تصميم متعدد الأبعاد" رائعة. يمكنك البدء في استخدام مكونات ذات خصائص افتراضية مباشرةً خارج الصندوق.
Button(onClick = { /*..*/ }) { Text(text = "My Button") }
يوفر M3 العديد من الإصدارات من نفس المكونات لاستخدامها في أدوار مختلفة حسب التوكيد والاهتمام.
- زر إجراء عائم موسَّع للحصول على الإجراء الأكثر توكيدًا:
ExtendedFloatingActionButton( onClick = { /*..*/ }, modifier = Modifier ) { Icon( imageVector = Icons.Default.Edit, contentDescription = stringResource(id = R.string.edit), ) Text( text = stringResource(id = R.string.add_entry), ) }
- زر معبأ لإجراء عالي التوكيد:
Button(onClick = { /*..*/ }) { Text(text = stringResource(id = R.string.view_entry)) }
- زر نصي لإجراء منخفض التوكيد:
TextButton(onClick = { /*..*/ }) { Text(text = stringResource(id = R.string.replated_articles)) }
يمكنك قراءة المزيد عن الأزرار والمكونات الأخرى متعددة الأبعاد. توفر المادة 3 مجموعة متنوعة من مجموعات المكونات مثل الأزرار وأشرطة التطبيقات ومكونات التنقل المصممة خصيصًا لحالات الاستخدام وأحجام الشاشات المختلفة.
مكونات التنقل
توفّر Material أيضًا العديد من مكونات التنقّل التي تساعدك في تنفيذ عملية التنقّل، اعتمادًا على أحجام الشاشة وحالاتها المختلفة.
يتم استخدام NavigationBar
للأجهزة الصغيرة عندما تريد استهداف 5 وجهات أو أقل:
NavigationBar(modifier = Modifier.fillMaxWidth()) { Destinations.entries.forEach { replyDestination -> NavigationBarItem( selected = selectedDestination == replyDestination, onClick = { }, icon = { } ) } }
يُستخدم NavigationRail
للأجهزة اللوحية الصغيرة والمتوسطة الحجم أو الهواتف في
الوضع الأفقي. ويوفر بيئة مناسبة للمستخدمين ويحسِّن تجربة المستخدم على هذه الأجهزة.
NavigationRail( modifier = Modifier.fillMaxHeight(), ) { Destinations.entries.forEach { replyDestination -> NavigationRailItem( selected = selectedDestination == replyDestination, onClick = { }, icon = { } ) } }
يمكنك الرد باستخدام كليهما في المظهر التلقائي لتوفير تجربة مستخدم غامرة لجميع أحجام الأجهزة.
يُستخدم NavigationDrawer
للأجهزة اللوحية المتوسطة إلى الكبيرة التي يكون لديك
مساحة كافية لعرض التفاصيل فيها. يمكنك استخدام كل من PermanentNavigationDrawer
أو
ModalNavigationDrawer
بالإضافة إلى NavigationRail
.
PermanentNavigationDrawer(modifier = Modifier.fillMaxHeight(), drawerContent = { Destinations.entries.forEach { replyDestination -> NavigationRailItem( selected = selectedDestination == replyDestination, onClick = { }, icon = { }, label = { } ) } }) { }
تعمل خيارات التنقل على تحسين تجربة المستخدم وتسهيل الاستخدام وإمكانية الوصول. يمكنك معرفة المزيد من المعلومات حول مكوّنات التنقّل Material من خلال الدرس التطبيقي حول الترميز التكيّفي Compose.
تخصيص موضوع المكوِّن
يشجّع التصميم M3 على التخصيص والمرونة. يتم تطبيق ألوان افتراضية على جميع المكونات ولكنها تعرض واجهات برمجة تطبيقات مرنة لتخصيص ألوانها إذا لزم الأمر.
توفر معظم المكونات، مثل البطاقات والأزرار، كائنًا تلقائيًا يعرض واجهات لونية والمسقط رأسي يمكن تعديلها لتخصيص المكون:
val customCardColors = CardDefaults.cardColors( contentColor = MaterialTheme.colorScheme.primary, containerColor = MaterialTheme.colorScheme.primaryContainer, disabledContentColor = MaterialTheme.colorScheme.surface, disabledContainerColor = MaterialTheme.colorScheme.onSurface, ) val customCardElevation = CardDefaults.cardElevation( defaultElevation = 8.dp, pressedElevation = 2.dp, focusedElevation = 4.dp ) Card( colors = customCardColors, elevation = customCardElevation ) { // m3 card content }
يمكنك قراءة المزيد عن تخصيص المادة 3.
واجهة مستخدِم النظام
تأتي بعض جوانب Material You من النمط المرئي الجديد وواجهة مستخدم النظام على Android 12 والإصدارات الأحدث. هناك مجالان رئيسيان حيث توجد تغييرات، وهما التموّج والتمرير الزائد. وليس عليك اتّخاذ أي إجراء إضافي لتنفيذ هذه التغييرات.
تمويج
يستخدم التموّج الآن بريقًا خفيفًا لإضاءة الأسطح عند الضغط عليها. تستخدم أداة Compose Material Ripple منصة RippleDrawable بشكل أساسي على أجهزة Android، لذلك تتوفّر ميزة التموّج اللامع في نظام التشغيل Android 12 والإصدارات الأحدث لجميع مكوّنات Material.
تجاوز حد التمرير
يستخدم الآن التمرير الزائد تأثير تمديد على حافة حاويات التمرير.
يكون الانتقال للأعلى أو للأسفل تلقائيًا مفعّلاً في العناصر القابلة للإنشاء في حاوية التمرير، على سبيل المثال، LazyColumn
وLazyRow
وLazyVerticalGrid
في الإصدار 1.1.0 من
Compose Foundation والإصدارات الأحدث، بغض النظر عن مستوى واجهة برمجة التطبيقات.
تسهيل الاستخدام
تم تصميم معايير سهولة الوصول المضمنة في مكونات Material لتوفير أساس لتصميم المنتج الشامل. يمكن أن يؤدي فهم إمكانية الوصول إلى منتجك إلى تحسين سهولة الاستخدام لجميع المستخدمين، بما في ذلك أولئك الذين يعانون من ضعف البصر أو العمى أو الإعاقات السمعية أو الإعاقات الإدراكية أو الإعاقات الحركة أو الإعاقات الظرفية (مثل كسر الذراع).
تسهيل الاستخدام على الألوان
تم تصميم الألوان الديناميكية لتلبية معايير سهولة الوصول لتباين الألوان. يعد نظام لوحات الألوان أمرًا بالغ الأهمية لجعل أي نظام ألوان قابلاً للوصول بشكل افتراضي.
يوفر نظام ألوان Material قيمًا قياسية للدرجات اللونية وقياسات يمكن استخدامها لتلبية نسب التباين التي يمكن الوصول إليها.
تستخدم جميع مكوّنات Material والموضوعات الديناميكية أدوار الألوان المذكورة أعلاه من مجموعة من لوحات الألوان التي تم اختيارها لتلبية متطلبات تسهيل الاستخدام. ومع ذلك، إذا كنت تقوم بتخصيص المكونات، فتأكد من استخدام أدوار الألوان المناسبة وتجنب عدم التطابق.
يمكنك استخدام القيم الأساسية في أعلى الحاوية الأساسية، وفي الحاوية الأساسية أعلى الحاوية الأساسية، ونفس الشيء مع الألوان المحايدة والتمييز الأخرى لتوفير تباين يمكن للمستخدم الوصول إليه.
يؤدي استخدام حاوية ثلاثية أعلى الوحدة الأساسية إلى منح المستخدم زر تباين ضعيفًا:
// ✅ Button with sufficient contrast ratio Button( onClick = { }, colors = ButtonDefaults.buttonColors( containerColor = MaterialTheme.colorScheme.primary, contentColor = MaterialTheme.colorScheme.onPrimary ) ) { } // ❌ Button with poor contrast ratio Button( onClick = { }, colors = ButtonDefaults.buttonColors( containerColor = MaterialTheme.colorScheme.tertiaryContainer, contentColor = MaterialTheme.colorScheme.primaryContainer ) ) { }
سهولة الوصول إلى أسلوب الخط
يُحدِّث مقياس النوع M3 منحدر النوع الثابت وقيمه لتقديم إطار عمل مبسط وديناميكي لفئات الحجم التي تتدرج على جميع الأجهزة.
على سبيل المثال، في M3، يمكن تعيين قيم مختلفة للشاشة الصغيرة بناءً على سياق الجهاز، مثل الهاتف أو الجهاز اللوحي.
شاشات كبيرة
يوفّر Material إرشادات حول التصاميم التكيُّفية والأجهزة القابلة للطي لتسهيل الوصول إلى تطبيقاتك وتحسين الوضع المريح لحاملي الأجهزة الكبيرة.
توفّر ميزة Material أنواعًا مختلفة من التنقُّل لمساعدتك في توفير تجربة مستخدم أفضل للأجهزة الكبيرة.
يمكنك معرفة المزيد من المعلومات حول إرشادات الجودة لتطبيقات الشاشات الكبيرة على Android والاطّلاع على نموذج الردّ للحصول على تصميم تكيُّفي يسهل الوصول إليه.
مزيد من المعلومات
لمعرفة المزيد من المعلومات حول "تخصيص التصميم المتعدد الأبعاد" في Compose، اطّلِع على المراجع التالية:
نماذج التطبيقات
مستندات Google
مرجع واجهة برمجة التطبيقات ورمز المصدر
الفيديوهات الطويلة
أفلام مُقترَحة لك
- ملاحظة: يظهر نص الرابط عند إيقاف JavaScript
- نقل البيانات من المادة 2 إلى المادة 3 في Compose
- التصميم المتعدد الأبعاد 2 في Compose
- أنظمة التصميم المخصّصة في Compose