‫Google برای ترجمه محتوا به زبان ترجیحی شما از فناوری هوشواره استفاده می‌کند. ترجمه‌های هوشواره‌ای ممکن است اشتباه داشته باشند.

‫Material Design 3 در Compose

Jetpack Compose پیاده‌سازی Material You و Material 3 Expressive، تکامل بعدی Material Design، را ارائه می‌دهد. M3 Expressive نسخه گسترش‌یافته Material Design 3 است که شامل به‌روزرسانی‌های مبتنی بر پژوهش در زمینه، مؤلفه‌ها، حرکت، تایپوگرافی، و موارد دیگر می‌شود — همه این‌ها برای کمک به شما در ساخت محصولات جذاب و مطلوب که کاربران دوست دارند طراحی شده است. این برنامه همچنین از ویژگی‌های شخصی‌سازی Material You مثل رنگ پویا پشتیبانی می‌کند. M3 Expressive مکمل سبک دیداری و رابط کاربری سیستم Android 16 است.

در زیر، پیاده‌سازی Material Design 3 را بااستفاده از برنامه نمونه Reply به‌عنوان نمونه نشان می‌دهیم. نمونه Reply کاملاً براساس Material Design 3 است.

**شکل ۱**. برنامه نمونه Reply بااستفاده از Material Design 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

موضوع‌دهی Material

طرح زمینه M3 شامل زیرسیستم‌های زیر است: آرایش رنگ‌ها، تایپوگرافی و شکل‌ها. وقتی این مقادیر را سفارشی‌سازی می‌کنید، تغییرات شما به‌طور خودکار در مؤلفه‌های M3 که برای ساختن برنامه‌تان استفاده می‌کنید منعکس می‌شود.

زیرسیستم‌های طراحی Material: رنگ، طرح حروف، و شکل‌ها — **شکل ۲**. زیرسیستم‌های «طراحی مادی»: رنگ، طرح حروف، و شکل‌ها

Jetpack Compose این مفاهیم را با MaterialTheme ترکیب‌پذیر M3 پیاده‌سازی می‌کند:

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

برای زمینه‌سازی محتوای برنامه‌تان، آرایش رنگ‌ها، تایپوگرافی، و شکل‌های مختص برنامه‌تان را تعریف کنید.

رنگ‌بندی

پایه آرایش رنگ‌ها مجموعه‌ای از پنج رنگ اصلی است. هرکدام از این رنگ‌ها به پالت رنگی ۱۳ تنی مربوط می‌شود که توسط مؤلفه‌های 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 است که در آن الگوریتمی رنگ‌های سفارشی را از کاغذدیواری کاربر استخراج می‌کند تا در برنامه‌ها و واسط کاربری سیستم او اعمال شود. این پالت رنگ به‌عنوان نقطه شروع برای تولید طرح‌های رنگی روشن و تیره استفاده می‌شود.

برنامه نمونه Reply با زمینه‌سازی پویا از کاغذدیواری (چپ) و زمینه‌سازی پیش‌فرض برنامه (راست) — **شکل ۴**. برنامه نمونه Reply با زمینه‌سازی پویا از کاغذدیواری (سمت راست) و زمینه‌سازی پیش‌فرض برنامه (سمت چپ)

رنگ پویا در 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 به رنگ‌های زمینه Material در برنامه‌تان دسترسی پیدا کنید:

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

هر نقش رنگی را می‌توان در مکان‌های مختلفی بسته به وضعیت، برجستگی، و تأکید مؤلفه استفاده کرد.

رنگ اصلی رنگ پایه است که برای مؤلفه‌های اصلی مانند دکمه‌های برجسته، حالت‌های فعال، و ته‌رنگ سطوح مرتفع استفاده می‌شود.
رنگ کلیدی فرعی برای عناصر کمتر برجسته در میانای کاربر، مثل تراشه‌های فیلتر، استفاده می‌شود و فرصت بیان رنگ را گسترش می‌دهد.
از رنگ کلیدی سوم برای به‌دست آوردن نقش‌های رنگ‌های تأکیدی متضاد استفاده می‌شود که می‌توان از آن‌ها برای متعادل کردن رنگ‌های اصلی و فرعی یا جلب توجه بیشتر به یک عنصر استفاده کرد.

طراحی برنامه نمونه Reply از رنگ on-primary-container در بالای primary-container استفاده می‌کند تا بر مورد انتخاب‌شده تأکید کند.

محفظه اصلی و فیلدهای نوشتاری با رنگ on-primary-container. — **شکل ۵**. ظرف اصلی و فیلدهای نوشتاری با رنگ on-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 اقتباس شده‌اند. نام‌گذاری و گروه‌بندی به این موارد ساده شده است: نمایش، عنوان اصلی، عنوان، متن، و برچسب، با اندازه‌های بزرگ، متوسط، و کوچک برای هرکدام.

مقیاس تایپوگرافی پیش‌فرض برای Material design 3 — **شکل ۷**. مقیاس تایپوگرافی پیش‌فرض برای Material Design 3

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

