Material Design 3 في Compose

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

تحديد نسق المواد

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

تنفِّذ Jetpack Compose هذه المفاهيم باستخدام MaterialTheme M3 القابل للإنشاء:

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

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

النمط اللوني

أساس نظام الألوان هو مجموعة من خمسة ألوان رئيسية. يتعلق كل لون من هذه الألوان بلوحة ألوان من 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)
// ..
// ..
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، والذي تستمد فيه الخوارزمية ألوانًا مخصّصة من خلفية المستخدم ليتم تطبيقها على تطبيقاته وواجهة مستخدم النظام. تُستخدم لوحة الألوان هذه كنقطة بداية لإنشاء أنظمة ألوان فاتحة وداكنة.

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

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

يمكنك الوصول إلى ألوان نسق المواد في تطبيقك من خلال MaterialTheme.colorScheme:

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

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

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

يستخدم تصميم تطبيق 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,
    )
}
Material3Snippets.kt

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

أسلوب الخط

يحدد التصميم المتعدد الأبعاد 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

من المحتمل ألا يحتاج منتجك إلى جميع الأنماط الافتراضية الخمسة عشر من مقياس النوع "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
),
Material3Snippets.kt

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

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

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

يمكنك استرداد أسلوب الخط المقدَّم في M3 MaterialTheme القابل للإنشاء من خلال استخدام MaterialTheme.typography على النحو التالي:

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

يمكنك قراءة المزيد عن إرشادات المواد حول تطبيق أسلوب الخط.

الأشكال

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

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

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

توفِّر ميزة 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)
)
Material3Snippets.kt

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

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 — وهما جزءان من Compose. يكون شكل المستطيل بدون نصف قطر حدي، بينما يُظهر شكل الدائرة حواف محاطة بالكامل:

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

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

يمكنك قراءة المزيد عن إرشادات المواد حول تطبيق الشكل.

التوكيد

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

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

• استخدام سُمك خط مختلفة للنص أعلاه، لقد رأيت أنه يمكنك توفير ترجيحات مخصصة لمقياس الكتابة لدينا لتوفير توكيد مختلف.

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

الارتفاع

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

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

يشمل سطح M3، الجزء الخلفي الذي يمكن إنشاؤه خلف معظم مكونات M3، دعمًا لارتفاع الدرجات اللونية والظل:

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

مكونات التصميم المتعدد الأبعاد

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

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

يمكنك قراءة المزيد عن الأزرار والمكونات الأخرى متعددة الأبعاد. توفر المادة 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 من خلال الدرس التطبيقي حول الترميز التكيّفي 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
}
Material3Snippets.kt

يمكنك قراءة المزيد عن تخصيص المادة 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
    )
) {
}
Material3Snippets.kt

سهولة الوصول إلى أسلوب الخط

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

على سبيل المثال، في M3، يمكن تعيين قيم مختلفة للشاشة الصغيرة بناءً على سياق الجهاز، مثل الهاتف أو الجهاز اللوحي.

شاشات كبيرة

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

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

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

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

لمعرفة المزيد من المعلومات حول "تخصيص التصميم المتعدد الأبعاد" في Compose، اطّلِع على المراجع التالية:

نماذج التطبيقات

• الرد على نموذج تطبيق M3

مستندات Google

• نقل البيانات من المادة 2 إلى المادة 3 في Compose
• إرشادات التصميم المتعدد الأبعاد

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

• إنشاء مرجع لواجهة برمجة التطبيقات Material 3
• إنشاء نماذج المادة 3 في رمز المصدر

الفيديوهات الطويلة

• Material You في Jetpack Compose

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

• ملاحظة: يظهر نص الرابط عند إيقاف JavaScript
• نقل البيانات من المادة 2 إلى المادة 3 في Compose
• التصميم المتعدد الأبعاد 2 في Compose
• أنظمة التصميم المخصّصة في Compose