نمادهای تطبیق‌پذیر

سرصفحه نمادهای تطبیق‌پذیر

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

برخلاف تصاویر بیت‌مپ، نمادهای تطبیق‌پذیر می‌توانند با موارد استفاده مختلف سازگار شوند:

  • شکل‌های مختلف: نماد تطبیق‌پذیر می‌تواند شکل‌های مختلفی را در مدل‌های مختلف دستگاه نمایش دهد. برای مثال، می‌تواند شکل دایره‌ای را در یک دستگاه سازنده اصلی محصول و شکل مربع با گوشه‌های گرد (شکلی بین مربع و دایره) را در دستگاه دیگری نمایش دهد. هر سازنده اصلی دستگاه باید ماسکی ارائه دهد که سیستم از آن برای ارائه همه نمادهای تطبیق‌پذیر با شکل یکسان استفاده می‌کند.

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

  • جلوه‌های دیداری: نماد تطبیق‌پذیر از انواع جلوه‌های دیداری جذاب پشتیبانی می‌کند که وقتی کاربران نماد را در صفحه اصلی قرار می‌دهند یا جابه‌جا می‌کنند نمایش داده می‌شود.

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

  • زمینه کاربر: از Android 13 (سطح میانای برنامه‌سازی کاربردی ۳۳)، کاربران می‌توانند نمادهای تطبیق‌پذیر خود را زمینه‌بندی کنند. اگر کاربری نمادهای برنامه زمینه‌دار را در تنظیمات سیستم خود فعال کند و راه‌انداز از این ویژگی پشتیبانی کند، سیستم از رنگ کاغذدیواری و زمینه انتخابی کاربر برای تعیین رنگ نمادهای برنامه برای برنامه‌هایی که لایه monochrome در نماد تطبیق‌پذیر خود دارند استفاده می‌کند. از Android 16 QPR 2،‏ Android به‌طور خودکار نمادهای برنامه را برای برنامه‌هایی که نماد خودشان را ارائه نمی‌دهند، زمینه‌دار می‌کند.

    نمونه‌ای از سه دستگاه Android که هرکدام زمینه کاربر متفاوتی را با ته‌رنگ‌های متفاوت نشان می‌دهند: اولی کاغذدیواری‌ای با ته‌رنگ تیره را نشان می‌دهد؛ دومی کاغذدیواری‌ای با ته‌رنگ طلایی را نشان می‌دهد؛ سومی کاغذدیواری‌ای با ته‌رنگ خاکستری روشن با ته‌رنگ‌های مایل به آبی را نشان می‌دهد. در هر نمونه، نمادها رنگ کاغذدیواری را به ارث برده‌اند و کاملاً با آن ترکیب شده‌اند.
    شکل ۳. نمادهای تطبیق‌پذیر که از کاغذدیواری و زمینه‌های کاربر ارث‌بری می‌کنند.

    در سناریوهای زیر، صفحه اصلی نماد برنامه با زمینه را نمایش نمی‌دهد و به‌جای آن نماد برنامه تطبیقی یا استاندارد را نمایش می‌دهد:

    • اگر کاربر نمادهای موضوعی برنامه را فعال نکند.
    • اگر برنامه‌تان نماد برنامه تک‌رنگ ارائه نمی‌دهد و دستگاه کاربر نسخه قدیمی‌تر از Android 16 QPR 2 را اجرا می‌کند.
    • اگر راه‌انداز از نمادهای موضوعی برنامه پشتیبانی نکند.

طراحی نمادهای تطبیق‌پذیر

برای اطمینان از اینکه نماد تطبیق‌پذیر شما از شکل‌های مختلف، جلوه‌های دیداری، و زمینه کاربر پشتیبانی می‌کند، طراحی باید الزامات زیر را برآورده کند:

  • باید دو لایه برای نسخه رنگی نماد ارائه دهید: یکی برای پیش‌زمینه و یکی برای پس‌زمینه. لایه‌ها می‌توانند برداری یا بیت‌مپ باشند، هرچند برداری ترجیح داده می‌شود.

    نمونه‌ای از لایه پیش‌زمینه (چپ) و لایه پس‌زمینه (راست). پیش‌زمینه نماد ۱۶ ضلعی نشان‌واره نمونه Android را نشان می‌دهد که در مرکز منطقه ایمن ۶۶×۶۶ قرار دارد. منطقه ایمن در مرکز یک محفظه ۱۰۸×۱۰۸ قرار دارد. پس‌زمینه همان ابعاد اندازه‌گیری‌شده را برای منطقه امن و محفظه نشان می‌دهد، اما فقط پس‌زمینه آبی است و نشان‌واره‌ای وجود ندارد.
    شکل ۴. نمادهای تطبیق‌پذیر بااستفاده از لایه‌های پیش‌زمینه و پس‌زمینه تعریف شده‌اند. منطقه امن ۶۶×۶۶ نشان‌داده‌شده منطقه‌ای است که هرگز توسط ماسک شکل‌دار تعریف‌شده توسط OEM برش داده نمی‌شود.
    نمونه‌ای که نماد شکل قبلی را نشان می‌دهد که روی ماسک دایره‌ای قرار گرفته است.
    شکل ۵. نمونه‌ای از ظاهر لایه‌های پیش‌زمینه و پس‌زمینه با ماسک دایره‌ای اعمال‌شده.

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

    نمونه‌ای از لایه نماد تک‌رنگ (سمت راست) و پیش‌نمایش‌های رنگی (سمت چپ). لایه تک‌رنگ نماد ۱۶ ضلعی نمونه نشان‌واره Android را نشان می‌دهد که در مرکز منطقه ایمن ۶۶×۶۶ قرار دارد. منطقه امن در مرکز یک محفظه ۱۰۸×۱۰۸ قرار دارد. پیش‌نمایش‌های رنگی نشان می‌دهند که این لایه هنگام اعمال شدن روی زمینه‌های کاربر با رنگ‌های مختلف (نارنجی، صورتی، زرد، و سبز) چگونه نمایش داده می‌شود.
    شکل ۶. لایه نماد تک‌رنگ (سمت راست) با نمونه‌هایی از پیش‌نمایش رنگ (سمت چپ).

  • اندازه همه لایه‌ها را به ۱۰۸×۱۰۸ پیکسل مستقل از تراکم تغییر دهید.

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

  • از نشان‌واره‌ای استفاده کنید که حداقل ۴۸×۴۸ پیکسل مستقل از تراکم باشد. نباید از ۶۶×۶۶ dp بیشتر باشد، زیرا ۶۶×۶۶ dp داخلی نماد در نمای هدف پوشانده‌شده ظاهر می‌شود.

