این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

متریال دیزاین 3 در Compose

Jetpack Compose پیاده سازی Material Design 3 را ارائه می دهد که تکامل بعدی Material Design است. Material 3 شامل تم به‌روزرسانی‌شده، اجزا و ویژگی‌های شخصی‌سازی Material You مانند رنگ پویا است و به گونه‌ای طراحی شده است که با سبک بصری جدید و رابط کاربری سیستم در Android 12 و بالاتر هماهنگ باشد.

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

**شکل 1** . با استفاده از متریال دیزاین 3 به برنامه نمونه پاسخ دهید

وابستگی

برای شروع استفاده از Material 3 در برنامه Compose، وابستگی Compose Material 3 را به فایل‌های build.gradle خود اضافه کنید:

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

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

APIهای آزمایشی

برخی از API های M3 آزمایشی در نظر گرفته می شوند. در چنین مواردی باید در سطح عملکرد یا فایل با استفاده از حاشیه نویسی ExperimentalMaterial3Api انتخاب کنید:

// import androidx.compose.material3.ExperimentalMaterial3Api
@Composable
fun AppComposable() {
    // M3 composables
}
Material3Snippets.kt

موضوع بندی مواد

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

**شکل 2** . زیرسیستم های طراحی متریال: رنگ، تایپوگرافی و اشکال

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

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

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

طرح رنگ

اساس یک طرح رنگی مجموعه ای از پنج رنگ کلیدی است. هر یک از این رنگ ها مربوط به پالت تونالیستی از 13 تن است که توسط اجزای 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() استفاده کنید. بر اساس تنظیمات سیستم، طرح رنگی را برای استفاده مشخص کنید: روشن یا تیره.

طرح های رنگی پویا

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

**شکل 4** . نمونه طرح زمینه پویا برنامه را از تصویر زمینه (سمت چپ) و طرح زمینه پیش فرض برنامه (راست) پاسخ دهید

رنگ پویا در اندروید 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 از رنگ روی کانتینر اصلی در بالای ظرف اصلی استفاده می‌کند تا بر مورد انتخابی تأکید کند.

**شکل 5** . کانتینر اصلی و فیلدهای نوشتاری با رنگ روی ظرف اصلی.

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 Navigation ببینید که چگونه رنگ‌های ظرف ثانویه و ثالث در تضاد برای ایجاد تأکید و تأکید استفاده می‌شوند.

**شکل 6** . ترکیب کانتینر سوم و کانتینر سوم برای دکمه اکشن شناور.

تایپوگرافی

متریال دیزاین 3 یک مقیاس نوع را تعریف می کند، شامل سبک های متنی که از طراحی متریال 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

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

محصول شما احتمالاً به تمام 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.typography می توانید تایپوگرافی ارائه شده به M3 MaterialTheme قابل ساخت را بازیابی کنید:

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

شکل متوسط برای کارت و شکل بزرگ برای دکمه عمل شناور در برنامه نمونه پاسخ. — **شکل 9** . شکل متوسط برای کارت و شکل بزرگ برای دکمه عمل شناور در برنامه نمونه پاسخ

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

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

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

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

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

تاکید

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

استفاده از رنگ‌های سطحی، سطحی و پس‌زمینه در کنار رنگ‌های مختلف روی سطح، از سیستم رنگی M3 توسعه یافته. به عنوان مثال، سطح را می توان با متغیر روی سطح و متغیر سطحی را می توان با روی سطح استفاده کرد تا سطوح مختلف تاکید را ارائه دهد.

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

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

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

ارتفاع

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

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

**شکل 13** . ارتفاع سایه در مقابل ارتفاع تونال در طراحی متریال 3

M3 Surface - پشتیبان قابل ترکیب در پشت اکثر اجزای M3 - شامل پشتیبانی از ارتفاع و ارتفاع سایه است:

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

اجزای مواد

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

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

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

**شکل 14** . تاکید دکمه از 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 همچنین چندین مؤلفه ناوبری را ارائه می دهد که بسته به اندازه و حالت های مختلف صفحه نمایش به شما کمک می کند تا ناوبری را پیاده سازی کنید.

وقتی می‌خواهید 5 مقصد یا کمتر را هدف قرار دهید، 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 (راست) — **شکل 15** . نمایش پاسخ `BottomNavigationBar` (چپ) و `NavigationRail` (راست)

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

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

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

پاسخ ویترین کشوی ناوبری دائمی — **شکل 16** . ویترین پاسخ کشوی ناوبری دائمی

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