متن بزرگ، متن متوسط، و برچسب متوسط برای استفاده‌های مختلف از نویسه‌نگاری. — **شکل ۸**. بدنه بزرگ، بدنه متوسط، و برچسب متوسط برای استفاده‌های مختلف از نویسه‌نگاری.

محصول شما احتمالاً به هر ۱۵ سبک پیش‌فرض از مقیاس نوع «طراحی مواد» نیاز نخواهد داشت. در این مثال، پنج اندازه برای مجموعه کاهش‌یافته انتخاب شده است و بقیه حذف شده‌اند.

می‌توانید با تغییر دادن مقادیر پیش‌فرض 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.typography، تایپوگرافی ارائه‌شده به ترکیب‌پذیر M3 MaterialTheme را بازیابی کنید:

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، می‌توانید آن را به 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

شکل متوسط برای «کارت» و شکل بزرگ برای «دکمه کنش شناور» در برنامه نمونه «پاسخ». — **شکل ۹**. شکل متوسط برای «کارت» و شکل بزرگ برای «دکمه کنش شناور» در برنامه نمونه Reply

دو شکل دیگر — RectangleShape و CircleShape — وجود دارد که بخشی از Compose هستند. شکل مستطیل بدون شعاع حاشیه است و شکل دایره لبه‌های کاملاً گرد را نشان می‌دهد:

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

نمونه‌های زیر برخی‌از مؤلفه‌ها را با مقادیر شکل پیش‌فرض اعمال‌شده بر آن‌ها نشان می‌دهد:

**شکل ۱۰**. مقادیر پیش‌فرض شکل‌ها برای همه مؤلفه‌های Material 3.

می‌توانید درباره دستورالعمل‌های Material در اعمال شکل بیشتر بخوانید.

تأکید

تأکید در M3 بااستفاده از انواع رنگ و ترکیب‌های رنگی آن ارائه می‌شود. در M3، دو روش برای افزودن تأکید به میانای کاربر وجود دارد:

استفاده از surface،‏ surface-variant، و background درکنار رنگ‌های on-surface،‏ on-surface-variants از سیستم رنگ گسترش‌یافته M3. برای مثال، می‌توان از surface با on-surface-variant و از surface-variant با on-surface استفاده کرد تا سطوح مختلفی از تأکید ارائه شود.

**شکل ۱۱**. استفاده از ترکیب رنگ‌های خنثی برای تأکید.

استفاده از وزن‌های مختلف قلم برای نوشتار. در بالا دیدید که می‌توانید وزن‌های سفارشی به مقیاس نوع ما ارائه دهید تا تأکیدهای متفاوتی ارائه کنید.

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

ارتفاع

Material 3 ارتفاع را عمدتاً بااستفاده از هم‌پوشانی‌های رنگی تُنال نشان می‌دهد. این روش جدیدی برای متمایز کردن محفظه‌ها و سطوح از یکدیگر است — افزایش ارتفاع رنگی از رنگ برجسته‌تری استفاده می‌کند — علاوه‌بر سایه‌ها.

لایه‌های ارتفاع در زمینه‌های تیره نیز به لایه‌های رنگی تُنال در Material 3 تغییر کرده‌اند. رنگ هم‌پوشانی از جایگاه رنگ اصلی گرفته می‌شود.

**شکل ۱۳**. ارتفاع سایه درمقابل ارتفاع رنگی در Material Design 3

Surface در M3 — ترکیب‌پذیر پشتیبان در پشت اکثر مؤلفه‌های M3 — از هر دو ارتفاع سایه و رنگی پشتیبانی می‌کند:

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

اجزای طراحی مواد

«طراحی مواد» با مجموعه غنی‌ای از مؤلفه‌های Material (مانند دکمه‌ها، تراشه‌ها، کارت‌ها، نوار پیمایش) ارائه می‌شود که ازقبل از «موضوع‌دهی Material» پیروی می‌کنند و به شما کمک می‌کنند برنامه‌های زیبایی با «طراحی مواد» بسازید. می‌توانید استفاده از مؤلفه‌ها را با ویژگی‌های پیش‌فرض بلافاصله پس‌از نصب شروع کنید.

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

M3 نسخه‌های زیادی از مؤلفه‌های یکسان را برای استفاده در نقش‌های مختلف براساس تأکید و توجه ارائه می‌دهد.

**شکل ۱۴**. تأکید دکمه از FAB، دکمه اصلی تا دکمه نوشتاری

دکمه کنش شناور گسترده برای کنش با بالاترین تأکید:

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 برای دستگاه‌های کوچک استفاده می‌شود، وقتی می‌خواهید ۵ مقصد یا کمتر را هدف‌یابی کنید:

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

ویترین پاسخ BottomNavigationBar(چپ) و NavigationRail(راست) — **شکل ۱۵**. نمونه پاسخ `BottomNavigationBar` (چپ) و `NavigationRail` (راست)

بااستفاده از هر دو در زمینه‌سازی پیش‌فرض پاسخ دهید تا تجربه کاربری فراگیری برای همه اندازه‌های دستگاه ارائه شود.

