Material Design 3 في Compose

يوفّر Jetpack Compose تنفيذًا للتصميم المتعدّد الأبعاد 3، وهو الإصدار التالي من التصميم المتعدّد الأبعاد. يتضمّن Material 3 مظاهر ومواد أساسية وميزات تخصيص Material You المعدّلة، مثل الألوان الديناميكية، وهو مصمّم لينسجم مع التصميم المرئي الجديد وواجهة مستخدم النظام في Android 12 والإصدارات الأحدث.

في ما يلي، نوضّح كيفية تنفيذ Material Design 3 باستخدام نموذج تطبيق 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
@Composable
fun AppComposable() {
    // M3 composables
}
Material3Snippets.kt

تخصيص التصميم المتعدد الأبعاد

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

تطبِّق أداة Jetpack Compose هذه المفاهيم باستخدام العنصر القابل للتجميع M3 MaterialTheme:

MaterialTheme(
    colorScheme = /* ...
    typography = /* ...
    shapes = /* ...
) {
    // M3 app content
}
Material3Snippets.kt

لتطبيق مظهر على محتوى تطبيقك، حدِّد مخطط الألوان وأسلوب الخط والأشكال الخاصة بتطبيقك.

النمط اللوني

يستند نظام الألوان إلى مجموعة من خمسة ألوان رئيسية. يرتبط كلّ من هذه الألوان بلوحة ألوان تتضمّن 13 لونًا، وتستخدمها مكونات Material 3. على سبيل المثال، في ما يلي مخطط الألوان للمظهر الفاتح لميزة الردّ:

اطّلِع على مزيد من المعلومات عن مخطط الألوان وأدوار الألوان.

إنشاء أنظمة ألوان

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

• يحتوي 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)
// ..
// ..
Material3Snippets.kt

• يحتوي 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
    )
}
Material3Snippets.kt

لاستخدام المظهرَين الفاتح والداكن، استخدِم isSystemInDarkTheme(). استنادًا إلى إعدادات النظام، حدِّد الألوان التي تريد استخدامها: فاتحة أو داكنة.

الألوان الديناميكية

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

تتوفّر ميزة "الألوان الديناميكية" على نظام التشغيل 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
}
Material3Snippets.kt

استخدام الألوان

يمكنك الوصول إلى ألوان مظهر Material في تطبيقك من خلال MaterialTheme.colorScheme:

Text(
    text = "Hello theming",
    color = MaterialTheme.colorScheme.primary
)
Material3Snippets.kt

يمكن استخدام كل دور للّون في مجموعة متنوعة من المواضع حسب حالة المكوّن ومستوى بروزه وتركيزه.

• اللون الأساسي هو اللون الأساسي الذي يُستخدَم للمكونات الرئيسية، مثل buttons البارزة والحالات النشطة ولون الأسطح المرتفعة.
• يُستخدَم اللون الثانوي للمفتاح مع العناصر الأقل بروزًا في واجهة المستخدم، مثل شرائح الفلاتر، ويزيد من فرص التعبير عن الألوان.
• يُستخدَم اللون الرئيسي الثالث لاستخراج أدوار ألوان التمييز المتباينة التي يمكن استخدامها لموازنة الألوان الأساسية والثانوية أو جذب انتباهٍ مُحسَّن إلى عنصر معيّن.

يستخدم تصميم تطبيق Reply النموذجي لون on-primary-container فوق primary-container للتأكيد على العنصر المحدّد.

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,
    )
}
Material3Snippets.kt

يمكنك هنا الاطّلاع في "درج التنقّل في الردود" على كيفية استخدام ألوان الحاوية الثانوية والثالثية بالتباين لإنشاء تركيز وتمييز.

أسلوب الخط

يحدِّد Material Design 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
    ),
    // ..
)
// ..
Material3Snippets.kt

من المرجّح ألا يحتاج منتجك إلى جميع الأنماط التلقائية الـ 15 من مقياس نوع تصميم المواد. في هذا المثال، تم اختيار خمسة مقاسات لمجموعة مُعدَّلة مع حذف الباقي.

يمكنك تخصيص الطباعة من خلال تغيير القيم التلقائية 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
),
Material3Snippets.kt

بعد تحديد Typography، نقْله إلى MaterialTheme M3:

MaterialTheme(
    typography = replyTypography,
) {
    // M3 app Content
}
Material3Snippets.kt

استخدام أنماط النصوص

يمكنك استرداد أسلوب الخط المقدَّم لعنصر MaterialTheme القابل للتجميع في M3 باستخدامMaterialTheme.typography:

Text(
    text = "Hello M3 theming",
    style = MaterialTheme.typography.titleLarge
)
Text(
    text = "you are learning typography",
    style = MaterialTheme.typography.bodyMedium
)
Material3Snippets.kt

يمكنك الاطّلاع على مزيد من المعلومات عن إرشادات التصميم المتعدد الأبعاد حول تطبيق الخطوط.

الأشكال

يمكن عرض مساحات العرض في أشكال مختلفة. تجذب الأشكال الانتباه، وتحدد المكوّنات، وتوضّح الحالة، وتعبّر عن العلامة التجارية.

يحدِّد مقياس الشكل نمط زوايا الحاوية، ويقدّم مجموعة من الأشكال المستديرة من المربّع إلى الدائري بالكامل.

تحديد الأشكال

توفّر أداة الإنشاء فئة 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)
)
Material3Snippets.kt

بعد تحديد Shapes، يمكنك تمريرها إلى MaterialTheme M3:

MaterialTheme(
    shapes = replyShapes,
) {
    // M3 app Content
}
Material3Snippets.kt

استخدام الأشكال

يمكنك تخصيص مقياس الشكل لجميع المكوّنات في MaterialTheme أو يمكنك إجراء ذلك لكل مكوّن على حدة.

طبِّق الشكلَين المتوسط والكبير مع القيم التلقائية:

Card(shape = MaterialTheme.shapes.medium) { /* card content */ }
FloatingActionButton(
    shape = MaterialTheme.shapes.large,
    onClick = {
    }
) {
    /* fab content */
}
Material3Snippets.kt

