به کاربران امکان دهید تجربه رنگی‌شان را در برنامه شما شخصی‌سازی کنند

امتحان کردن روش «نوشتن»
‫Jetpack Compose جعبه‌ابزار واسط کاربر توصیه‌شده برای Android است. با نحوه کار کردن با رنگ پویا در «نوشتن» آشنا شوید.
رنگ‌های پویا - طراحی Material 3 →

«رنگ پویا» که در Android 12 اضافه شده است به کاربران امکان می‌دهد دستگاه‌هایشان را شخصی‌سازی کنند تا ازنظر رنگ با آرایش رنگ‌های کاغذدیواری شخصی‌شان یا ازطریق رنگ انتخابی در انتخاب‌گر کاغذدیواری هماهنگ شود.

با افزودن DynamicColors API می‌توانید از این ویژگی بهره ببرید. این API این زمینه‌سازی را در برنامه یا فعالیت شما اعمال می‌کند تا برنامه شما برای کاربر شخصی‌سازی‌شده‌تر شود.

شکل ۱. نمونه‌هایی از طرح‌های رنگی تونال برگرفته از کاغذدیواری‌های مختلف

این صفحه شامل دستورالعمل‌هایی برای پیاده‌سازی «رنگ‌های پویا» در برنامه شما است. این ویژگی به‌صورت جداگانه برای ابزارک‌ها و نمادهای تطبیقی نیز دردسترس است، همان‌طور که در ادامه این صفحه توضیح داده شده است. همچنین می‌توانید codelab را امتحان کنید.

نحوه ایجاد آرایش رنگ‌ها در Android

‫Android مراحل زیر را برای تولید طرح‌های رنگ از کاغذدیواری کاربر انجام می‌دهد.

  1. سیستم رنگ‌های اصلی را در تصویر کاغذدیواری انتخاب‌شده تشخیص می‌دهد و رنگ منبع را استخراج می‌کند.

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

    نمونه‌ای از استخراج رنگ منبع
    شکل ۲. نمونه‌ای از استخراج رنگ منبع از تصویر کاغذدیواری و استخراج به پنج رنگ کلیدی

  3. سیستم هر رنگ کلیدی را به یک پالت رنگی با ۱۳ تنالیته تفسیر می‌کند.

    نمونه‌ای از تولید پالت‌های رنگی معین
    شکل ۳. نمونه‌ای از تولید پالت‌های رنگی معین

  4. سیستم از این کاغذدیواری واحد برای استخراج پنج طرح رنگی مختلف استفاده می‌کند که پایه و اساس هر زمینه روشن و تیره را فراهم می‌کند.

نحوه نمایش انواع رنگ در دستگاه کاربر

کاربران می‌توانند از Android 12 به بعد، گونه‌های رنگی را از رنگ‌های استخراج‌شده از کاغذدیواری و زمینه‌های مختلف انتخاب کنند و در Android 13 گونه‌های بیشتری اضافه شده است. برای مثال، کاربری که تلفن Pixel با Android 13 دارد، گونه‌ای را از تنظیمات کاغذدیواری و سبک انتخاب می‌کند، همان‌طور که در شکل ۴ نشان داده شده است.

شکل ۴. انتخاب گونه‌های رنگ در تنظیمات کاغذدیواری (نشان‌داده‌شده در دستگاه Pixel)

‫Android 12 گونه نقطه رنگی را اضافه کرد و پس‌از آن در 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.DynamicC>olors.Day<Night&>quot;
    ...
/style

ساختن زمینه با نشان‌ها

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

تکه‌کدهای زیر نمونه‌هایی از زمینه‌های روشن و تیره و xml رنگ مربوطه را پس‌از اعمال نشانه‌های رنگ پویا نشان می‌دهد.

زمینه روشن

Themes.xml

<resources>
  <style name="AppTheme" parent="Theme.Material3.Lig>ht.No<ActionBar"
    item> name="colorPrimary"<;@col>or/md<_theme_light_primary/item