تم یک جزء را سفارشی کنید

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 از سبک بصری جدید و رابط کاربری سیستم در اندروید 12 و بالاتر آمده است. دو حوزه کلیدی که در آن تغییرات وجود دارد، ریپل و اور اسکرول است. برای اجرای این تغییرات نیازی به کار اضافی نیست.

ریپل

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

Overscroll

اکنون Overscroll از یک افکت کششی در لبه ظروف اسکرول استفاده می کند. در Compose Foundation نسخه LazyRow و بالاتر، بدون در نظر گرفتن سطح API LazyColumn روکش Stretch overscroll به‌طور پیش‌فرض در محفظه‌های قابل تنظیم LazyVerticalGrid پیمایش روشن است.

**شکل 18** . با استفاده از افکت کششی در لبه ظرف، اسکرول کنید

دسترسی

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

دسترسی به رنگ

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

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

پاسخ برنامه نمونه: پالت های تونال اولیه، ثانویه و سوم (بالا به پایین) — **شکل 19** . پاسخ برنامه نمونه: پالت تونال اولیه، ثانویه و سوم (بالا به پایین)

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

از روی اصلی در بالای ظرف اصلی، و از روی ظرف اصلی در بالای ظرف اصلی، و همینطور برای سایر رنگ‌های تاکیدی و خنثی استفاده کنید تا کنتراست قابل دسترسی را برای کاربر فراهم کنید.

استفاده از یک کانتینر درجه سوم در بالای صفحه اصلی دکمه کنتراست ضعیفی را به کاربر می دهد:

// ✅ 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

**شکل 20** . کنتراست کافی (چپ) در مقابل کنتراست ضعیف (راست)

دسترسی به تایپوگرافی

مقیاس نوع M3 سطح شیب دار و مقادیر استاتیک را به روز می کند تا یک چارچوب ساده اما پویا از دسته بندی های اندازه ارائه دهد که در همه دستگاه ها مقیاس می شود.

به عنوان مثال، در M3، Display Small را می توان بسته به زمینه دستگاه، مانند تلفن یا تبلت، مقادیر متفاوتی نسبت داد.

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

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

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

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

بیشتر بدانید

برای کسب اطلاعات بیشتر در مورد Material Theming در Compose، منابع زیر را بررسی کنید:

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

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

اسناد

مرجع API و کد منبع

ویدیوها

مواد شما در Jetpack Compose

{% کلمه به کلمه %} {% آخر کلمه %}

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

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

{% کلمه به کلمه %} {% endverbatim %}،

وابستگی

برای شروع استفاده از Material 3 در برنامه Compose، وابستگی Compose Material 3 را به فایل‌های build.gradle خود اضافه کنید:

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

APIهای آزمایشی

// import androidx.compose.material3.ExperimentalMaterial3Api
@Composable
fun AppComposable() {
    // M3 composables
}
Material3Snippets.kt

موضوع بندی مواد

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

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

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

طرح رنگ

درباره طرح رنگ و نقش های رنگی بیشتر بخوانید.

ایجاد طرح های رنگی

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

طرح های رنگی پویا

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 از رنگ روی کانتینر اصلی در بالای ظرف اصلی استفاده می‌کند تا بر مورد انتخابی تأکید کند.

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	اندازه قلم/ارتفاع خط پیش‌فرض
`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`

تایپوگرافی را تعریف کنید

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

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

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

اشکال

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

اشکال را تعریف کنید

اندازه های مختلفی از اشکال وجود دارد:

فوق العاده کوچک
کوچک
متوسط
بزرگ
فوق العاده بزرگ

به‌طور پیش‌فرض، هر شکل یک مقدار پیش‌فرض دارد، اما می‌توانید آن‌ها را لغو کنید:

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

از اشکال استفاده کنید

اعمال شکل متوسط و بزرگ با مقادیر پیش فرض:

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

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

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

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

تاکید

استفاده از رنگ‌های سطحی، سطحی و پس‌زمینه در کنار رنگ‌های مختلف روی سطح، از سیستم رنگی M3 توسعه یافته. به عنوان مثال، سطح را می توان با متغیر روی سطح و متغیر سطحی را می توان با روی سطح استفاده کرد تا سطوح مختلف تاکید را ارائه دهد.

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

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

ارتفاع

M3 Surface - پشتیبان قابل ترکیب در پشت اکثر اجزای 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

وقتی می‌خواهید 5 مقصد یا کمتر را هدف قرار دهید، NavigationBar برای دستگاه‌های فشرده استفاده می‌شود:

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

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

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

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

