«رنگ پویا» که در Android 12 اضافه شد، به کاربران امکان می‌دهد دستگاه‌هایشان را شخصی‌سازی کنند تا ازنظر رنگ با آرایش رنگ‌های کاغذدیواری شخصی‌شان یا ازطریق رنگ انتخاب‌شده در انتخاب‌گر کاغذدیواری هماهنگ شود.
با افزودن میانای برنامه‌سازی کاربردی DynamicColors می‌توانید از این ویژگی بهره ببرید. این میانای برنامه‌سازی کاربردی این زمینه‌سازی را در برنامه یا فعالیت شما اعمال می‌کند تا برنامه‌تان برای کاربر شخصی‌سازی‌شده‌تر شود.
این صفحه شامل دستورالعمل‌هایی برای پیاده‌سازی «رنگ‌های پویا» در برنامه‌تان است. این ویژگی به‌طور جداگانه برای ابزارک‌ها و نمادهای تطبیق‌پذیر نیز دردسترس است، همان‌طور که در ادامه این صفحه توضیح داده شده است. همچنین می‌توانید codelab را امتحان کنید.
نحوه ایجاد آرایش رنگ‌ها توسط Android
Android مراحل زیر را برای تولید طرح‌های رنگی از کاغذدیواری کاربر انجام می‌دهد.
سیستم رنگ‌های اصلی را در تصویر کاغذدیواری انتخاب‌شده شناسایی می‌کند و رنگ منبع را استخراج می‌کند.
سیستم از آن رنگ منبع برای استخراج پنج رنگ کلیدی دیگر استفاده می‌کند که با نام‌های اصلی، فرعی، سوم، خنثی، و خنثی متغیر شناخته می‌شوند.
شکل ۲. نمونه‌ای از استخراج رنگ منبع از تصویر کاغذدیواری و استخراج به پنج رنگ اصلی سیستم هر رنگ اصلی را به پالت رنگی با ۱۳ رنگ تبدیل می‌کند.
شکل ۳. نمونه‌ای از تولید پالت‌های رنگی داده‌شده سیستم از این کاغذدیواری واحد برای استخراج پنج طرح رنگی مختلف استفاده می‌کند که مبنای هر زمینه روشن و تیره را فراهم می‌کند.
نحوه نمایش انواع رنگ در دستگاه کاربر
از Android 12، کاربران می‌توانند انواع رنگ را از رنگ‌های استخراج‌شده از کاغذدیواری و زمینه‌های مختلف انتخاب کنند و در Android 13 انواع بیشتری اضافه شده است. برای مثال، کاربری که تلفن Pixel با Android 13 دارد، همان‌طور که در شکل ۴ نشان داده شده است، گونه‌ای را از تنظیمات کاغذدیواری و سبک انتخاب می‌کند.
Android 12 نوع Tonal Spot را اضافه کرد و به‌دنبال آن انواع Neutral، Vibrant Tonal، و Expressive در Android 13 اضافه شدند. هر گونه دستورالعمل منحصربه‌فردی دارد که رنگ‌های اصلی کاغذدیواری کاربر را ازطریق سرزندگی و چرخش فام تغییر می‌دهد. مثال زیر یک طرح رنگ را نشان می‌دهد که ازطریق این چهار رنگ مختلف بیان شده است.
برنامه شما همچنان از همان نشان‌ها برای دسترسی به این رنگ‌ها استفاده می‌کند. برای جزئیات درباره نشان‌ها، به ایجاد زمینه با نشان‌ها در این صفحه مراجعه کنید.
شروع به کار با «نماها»
می‌توانید «رنگ پویا» را در سطح برنامه یا فعالیت اعمال کنید. برای انجام این کار، با
applyToActivitiesIfAvailable() تماس بگیرید تا
ActivityLifeCycleCallbacks را در برنامه‌تان ثبت کنید.
کاتلین
class MyApplication: Application() { override fun onCreate() { DynamicColors.applyToActivitiesIfAvailable(this) } }
جاوا
public class MyApplication extends Application { @Override public void onCreate() { super.onCreate(); DynamicColors.applyToActivitiesIfAvailable(this); } }
سپس، زمینه را به برنامه‌تان اضافه کنید.
<style
name="AppTheme"
parent="ThemeOverlay.Material3.DynamicColors.DayNight">
...
</style>
ایجاد زمینه با کدها
«رنگ پویا» از نشان‌های طراحی بهره می‌برد تا اختصاص دادن رنگ به عناصر مختلف میانای کاربر را ساده‌تر و یکپارچه‌تر کند. نشان طراحی به شما امکان می‌دهد به‌جای مقدار تنظیم‌شده، نقش‌های رنگ را به‌صورت معنایی به عناصر مختلف واسط کاربر اختصاص دهید. این کار باعث می‌شود سیستم رنگی برنامه‌تان انعطاف‌پذیری، مقیاس‌پذیری، و ثبات بیشتری داشته باشد و به‌ویژه هنگام طراحی برای زمینه‌های روشن و تیره و رنگ پویا بسیار قدرتمند است.
قطعه‌های زیر نمونه‌هایی از زمینه‌های روشن و تیره و xml رنگ مربوطه را پس‌از اعمال کردن نشان‌های رنگ پویا نشان می‌دهند.
زمینه روشن
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
<item name="colorPrimary">@color/md_theme_light_primary</item>
<item name="colorOnPrimary">@color/md_theme_light_onPrimary</item>
<item name="colorPrimaryContainer">@color/md_theme_light_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/md_theme_light_onPrimaryContainer</item>
<item name="colorError">@color/md_theme_light_error</item>
<item name="colorOnError">@color/md_theme_light_onError</item>
<item name="colorErrorContainer">@color/md_theme_light_errorContainer</item>
<item name="colorOnErrorContainer">@color/md_theme_light_onErrorContainer</item>
<item name="colorOnBackground">@color/md_theme_light_onBackground</item>
<item name="colorSurface">@color/md_theme_light_surface</item>
<item name="colorOnSurface">@color/md_theme_light_onSurface</item>
…..
</style>
</resources>
زمینه تیره
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Dark.NoActionBar">
<item name="colorPrimary">@color/md_theme_dark_primary</item>
<item name="colorOnPrimary">@color/md_theme_dark_onPrimary</item>
<item name="colorPrimaryContainer">@color/md_theme_dark_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/md_theme_dark_onPrimaryContainer</item>
<item name="colorError">@color/md_theme_dark_error</item>
<item name="colorOnError">@color/md_theme_dark_onError</item>
<item name="colorErrorContainer">@color/md_theme_dark_errorContainer</item>
<item name="colorOnErrorContainer">@color/md_theme_dark_onErrorContainer</item>
<item name="colorOnBackground">@color/md_theme_dark_onBackground</item>
<item name="colorSurface">@color/md_theme_dark_surface</item>
<item name="colorOnSurface">@color/md_theme_dark_onSurface</item>
……
</style>
</resources>
Colors xml
Colors.xml
<resources>
<color name="md_theme_light_primary">#6750A4</color>
<color name="md_theme_light_onPrimary">#FFFFFF</color>
<color name="md_theme_light_primaryContainer">#EADDFF</color>
<color name="md_theme_light_onPrimaryContainer">#21005D</color>
<color name="md_theme_light_error">#B3261E</color>
<color name="md_theme_light_onError">#FFFFFF</color>
<color name="md_theme_light_errorContainer">#F9DEDC</color>
<color name="md_theme_light_onErrorContainer">#410E0B</color>
<color name="md_theme_light_surface">#FFFBFE</color>
<color name="md_theme_light_onSurface">#1C1B1F</color>
<color name="md_theme_light_surfaceVariant">#E7E0EC</color>
<color name="md_theme_dark_primary">#D0BCFF</color>
<color name="md_theme_dark_onPrimary">#381E72</color>
<color name="md_theme_dark_primaryContainer">#4F378B</color>
<color name="md_theme_dark_onPrimaryContainer">#EADDFF</color>
<color name="md_theme_dark_secondary">#CCC2DC</color>
<color name="md_theme_dark_onSecondary">#332D41</color>
<color name="md_theme_dark_secondaryContainer">#4A4458</color>
<color name="md_theme_dark_onSurface">#E6E1E5</color>
<color name="md_theme_dark_surfaceVariant">#49454F</color>
</resources>
برای اطلاعات بیشتر:
برای کسب اطلاعات بیشتر درباره «رنگ پویا»، رنگ‌های سفارشی، و تولید کردن توکن، به صفحه رنگ پویا در Material 3 مراجعه کنید.
برای تولید پالت رنگ پایه و رنگ‌ها و زمینه برنامه‌تان، «سازنده زمینه Material» را که ازطریق افزایه Figma یا در مرورگر دردسترس است بررسی کنید.
برای کسب اطلاعات بیشتر درباره اینکه چگونه استفاده از آرایش رنگ‌ها می‌تواند دسترس‌پذیری بهتری را در برنامه‌تان فراهم کند، به صفحه Material 3 درباره دسترس‌پذیری سیستم رنگ مراجعه کنید.
حفظ کردن رنگ‌های سفارشی یا نمانام
اگر برنامه‌تان رنگ‌های سفارشی یا نمانامی دارد که نمی‌خواهید با اولویت‌های کاربر تغییر کند، می‌توانید آن‌ها را به‌طور جداگانه هنگام ساختن طرح رنگ خود اضافه کنید. برای مثال:
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
...
<item name="home_lamp">@color/home_yellow</item>
...
</style>
</resources>
Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>
یا می‌توانید از Material Theme Builder برای وارد کردن رنگ‌های اضافی استفاده کنید
که آرایش رنگ‌ها را گسترش می‌دهد و درنتیجه سیستم رنگ یکپارچه‌ای ایجاد می‌کند.
با این گزینه، از HarmonizedColors برای تغییر دادن ته‌رنگ رنگ‌های سفارشی استفاده کنید. این کار باعث ایجاد تعادل دیداری و کنتراست دسترس‌پذیر در ترکیب با رنگ‌های تولیدشده توسط کاربر می‌شود. این خطا در زمان اجرا با
applyToContextIfAvailable() رخ می‌دهد.
راهنمای Material 3 را درباره هماهنگ کردن رنگ‌های سفارشی ببینید.
اعمال کردن «رنگ پویا» بر نمادها و ابزاره‌های تطبیق‌پذیر
علاوه‌بر فعال کردن زمینه‌سازی «رنگ پویا» در برنامه‌تان، می‌توانید از زمینه‌سازی «رنگ پویا» برای ابزاره‌ها از Android 12 و برای نمادهای تطبیق‌پذیر از Android 13 پشتیبانی کنید.