‫Material Design 3 در Compose

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

در زیر، پیاده‌سازی Material Design 3 را بااستفاده از برنامه نمونه «پاسخ» به‌عنوان مثال نشان می‌دهیم. «نمونه پاسخ» کاملاً براساس «طراحی Material 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 که برای ساختن برنامه‌تان استفاده می‌کنید منعکس می‌شود.

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

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

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

رنگ‌بندی

پایه یک آرایش رنگ‌ها مجموعه پنج رنگ کلیدی است. هریک از این رنگ‌ها به پالت رنگی ۱۳ رنگ مربوط می‌شود که توسط عناصر Material 3 استفاده می‌شوند. برای مثال، این آرایش رنگ‌ها برای زمینه روشن برای پاسخ است:

درباره آرایش رنگ‌ها و نقش‌های رنگ بیشتر بخوانید.

تولید کردن آرایش‌های رنگ

اگرچه می‌توانید 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() استفاده کنید. براساس تنظیم سیستم، مشخص کنید از کدام آرایش رنگی استفاده شود: روشن یا تیره.

آرایش‌های رنگ پویا

رنگ پویا بخش اصلی «متریال یو» است که در آن الگوریتمی رنگ‌های سفارشی را از کاغذدیواری کاربر استخراج می‌کند تا در برنامه‌ها و میانای کاربر سیستم اعمال شود. از این پالت رنگ به‌عنوان نقطه شروع برای تولید طرح‌های رنگی روشن و تیره استفاده می‌شود.

«رنگ پویا» در 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

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

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

طراحی برنامه نمونه «پاسخ» از رنگ 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

در اینجا می‌توانید در کشوی «پیمایش پاسخ» ببینید که چگونه از رنگ‌های ثانویه و ثالثیه ظرف در کنتراست برای ایجاد تأکید و برجستگی استفاده می‌شود.

نویسه‌نگاری

«طراحی مواد ۳» مقیاس نوع را تعریف می‌کند، ازجمله سبک‌های نوشتاری که از «طراحی مواد ۲» اقتباس شده‌اند. نام‌گذاری و گروه‌بندی به این موارد ساده شده است: نمایش، عنوان، عنوان، متن، و برچسب، با اندازه‌های بزرگ، متوسط، و کوچک برای هرکدام.

تعریف نویسه‌نگاری

«نوشتن» کلاس 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» نیاز ندارد. در این مثال، پنج اندازه برای مجموعه کاهش‌یافته انتخاب شده است و بقیه حذف شده‌اند.

می‌توانید با تغییر مقادیر پیش‌فرض 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 را می‌توان در شکل‌های مختلف نمایش داد. شکل‌ها توجه را هدایت می‌کنند، اجزا را شناسایی می‌کنند، وضعیت را منتقل می‌کنند، و نمانام را بیان می‌کنند.

مقیاس شکل سبک گوشه‌های محتوا را تعریف می‌کند و طیفی از گردی از مربع تا کاملاً دایره‌ای ارائه می‌دهد.

تعریف شکل‌ها

«ترکیب» کلاس 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 — وجود دارد که بخشی از «نوشتن» هستند. شکل مستطیل بدون شعاع حاشیه است و شکل دایره لبه‌های کاملاً گرد را نشان می‌دهد:

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

ارتفاع

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

رونهادهای ارتفاع در زمینه‌های تیره نیز به رونهادهای رنگی آهنگ‌دار در Material 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

می‌توانید درباره دکمه‌های Material و عناصر دیگر بیشتر بخوانید. ‫Material 3 مجموعه‌های متنوعی از عناصر مثل «دکمه‌ها»، «نوار برنامه‌ها»، و عناصر «پیمایش» را ارائه می‌دهد که به‌طور خاص برای موارد استفاده و اندازه‌های مختلف صفحه‌نمایش طراحی شده‌اند.

عناصر پیمایش

«متریال» همچنین چندین عنصر پیمایش ارائه می‌دهد که به شما کمک می‌کند پیمایش را بسته به اندازه‌ها و حالت‌های مختلف صفحه‌نمایش پیاده‌سازی کنید.

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

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

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

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

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

سفارشی‌سازی کردن زمینه‌سازی یک عنصر

‫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 بیشتر بخوانید.

واسط کاربری سیستم

برخی‌از جنبه‌های «متریال یو» از سبک بصری جدید و میانای کاربر سیستم در Android 12 و بالاتر می‌آید. دو زمینه کلیدی که تغییراتی در آن‌ها ایجاد شده است عبارت‌اند از موج و حرکت بیش‌ازحد. برای پیاده‌سازی این تغییرات، کار اضافه‌ای لازم نیست.

موج‌دار

«موج» اکنون از درخشش ملایمی برای روشن کردن سطوح هنگام فشار دادن استفاده می‌کند. Compose Material Ripple از RippleDrawable پلاتفرم در Android استفاده می‌کند، بنابراین موج درخشان در Android 12 و بالاتر برای همه عناصر Material دردسترس است.

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

اکنون در لبه ظرف‌های پیمایش از جلوه کشش برای پیمایش بیش‌ازحد استفاده می‌شود. «پیمایش بیش‌ازحد کششی» به‌طور پیش‌فرض در عناصر ترکیبی محتوی پیمایش روشن است — برای مثال، LazyColumn، LazyRow، و LazyVerticalGrid — در Compose Foundation نسخه ۱.۱.۰ و بالاتر، صرف‌نظر از سطح میانای برنامه‌سازی کاربردی.

دسترس‌پذیری

استانداردهای دسترس‌پذیری که در عناصر 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، «نمایش کوچک» می‌تواند بسته به زمینه دستگاه، مثل تلفن یا رایانه لوحی، مقادیر متفاوتی داشته باشد.

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

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

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

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

بیشتر بدانید

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

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

• پاسخ دادن به برنامه نمونه M3

سندنگار

• انتقال از Material 2 به Material 3 در Compose
• دستورالعمل‌های طراحی سه‌بعدی

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

• مرجع Compose Material 3 API
• نمونه‌های «طراحی مواد ۳» را در کد منبع بنویسید

ویدیوها

• ‫Material You در Jetpack Compose