تم یک جزء را سفارشی کنید

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

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

ریپل

Overscroll

دسترسی

دسترسی به رنگ

استفاده از یک کانتینر درجه سوم در بالای صفحه اصلی دکمه کنتراست ضعیفی را به کاربر می دهد:

// ✅ 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، Display Small را می توان بسته به زمینه دستگاه، مانند تلفن یا تبلت، مقادیر متفاوتی نسبت داد.

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

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

بیشتر بدانید

برای کسب اطلاعات بیشتر در مورد Material Theming در Compose، منابع زیر را بررسی کنید:

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

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

اسناد

مرجع API و کد منبع

ویدیوها

مواد شما در Jetpack Compose

{% کلمه به کلمه %} {% آخر کلمه %}

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

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

{% کلمه به کلمه %} {% endverbatim %}،

وابستگی

برای شروع استفاده از Material 3 در برنامه Compose، وابستگی Compose Material 3 را به فایل‌های build.gradle خود اضافه کنید:

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

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

API های تجربی

برخی از API های M3 تجربی تلقی می شوند. در چنین مواردی شما باید با استفاده از حاشیه نویسی ExperimentalMaterial3Api در سطح عملکرد یا پرونده انتخاب کنید:

// import androidx.compose.material3.ExperimentalMaterial3Api
@Composable
fun AppComposable() {
    // M3 composables
}
Material3Snippets.kt

مضامین مادی

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

**شکل 2** . زیر سیستم های طراحی مواد: رنگ ، تایپوگرافی و اشکال

Jetpack آهنگسازی این مفاهیم را با M3 MaterialTheme Composble قابل اجرا می کند:

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

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

طرح رنگ

پایه و اساس یک طرح رنگی مجموعه ای از پنج رنگ کلیدی است. هر یک از این رنگ ها مربوط به یک پالت تنال از 13 تن است که توسط مواد 3 ماده استفاده می شود. به عنوان مثال ، این طرح رنگی برای موضوع نور برای پاسخ است:

**شکل 3** . پاسخ طرح نمونه برنامه نور نور

درباره طرح رنگ و نقشهای رنگی بیشتر بخوانید.

طرح های رنگی ایجاد کنید

در حالی که می توانید یک ColorScheme سفارشی را به صورت دستی ایجاد کنید ، تولید آن با استفاده از رنگ های منبع از برند خود اغلب ساده تر است. ابزار سازنده موضوع Material به شما امکان می دهد این کار را انجام دهید و به طور اختیاری کد مضامین را تشکیل می دهد. پرونده های زیر تولید می شوند:

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() استفاده کنید. بر اساس تنظیم سیستم ، تعریف کنید که از کدام طرح رنگی استفاده کنید: نور یا تاریک.

طرح های رنگی پویا

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

**شکل 4** . پاسخ نمونه برنامه پویا از تصویر زمینه (سمت چپ) و برنامه پیش فرض برنامه (سمت راست)

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

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

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

طراحی برنامه پاسخ نمونه از رنگ داخلی-container در بالای Container Primary برای تأکید بر مورد انتخاب شده استفاده می کند.

**شکل 5** . کانتینر اولیه و زمینه های متنی با رنگ اصلی-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

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

**شکل 6** . ترکیب Tertiary-Container و On-Tertiary-Container برای دکمه عمل شناور.

تایپوگرافی

طراحی مواد 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 کلاس Typography M3-همراه با TextStyle موجود و کلاسهای مرتبط با قلم- را برای مدل سازی مقیاس نوع مواد ارائه می دهد. سازنده 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

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

محصول شما به احتمال زیاد به 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.typography می توانید تایپوگرافی ارائه شده به M3 MaterialTheme قابل بازیابی را بازیابی کنید:

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 بیشتر شبیه به مقیاس نوع است و طیف وسیعی از شکل ها را در سراسر UI امکان پذیر می کند.

اندازه های مختلفی وجود دارد:

فوق العاده کوچک
کوچک
متوسط
بزرگ
فوق العاده بزرگ

به طور پیش فرض ، هر شکل یک مقدار پیش فرض دارد ، اما می توانید آن را نادیده بگیرید:

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

شکل متوسط برای کارت و شکل بزرگ برای دکمه عملکرد شناور در برنامه نمونه پاسخ. — **شکل 9** . شکل متوسط برای کارت و شکل بزرگ برای دکمه عملکرد شناور در برنامه نمونه پاسخ