‫۱۸ پیکسل مستقل از تراکم بیرونی در هریک از چهار طرف لایه‌ها برای پوشاندن و ایجاد جلوه‌های دیداری مانند اختلاف منظر یا تپش رزرو شده است.

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

افزودن نماد تطبیق‌پذیر به برنامه

نمادهای تطبیق‌پذیر، درست مانند نمادهای غیرتطبیق‌پذیر، بااستفاده از ویژگی android:icon در مانیفست برنامه مشخص می‌شوند.

مشخصه اختیاری android:roundIcon توسط راه‌اندازهایی استفاده می‌شود که برنامه‌ها را با نمادهای دایره‌ای نشان می‌دهند و اگر نماد برنامه‌تان شامل پس‌زمینه دایره‌ای به‌عنوان بخش اصلی طراحی آن باشد، ممکن است مفید باشد. چنین راه‌اندازهایی باید با اعمال ماسک دایره‌ای به android:roundIcon، نماد برنامه تولید کنند و این تضمین ممکن است به شما امکان دهد ظاهر نماد برنامه‌تان را بهینه‌سازی کنید، مثلاً با کمی بزرگ‌تر کردن نشان‌واره و اطمینان از اینکه هنگام برش، پس‌زمینه دایره‌ای کاملاً لب‌به‌لب باشد.

تکه‌کد زیر هر دو این مشخصه‌ها را نشان می‌دهد، اما اکثر برنامه‌ها فقط android:icon را مشخص می‌کنند:

<application
    ...
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    ...>
</application>

سپس، نماد تطبیقی‌تان را در res/mipmap-anydpi-v26/ic_launcher.xml ذخیره کنید. از عنصر <adaptive-icon> برای تعریف منابع لایه تک‌رنگ، پس‌زمینه، و پیش‌زمینه برای نمادهایتان استفاده کنید. عناصر داخلی <foreground>، <background>، و <monochrome> از هر دو تصویر برداری و بیت‌مپ پشتیبانی می‌کنند.

مثال زیر نحوه تعریف عناصر <foreground>، <background>، و <monochrome> را در داخل <adaptive-icon> نشان می‌دهد:

<?xml version="1.0" encoding="utf-8"?>
...
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@drawable/ic_launcher_background" />
    <foreground android:drawable="@drawable/ic_launcher_foreground" />
    <monochrome android:drawable="@drawable/ic_launcher_foreground" />
</adaptive-icon>
...

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

همچنین می‌توانید با درخط کردن موارد ترسیم‌شدنی در عناصر <foreground>، <background>، و <monochrome>، آن‌ها را به‌عنوان عنصر تعریف کنید. قطعه کد زیر نمونه‌ای از انجام این کار با پیش‌نما را نشان می‌دهد.

<?xml version="1.0" encoding="utf-8"?>
...
<foreground>
   <inset
       android:insetBottom="18dp"
       android:insetLeft="18dp"
       android:insetRight="18dp"
       android:insetTop="18dp">
       <shape android:shape="oval">
           <solid android:color="#0000FF" />
       </shape>
   </inset>
</foreground>
...

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

  • برای میان‌برهای ایستا، از عنصر <adaptive-icon> استفاده کنید.
  • برای میان‌برهای پویا، هنگام ایجاد آن‌ها، روش createWithAdaptiveBitmap() را فراخوانی کنید.

برای اطلاعات بیشتر درباره پیاده‌سازی نمادهای تطبیقی، به پیاده‌سازی نمادهای تطبیقی مراجعه کنید. برای اطلاعات بیشتر درباره میان‌برها، به نمای کلی میان‌برهای برنامه مراجعه کنید.

منابع بیشتر

برای اطلاعات بیشتر درباره طراحی و پیاده‌سازی نمادهای تطبیق‌پذیر، منابع زیر را ببینید.

قبلی
پیاده‌سازی روال‌های مطلوب برای میان‌برها
بعدی
Remote Compose