هناك شكلان آخران، RectangleShape وCircleShape، وهما جزء من ميزة "الإنشاء". لا يحتوي شكل المستطيل على نصف قطر للحدود، ويعرض شكل الدائرة حوافًا مكتملة دائرية:

Card(shape = RectangleShape) { /* card content */ }
Card(shape = CircleShape) { /* card content */ }
Material3Snippets.kt

توضِّح الأمثلة أدناه بعض المكوّنات التي تم تطبيق قيم الشكل التلقائية عليها:

يمكنك الاطّلاع على مزيد من المعلومات عن إرشادات Material Design في ما يتعلّق بتطبيق الأشكال.

التأكيد

يتم التأكيد في M3 باستخدام اختلافات في اللون ومجموعاته المتوافقة. في M3، هناك طريقتان لإضافة تركيز إلى واجهة المستخدم:

• استخدام ألوان السطح ولون السطح المتغير والخلفية إلى جانب ألوان السطح المتغير والألوان المتغيرة للسطح من نظام ألوان M3 الموسّع على سبيل المثال، يمكن استخدام surface مع on-surface-variant ويمكن استخدام surface-variant مع on-surface لتوفير مستويات مختلفة من التركيز.

• استخدام كثافة خط مختلفة للنص لقد اطّلعت أعلاه على أنّه يمكنك تحديد قيم تقديرية مخصّصة لمقياس الأنواع من أجل توفير درجة تركيز مختلفة.

bodyLarge = TextStyle(
    fontWeight = FontWeight.Bold
),
bodyMedium = TextStyle(
    fontWeight = FontWeight.Normal
)
Material3Snippets.kt

الارتفاع

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

تم أيضًا تغيير تراكب الارتفاع في المظاهر الداكنة إلى تراكب ألوان نغمية في Material 3. يأتي لون التراكب من خانة اللون الأساسي.

سطح M3: وهو العنصر الأساسي الذي يمكن دمجه في معظم مكونات M3، ويشمل ميزتَي التحسين اللوني ورفع مستوى الظل:

Surface(
    modifier = Modifier,
    tonalElevation = /*...
    shadowElevation = /*...
) {
    Column(content = content)
}
Material3Snippets.kt

مكوّنات التصميم المادّي

يوفّر أسلوب Material Design مجموعة غنية من مكونات Material Design (مثل الأزرار والرقائق والبطاقات وشريط التنقّل) التي تتّبع أسلوب Material Theme وتساعدك في إنشاء تطبيقات جميلة باستخدام أسلوب Material Design. يمكنك بدء استخدام المكوّنات التي تتضمّن سمات تلقائية مباشرةً.

Button(onClick = { /*..*/ }) {
    Text(text = "My Button")
}
Material3Snippets.kt

