نمادهای تطبیقی

یک آیکون تطبیقی ​​یا AdaptiveIconDrawable می‌تواند بسته به قابلیت‌های دستگاه و قالب‌بندی کاربر، به شکل‌های مختلفی نمایش داده شود. آیکون‌های تطبیقی ​​در درجه اول توسط لانچر در صفحه اصلی استفاده می‌شوند، اما می‌توانند در میانبرها، برنامه تنظیمات، پنجره‌های اشتراک‌گذاری و صفحه نمای کلی نیز استفاده شوند. آیکون‌های تطبیقی ​​در تمام فرم‌فکتورهای اندروید استفاده می‌شوند.

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

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

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

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

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

  • تم‌بندی کاربر: از اندروید ۱۳ (سطح API ۳۳)، کاربران می‌توانند آیکون‌های تطبیقی ​​خود را تم‌بندی کنند. اگر کاربر آیکون‌های برنامه با تم را در تنظیمات سیستم خود فعال کند و لانچر از این ویژگی پشتیبانی کند، سیستم از رنگ‌آمیزی تصویر زمینه و تم انتخابی کاربر برای تعیین رنگ سایه آیکون‌های برنامه برای برنامه‌هایی که دارای لایه monochrome در آیکون تطبیقی ​​خود هستند، استفاده می‌کند. از اندروید ۱۶ QPR 2، اندروید به طور خودکار آیکون‌های برنامه را برای برنامه‌هایی که لایه تک رنگ خود را ارائه نمی‌دهند، تم‌گذاری می‌کند.

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

    در سناریوهای زیر، صفحه اصلی آیکون برنامه با تم خاص را نمایش نمی‌دهد و در عوض آیکون برنامه تطبیقی ​​یا استاندارد را نمایش می‌دهد:

    • اگر کاربر آیکون‌های برنامه با تم را فعال نکند.
    • اگر برنامه شما آیکون تک رنگ ندارد و دستگاه کاربر روی نسخه قدیمی‌تر اندروید نسبت به اندروید ۱۶ (QPR 2) اجرا می‌شود.
    • اگر لانچر از آیکون‌های برنامه با تم پشتیبانی نمی‌کند.

طراحی آیکون‌های تطبیقی

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

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

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

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

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

  • اندازه همه لایه‌ها را به 108x108 dp تغییر دهید.

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

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

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

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

آیکون تطبیقی ​​خود را به برنامه خود اضافه کنید

آیکون‌های تطبیقی، درست مانند آیکون‌های غیر تطبیقی، با استفاده از ویژگی 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های جداگانه ایجاد کنید.

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

<?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() را فراخوانی کنید.

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

منابع اضافی

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

قبلی
تست برگشت پیشگو
بعدی
حباب ها