NavigationDrawer برای رایانه‌های لوحی با اندازه متوسط تا بزرگ استفاده می‌شود که در آن‌ها فضای کافی برای نمایش جزئیات دارید. می‌توانید از هر دو PermanentNavigationDrawer یا ModalNavigationDrawer همراه با NavigationRail استفاده کنید.

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

**شکل ۱۶**. ویترین پاسخ کشوی پیمایش دائمی

گزینه‌های پیمایش تجربه کاربری، ارگونومی، و دسترسی‌پذیری را بهبود می‌بخشند. می‌توانید درباره مؤلفه‌های پیمایش Material در Compose adaptive codelab بیشتر بدانید.

سفارشی‌سازی زمینه‌سازی مؤلفه

M3 شخصی‌سازی و انعطاف‌پذیری را تشویق می‌کند. همه مؤلفه‌ها رنگ‌های پیش‌فرضی دارند که بر آن‌ها اعمال شده است، اما APIهای انعطاف‌پذیری را برای سفارشی‌سازی رنگ‌هایشان درصورت نیاز ارائه می‌دهند.

اکثر مؤلفه‌ها، مانند کارت‌ها و دکمه‌ها، یک شیء پیش‌فرض ارائه می‌دهند که واسط‌های رنگ و ارتفاع را نشان می‌دهد و می‌توان آن‌ها را برای سفارشی‌سازی مؤلفه تغییر داد:

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 استفاده می‌کند، بنابراین موج درخشان در Android 12 و بالاتر برای همه مؤلفه‌های Material دردسترس است.

پیمایش بیش‌ازحد

اکنون پیمایش بیش‌ازحد از جلوه کشیدگی در لبه محفظه‌های پیمایش استفاده می‌کند. در Compose Foundation نسخه ۱.۱.۰ و بالاتر، صرف‌نظر از سطح API، پیمایش بیش‌ازحد کششی به‌طور پیش‌فرض در composableهای محفظه پیمایشی (برای مثال، LazyColumn، LazyRow، و LazyVerticalGrid) روشن است.

دسترس‌پذیری

استانداردهای دسترس‌پذیری که در مؤلفه‌های Material تعبیه شده‌اند، برای فراهم کردن پایه‌ای برای طراحی محصول فراگیر طراحی شده‌اند. درک دسترس‌پذیری محصولتان می‌تواند قابلیت استفاده را برای همه کاربران بهبود بخشد، ازجمله افرادی که دارای کم‌بینایی، نابینایی، اختلالات شنوایی، اختلالات شناختی، اختلالات حرکتی، یا ناتوانی‌های موقعیتی (مانند دست شکسته) هستند.

دسترس‌پذیری رنگ

رنگ پویا برای مطابقت با استانداردهای دسترس‌پذیری برای کنتراست رنگ طراحی شده است. سیستم پالت‌های رنگی برای دسترس‌پذیر کردن هر آرایش رنگی به‌طور پیش‌فرض ضروری است.

سیستم رنگ Material مقادیر و اندازه‌گیری‌های استاندارد رنگ را ارائه می‌دهد که می‌توان از آن‌ها برای دستیابی به نسبت‌های کنتراست دسترس‌پذیر استفاده کرد.

برنامه نمونه پاسخ: پالت‌های رنگی اصلی، فرعی، و درجه سوم (از بالا به پایین) — **شکل ۱۹**. برنامه نمونه Reply: پالت‌های رنگی اصلی، فرعی، و سوم (از بالا به پایین)

همه مؤلفه‌های 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، بسته به بافت دستگاه (مثلاً تلفن یا رایانه لوحی)، می‌توان مقادیر مختلفی را به «نمایش کوچک» اختصاص داد.

صفحه‌نمایش بزرگ

Material راهنمایی‌هایی درباره چیدمان‌های تطبیقی و دستگاه‌های تاشو ارائه می‌دهد تا برنامه‌هایتان را دسترس‌پذیر کند و ارگونومی دستگاه‌های بزرگ را برای کاربران بهبود بخشد.

Material انواع مختلفی از پیمایش را ارائه می‌دهد تا به شما کمک کند تجربه کاربری بهتری برای دستگاه‌های بزرگ ارائه دهید.

می‌توانید درباره دستورالعمل‌های کیفیت برنامه صفحه بزرگ Android بیشتر بدانید و نمونه Reply ما را برای طراحی سازگار و دسترس‌پذیر ببینید.

بیشتر بدانید

برای کسب اطلاعات بیشتر درباره «موضوع‌دهی Material» در Compose، منابع زیر را بررسی کنید:

برنامه‌های نمونه

برنامه نمونه Reply M3

سندنگار

مرجع میانای برنامه‌سازی کاربردی و کد منبع

ویدیوها

Material You در Jetpack Compose

توصیه‌شده برای شما

توجه: وقتی جاوا اسکریپت خاموش باشد، نوشتار پیوند نمایش داده می‌شود
انتقال از Material 2 به Material 3 در Compose
Material Design 2 در Compose
سیستم‌های طراحی سفارشی در Compose