يوفّر M3 العديد من النُسخ من المكوّنات نفسها لاستخدامها في أدوار مختلفة حسب التركيز والاهتمام.

• زر إجراء رئيسي ممتد للإجراء الأكثر أهمية:

ExtendedFloatingActionButton(
    onClick = { /*..*/ },
    modifier = Modifier
) {
    Icon(
        imageVector = Icons.Default.Edit,
        contentDescription = stringResource(id = R.string.edit),
    )
    Text(
        text = stringResource(id = R.string.add_entry),
    )
}
Material3Snippets.kt

• زرّ ممتلئ للإجراء الذي يُركّز عليه:

Button(onClick = { /*..*/ }) {
    Text(text = stringResource(id = R.string.view_entry))
}
Material3Snippets.kt

• زر نصي للإجراء الذي يُمنَح أهمية منخفضة:

TextButton(onClick = { /*..*/ }) {
    Text(text = stringResource(id = R.string.replated_articles))
}
Material3Snippets.kt

يمكنك الاطّلاع على مزيد من المعلومات حول الأزرار والمكوّنات الأخرى في Material. توفّر واجهة Material 3 مجموعة كبيرة من مجموعات المكوّنات، مثل الأزرار وأشرطة التطبيقات ومكونات التنقّل المصمّمة خصيصًا لمختلف حالات الاستخدام وأحجام الشاشات.

مكونات التنقّل

توفّر Material أيضًا العديد من مكوّنات التنقّل التي تساعدك في تنفيذ التنقّل، استنادًا إلى أحجام الشاشات وحالاتها المختلفة.

يتم استخدام NavigationBar للأجهزة المدمجة عندما تريد استهداف 5 وجهات أو أقل:

NavigationBar(modifier = Modifier.fillMaxWidth()) {
    Destinations.entries.forEach { replyDestination ->
        NavigationBarItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { }
        )
    }
}
Material3Snippets.kt

يُستخدَم NavigationRail للأجهزة اللوحية أو الهواتف الصغيرة أو المتوسطة الحجم في الوضع الأفقي. ويوفّر هذا الإجراء راحة للمستخدمين ويحسن تجربتهم على هذه الأجهزة.

NavigationRail(
    modifier = Modifier.fillMaxHeight(),
) {
    Destinations.entries.forEach { replyDestination ->
        NavigationRailItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { }
        )
    }
}
Material3Snippets.kt

يمكنك الردّ باستخدام كليهما في المظهر التلقائي لتوفير تجربة شاملة للمستخدمين على جميع أحجام الأجهزة.

يتم استخدام NavigationDrawer على الأجهزة اللوحية متوسطة الحجم إلى الكبيرة التي تتوفّر فيها مساحة كافية لعرض التفاصيل. يمكنك استخدام PermanentNavigationDrawer أو ModalNavigationDrawer مع NavigationRail.

PermanentNavigationDrawer(modifier = Modifier.fillMaxHeight(), drawerContent = {
    Destinations.entries.forEach { replyDestination ->
        NavigationRailItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { },
            label = { }
        )
    }
}) {
}
Material3Snippets.kt

تعمل خيارات التنقّل على تحسين تجربة المستخدم وسهولة الاستخدام وإمكانية الوصول. يمكنك الاطّلاع على مزيد من المعلومات حول مكوّنات التنقّل في لغة Material Design في إنشاء رمز برمجي لتطبيق متوافق مع مختلف الأجهزة.

تخصيص مظهر المكوّن

وتشجع منصة 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
}
Material3Snippets.kt

يمكنك الاطّلاع على مزيد من المعلومات عن تخصيص Material 3.

واجهة مستخدِم النظام

تستند بعض جوانب Material You إلى النمط المرئي الجديد وواجهة مستخدم النظام على Android 12 والإصدارات الأحدث. هناك مجالان رئيسيان يحدث فيهما تغييران، وهما التموج والانتقال السريع للأسفل أو للأعلى. ما مِن عمل إضافي مطلوب لتنفيذ هذه التغييرات.

تمويج

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

تجاوز حد التمرير