دو شکل دیگر وجود دارد - RectangleShape و CircleShape - که بخشی از آهنگسازی هستند. شکل مستطیل بدون شعاع مرزی است و شکل دایره لبه های کامل دایره ای را نشان می دهد:

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

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

**شکل 10** . مقادیر پیش فرض برای همه اجزای 3 ماده.

می توانید اطلاعات بیشتر در مورد دستورالعمل های مواد در مورد استفاده از شکل را بخوانید.

تاکید

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

با استفاده از رنگهای سطح ، تغییر سطح و پس زمینه در کنار سطح ، رنگهای مختلف در سطح ، از سیستم رنگی M3 گسترش یافته. به عنوان مثال ، از سطح می توان با استفاده از سطح مختلف استفاده کرد و سطح متمایز از سطح آن می توان با سطح روی سطح استفاده کرد تا سطوح مختلف تأکید را ارائه دهد.

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

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

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

ارتفاع

ماده 3 نشان دهنده ارتفاع عمدتا با استفاده از روکش های رنگ تنال است. این یک روش جدید برای تمایز ظروف و سطوح از یکدیگر است - افزایش ارتفاع تونال علاوه بر سایه ها ، از لحن برجسته تری نیز استفاده می کند.

روکش های ارتفاع در مضامین تیره نیز به روکش رنگ تنال در ماده 3 تغییر یافته است.

**شکل 13** . ارتفاع سایه در مقابل ارتفاع تونال در طراحی مواد 3

سطح M3 - ترکیب پشتیبان در پشت بیشتر اجزای M3 - شامل پشتیبانی از هر دو ارتفاع تونال و سایه است:

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

اجزای مادی

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

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

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

**شکل 14** . تأکید دکمه از 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

می توانید اطلاعات بیشتر در مورد دکمه های مادی و سایر مؤلفه ها را بخوانید. مواد 3 طیف گسترده ای از مجموعه های مؤلفه مانند دکمه ها ، میله های برنامه ، اجزای ناوبری را ارائه می دهد که به طور خاص برای موارد استفاده های مختلف و اندازه صفحه طراحی شده اند.

مواد همچنین چندین مؤلفه ناوبری را ارائه می دهند که به شما در اجرای ناوبری کمک می کند ، بسته به اندازه و حالت های مختلف صفحه نمایش.

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

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

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

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

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

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

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

می توانید اطلاعات بیشتر در مورد سفارشی سازی مواد 3 را بخوانید.

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

برخی از جنبه های مطالب شما از سبک بصری و UI سیستم جدید در Android 12 و بالاتر آمده است. دو منطقه مهم که در آن تغییراتی وجود دارد ، موج دار و بیش از حد است. برای اجرای این تغییرات کار اضافی لازم نیست.

ریپل

ریپل اکنون از یک درخشش ظریف برای روشن کردن سطوح هنگام فشار استفاده می کند. آهنگسازی Ripple از یک سکوی قابل استفاده در زیر کاپوت در Android استفاده می کند ، بنابراین Sparkle Ripple در Android 12 و بالاتر برای همه اجزای مواد در دسترس است.

بیش از حد خرد کردن

بیش از حد در حال حاضر از اثر کششی در لبه ظروف پیمایش استفاده می کند. کشش کشش به طور پیش فرض در پیمایش ترکیبات کانتینر - به عنوان مثال ، LazyColumn ، LazyRow و LazyVerticalGrid - در بنیاد آهنگسازی 1.1.0 و بالاتر ، صرف نظر از سطح API است.

**شکل 18** بیش از حد با استفاده از اثر کششی در لبه ظرف

دسترسی

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

قابلیت دسترسی به رنگ

رنگ پویا برای رعایت استانداردهای دسترسی برای کنتراست رنگ طراحی شده است. سیستم پالت های تونال برای ساخت هر طرح رنگی به طور پیش فرض بسیار مهم است.

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

**شکل 19** پاسخ برنامه نمونه: پالت های تونال اولیه ، ثانویه و سوم (از بالا به پایین)

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

از ابتدایی در بالای اولیه و اصلی ترین و در بالای صفحه اصلی استفاده کنید و برای سایر لهجه ها و رنگ های خنثی یکسان است تا کنتراست قابل دسترسی با کاربر فراهم شود.

استفاده از یک ظرف سوم در بالای اولیه دکمه کنتراست ضعیف را به کاربر می دهد:

// ✅ 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

**شکل 20** کنتراست کافی (سمت چپ) در مقابل کنتراست ضعیف (راست)

دسترسی به تایپوگرافی