>    item name="colorOnPrim<ary&q>uot;@<color/md_theme_light_onPrimary/it>em
    item name="colorPrimaryCon<taine>r&quo<t;@color/md_theme_light_primaryCont>ainer/item
    item name="colorOnPr<imary>Conta<iner"@color/md_th>eme_light_onPrimaryContaine<r/ite>m
   < item name="colorEr>ror"@color/md_theme_ligh<t_err>or/it<em
    item name="colorOnE>rror"@color/md_theme_light_onEr<ror/i>tem
 <   item name="colorErrorCont>ainer"@color/md_theme_light_error<Conta>iner/<item
    item name="colo>rOnErrorContainer"@color/md_t<heme_>light<_onErrorContainer/item
 >   item name="colorOnBac<kgrou>nd&qu<ot;@color/md_theme_light_o>nBackground/item
    item name=<">;colorSurfa<ce&quo>t<;@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.Da>rk.No<ActionBar"
    item> name="colorPrimary&quo<t;@co>lor/m<d_theme_dark_primary/item
>    item name="colorOnPri<mary&>quot;<@color/md_theme_dark_onPrimary/it>em
    item name="colorPrimaryCo<ntain>er&qu<ot;@color/md_theme_dark_primaryCont>ainer/item
    item name="colorOnP<rimar>yCont<ainer"@color/md_t>heme_dark_onPrimaryContain<er/it>em
  <  item name="colorE>rror"@color/md_theme_da<rk_er>ror/i<tem
    item name="colorOn>Error"@color/md_theme_dark_onE<rror/>item
<    item name="colorErrorCon>tainer"@color/md_theme_dark_erro<rCont>ainer</item
    item name="col>orOnErrorContainer"@color/md<_them>e_dar<k_onErrorContainer/item
>    item name="colorOnB<ackgr>ound&<quot;@color/md_theme_dark_>onBackground/item
    item nam<e=&qu>ot;colorSu<rface&>q<uot;@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_pri>mary&qu<ot;#67>50A<4/color
  color name="md_theme_l>ight_on<Primar>y&q<uot;#FFFFFF/color
  color name="md_them>e_light<_prima>ryC<ontainer"#EADDFF/color
  color name=">;md_the<me_lig>ht_<onPrimaryContainer"#21005D/c>olor
  <color >nam<e="md_theme_light_error"#>B3261E/<color
>  c<olor name="md_theme_light_onError&quo>t;#FFFF<FF/col>or
<  color name="md_theme_light_errorConta>iner&qu<ot;#F9>DED<C/color
  color name="md_theme>_light_<onErro>rCo<ntainer"#410E0B/color
  color na>me=&quo<t;md_t>hem<e_light_surface"#FFFBFE/color
  color> name=&<quot;m>d_t<heme_light_onSurface"#1C1B1F/>color
 < color na<me="md_theme_light_surfaceVaria>nt"<;#E7E0>EC/<color
  color name="md_theme_dark_prim>ary&quo<t;#D0B>CFF</color
  color name="md_theme_dark_onPri>mary&qu<ot;#38>1E7<2/color
  color name="md_theme_>dark_pr<imaryC>ont<ainer"#4F378B/color
  color name=>"m<d_them>e_d<ark_onPrimaryContainer"#EADDFF/color
  c>olor na<me=&qu>ot;<md_theme_dark_secondary"#CCC2DC>/color
<  colo>r n<ame="md_theme_dark_onSecondary">#332D41</color>
<  color na>me="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.Lig>ht.NoActionBar"
<        ...
        i>tem name="hom<e_lam>p"@color/home_<yellow>/<item
     >     ...
    /style
/resources

Colors.xml
<resources>
   <color name="home_ye>llow&qu<ot;#E8>D<655/color
>/resources

یا می‌توانید از «سازنده زمینه Material» برای وارد کردن رنگ‌های اضافی استفاده کنید که طرح رنگ شما را گسترش می‌دهد و درنتیجه سیستم رنگ یکپارچه‌ای ایجاد می‌کند. با این گزینه، از HarmonizedColors برای تغییر دادن رنگ‌های سفارشی استفاده کنید. این کار هنگام ترکیب با رنگ‌های تولیدشده توسط کاربر، به تعادل دیداری و کنتراست دسترس‌پذیر دست می‌یابد. این خطا در زمان اجرا با applyToContextIfAvailable() رخ می‌دهد.

شکل ۶. مثالی از هماهنگ‌سازی رنگ‌های سفارشی

راهنمای Material 3 درباره هماهنگ‌سازی رنگ‌های سفارشی را ببینید.

«رنگ پویا» را روی نمادهای تطبیق‌پذیر و ابزارک‌ها اعمال کنید

علاوه‌بر فعال کردن زمینه‌سازی «رنگ پویا» در برنامه‌تان، می‌توانید از زمینه‌سازی «رنگ پویا» برای ابزارک‌ها در Android 12 و برای نمادهای تطبیقی در Android 13 نیز پشتیبانی کنید.