يستخدم الآن التمرير السريع تأثير التمدد عند حافة الحاويات التي يمكن التمرير فيها. تكون ميزة التمديد إلى ما بعد حدود الشاشة مفعّلة تلقائيًا في العناصر القابلة للتجميع التي تتضمّن حاوية لفائف الصفحات، مثل LazyColumn وLazyRow وLazyVerticalGrid، في الإصدار 1.1.0 من Compose Foundation والإصدارات الأحدث، بغض النظر عن مستوى واجهة برمجة التطبيقات.

تسهيل الاستخدام

تم تصميم معايير تسهيل الاستخدام المضمّنة في مكونات Material لتوفير أسس لتصميم المنتجات الشاملة. يمكن أن يؤدي فهم مدى سهولة استخدام منتجك إلى تحسين سهولة الاستخدام لجميع المستخدمين، بما في ذلك أولئك الذين يعانون من ضعف في الرؤية أو العمى أو ضعف السمع أو العجز الإدراكي أو العجز الحركي أو العجز الظرفي (مثل كسر الذراع).

تسهيل استخدام الألوان

تم تصميم الألوان الديناميكية لاستيفاء معايير تسهيل الاستخدام لتباين الألوان. إنّ نظام لوحات الألوان مهمّ لجعل أيّ مخطط ألوان متاحًا تلقائيًا.

يقدّم نظام الألوان في Material قيمًا وقياسات نغمة عادية يمكن استخدامها لاستيفاء نسب التباين المناسبة للاستخدام من قِبل الأشخاص الذين يعانون من عجز.

تستخدم جميع مكونات Material والتصاميم الديناميكية أدوار الألوان المذكورة أعلاه من مجموعة من لوحات الألوان التي تم اختيارها لاستيفاء متطلبات تسهيل الاستخدام. ومع ذلك، إذا كنت بصدد تخصيص المكوّنات، احرص على استخدام أدوار الألوان المناسبة وتجنُّب عدم المطابقة.

استخدِم on-primary فوق primary، وon-primary-container فوق primary-container، والشيء نفسه مع الألوان المميّزة والمحايدة الأخرى لتوفير تباين سهل الاستخدام للمستخدم.

يؤدي استخدام حاوية ثالثة فوق الحاوية الأساسية إلى منح المستخدم زرًا بدرجة تباين منخفضة:

// ✅ 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
    )
) {
}
Material3Snippets.kt

سهولة استخدام أسلوب الخط

يعدّل مقياس نوع M3 منحنى الأنواع الثابتة والقيم لتقديم إطار عمل مبسط ولكنه ديناميكي لفئات المقاسات التي يتم توسيع نطاقها على جميع الأجهزة.

على سبيل المثال، في M3، يمكن ضبط قيم مختلفة لـ Display Small استنادًا إلى سياق الجهاز، مثل هاتف أو جهاز لوحي.

الشاشات الكبيرة

تقدّم Material إرشادات حول التنسيقات المتكيفة والأجهزة القابلة للطي لجعل تطبيقاتك سهلة الاستخدام وتحسين بيئة العمل للمستخدمين الذين يحملون أجهزة كبيرة.

توفّر Material أنواعًا مختلفة من التنقّل لمساعدتك في تقديم تجربة أفضل للمستخدمين على الأجهزة الكبيرة.

يمكنك الاطّلاع على مزيد من المعلومات حول إرشادات جودة التطبيقات المتوافقة مع الشاشات الكبيرة في Android، ونموذج الردّ الخاص بنا للتصميم التكيُّفي والمتوافق مع الأجهزة الجوّالة.

مزيد من المعلومات

لمزيد من المعلومات حول مظاهر Material في تطبيق "الإنشاء"، اطّلِع على موارد التالية:

أمثلة على التطبيقات

• نموذج تطبيق Reply M3

مستندات Google

• نقل البيانات من Material 2 إلى Material 3 في ميزة "الإنشاء"
• إرشادات تصميم المواد

مرجع واجهة برمجة التطبيقات ورمز المصدر

• مرجع Compose Material 3 API
• إنشاء عيّنات Material 3 في رمز المصدر

الفيديوهات

• Material You في Jetpack Compose

أفلام مُقترَحة لك

• ملاحظة: يتم عرض نص الرابط عندما تكون لغة JavaScript غير مفعّلة.
• نقل البيانات من "المادة 2" إلى "المادة 3" في ميزة "الإنشاء"
• تصميم Material Design 2 في ميزة "الإنشاء"
• أنظمة التصميم المخصّصة في Compose