Material Design 3 في Compose

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

في ما يلي، نوضّح كيفية تنفيذ التصميم المتعدد الأبعاد 3 باستخدام نموذج تطبيق Reply كمثال. يعتمد نموذج Reply بالكامل على التصميم المتعدد الأبعاد 3

تبعية

لبدء استخدام Material 3 في تطبيق Compose، أضِف تبعية Compose Material 3 إلى ملفات build.gradle:

implementation "androidx.compose.material3:material3:$material3_version"

بعد إضافة التبعية، يمكنك البدء في إضافة أنظمة التصميم المتعدد الأبعاد، بما في ذلك اللون وأسلوب الخط والشكل، إلى تطبيقاتك.

واجهات برمجة التطبيقات التجريبية

تُعتبر بعض واجهات برمجة التطبيقات في M3 تجريبية. في هذه الحالات، عليك الموافقة على مستوى الدالة أو الملف باستخدام التعليق التوضيحي ExperimentalMaterial3Api:

// import androidx.compose.material3.ExperimentalMaterial3Api
@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. على سبيل المثال، إليك نظام الألوان للمظهر الفاتح في تطبيق Reply:

مزيد من المعلومات حول "مخطط الألوان" و"أدوار الألوان"

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

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

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

تتوفّر ميزة "الألوان الديناميكية" على الإصدار 12 من نظام التشغيل Android والإصدارات الأحدث. إذا كان اللون الديناميكي متاحًا، يمكنك إعداد 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 لون 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

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

أسلوب الخط

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

تحديد أسلوب الخط

توفّر أداة 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، مرِّره إلى M3 MaterialTheme:

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

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

الأشكال

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

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

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

توفّر أداة 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

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

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

التشديد

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

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

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

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

الارتفاع

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

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

تتضمّن دالة Surface في M3، وهي الدالة المركّبة التي تستند إليها معظم مكوّنات M3، إمكانية استخدام الارتفاع اللوني والارتفاع الظلي:

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

مكوّنات Material

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

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 في الدرس التطبيقي حول الترميز التكيُّفي في 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

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

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

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

تمويج

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

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

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

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

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

سهولة الوصول إلى الألوان

تم تصميم ميزة "الألوان الديناميكية" لتلبية معايير تسهيل الاستخدام لتباين الألوان. يُعدّ نظام لوحات الألوان اللونية أمرًا بالغ الأهمية لجعل أي نظام ألوان متاحًا بشكل تلقائي.

يوفّر نظام الألوان في 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، يمكن تعيين قيم مختلفة لـ Display Small بناءً على سياق الجهاز، مثل الهاتف أو الجهاز اللوحي.

شاشات كبيرة الحجم

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

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

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

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

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

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

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

مستندات Google

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

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

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

الفيديوهات

• ‫Material You في Jetpack Compose