مقیاس M3 نوع رمپ و مقادیر نوع استاتیک را به روز می کند تا یک چارچوب ساده اما پویا از دسته های اندازه را ارائه دهد که در بین دستگاه ها مقیاس می شوند.

به عنوان مثال ، در M3 ، بسته به متن دستگاه ، مانند تلفن یا رایانه لوحی ، می توان مقادیر مختلفی را اختصاص داد.

صفحه های بزرگ

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

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

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

بیشتر بدانید

برای کسب اطلاعات بیشتر در مورد مضامین مادی در آهنگسازی ، منابع زیر را بررسی کنید:

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

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

اسناد

مرجع و کد منبع API

ویدیوها

شما را در Jetpack آهنگسازی می کنید

{% کلمه به کلمه %} {% آخر کلمه %}

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

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

{% کلمه به کلمه %} {% endverbatim %}،

Jetpack Compose اجرای Material Design 3 ، تکامل بعدی طراحی مواد را ارائه می دهد. مواد 3 شامل مضامین به روز شده ، مؤلفه ها و مواد شخصی سازی شما مانند رنگ پویا است و به گونه ای طراحی شده است که با سبک بصری و سیستم UI جدید در Android 12 و بالاتر منسجم باشد.

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

**شکل 1** . پاسخ برنامه نمونه با استفاده از طراحی مواد 3

وابستگی

برای شروع استفاده از مواد 3 در برنامه Compose خود ، وابستگی Compose Material 3 را به پرونده های build.gradle خود اضافه کنید:

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

API های تجربی

// import androidx.compose.material3.ExperimentalMaterial3Api
@Composable
fun AppComposable() {
    // M3 composables
}
Material3Snippets.kt

مضامین مادی

Jetpack آهنگسازی این مفاهیم را با M3 MaterialTheme Composble قابل اجرا می کند:

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

طرح رنگ

درباره طرح رنگ و نقشهای رنگی بیشتر بخوانید.

طرح های رنگی ایجاد کنید

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

طرح های رنگی پویا

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

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

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

طراحی برنامه پاسخ نمونه از رنگ داخلی-container در بالای Container Primary برای تأکید بر مورد انتخاب شده استفاده می کند.

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

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`

تایپوگرافی را تعریف کنید

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

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

می توانید اطلاعات بیشتر در مورد دستورالعمل های مواد در مورد استفاده از تایپوگرافی را بخوانید.

اشکال

اشکال را تعریف کنید

اندازه های مختلفی وجود دارد:

فوق العاده کوچک
کوچک
متوسط
بزرگ
فوق العاده بزرگ

به طور پیش فرض ، هر شکل یک مقدار پیش فرض دارد ، اما می توانید آن را نادیده بگیرید:

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

از اشکال استفاده کنید

شکل متوسط و بزرگ را با مقادیر پیش فرض اعمال کنید:

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

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

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

می توانید اطلاعات بیشتر در مورد دستورالعمل های مواد در مورد استفاده از شکل را بخوانید.

تاکید

با استفاده از رنگهای سطح ، تغییر سطح و پس زمینه در کنار سطح ، رنگهای مختلف در سطح ، از سیستم رنگی M3 گسترش یافته. به عنوان مثال ، از سطح می توان با استفاده از سطح مختلف استفاده کرد و سطح متمایز از سطح آن می توان با سطح روی سطح استفاده کرد تا سطوح مختلف تأکید را ارائه دهد.

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

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

ارتفاع

روکش های ارتفاع در مضامین تیره نیز به روکش رنگ تنال در ماده 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

NavigationBar برای دستگاه های جمع و جور هنگامی که می خواهید 5 یا کمتر مقصد را هدف قرار دهید استفاده می شود:

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

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

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

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

مضامین یک مؤلفه را سفارشی کنید

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

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

ریپل

بیش از حد خرد کردن

دسترسی

قابلیت دسترسی به رنگ

استفاده از یک ظرف سوم در بالای اولیه دکمه کنتراست ضعیف را به کاربر می دهد:

// ✅ 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 ، بسته به متن دستگاه ، مانند تلفن یا رایانه لوحی ، می توان مقادیر مختلفی را اختصاص داد.

صفحه های بزرگ

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

بیشتر بدانید

برای کسب اطلاعات بیشتر در مورد مضامین مادی در آهنگسازی ، منابع زیر را بررسی کنید:

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

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

اسناد

مرجع و کد منبع API

ویدیوها

شما را در Jetpack آهنگسازی می کنید

{% کلمه به کلمه %} {% آخر کلمه %}

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

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

{% کلمه به کلمه %} {% آخر کلمه %}