رموز التطبيقات التكيُّفية

يمكن عرض الرمز التكيُّفي، أو AdaptiveIconDrawable، بشكل مختلف استنادًا إلى إمكانات الجهاز الفردية وتصميم المستخدم. يستخدم مشغِّل التطبيقات على الشاشة الرئيسية الأيقونات التكيُّفية بشكل أساسي، ولكن يمكن استخدامها أيضًا في الاختصارات وتطبيق "الإعدادات" ومربعات حوار المشاركة وشاشة النظرة العامة. يتم استخدام الرموز التكيُّفية في جميع أشكال الأجهزة التي تعمل بنظام التشغيل Android.

على عكس صور الصور النقطية، يمكن أن تتكيف الرموز التكيُّفية مع حالات الاستخدام المختلفة:

  • الأشكال المختلفة: يمكن أن يعرض الرمز التكيُّفي مجموعة متنوعة من الأشكال على مستوى طُرز الأجهزة المختلفة. على سبيل المثال، يمكن للجهاز عرض شكل دائري على أحد أجهزة المصنّع الأصلي للجهاز، وعرض مربع (شكل بين مربّع ودائرة) على جهاز آخر. يجب أن يوفر كل مُصنّع أصلي للجهاز قناعًا يستخدمه النظام لعرض جميع الرموز التكيُّفية بالشكل نفسه.

    ملف GIF يعرض رسمًا متحركًا متكررًا لعيّنة رمز Android نفسها،
ويعرض أشكالاً مختلفة استنادًا إلى القناع المستخدَم، أي دائرة ثم نوعان مختلفان من الأشكال المضيئة.
    الشكل 1. تدعم الأيقونات التكيُّفية مجموعة متنوعة من الأقنعة، والتي تختلف من جهاز إلى آخر.
  • التأثيرات المرئية: يتيح الرمز التكيُّفي استخدام مجموعة متنوعة من المؤثرات المرئية الجذابة التي تظهر عندما يضع المستخدمون الرمز أو يتحركونه حول الشاشة الرئيسية.

    ملف GIF يعرض أمثلة لرموز Android على شكل دائرة،
متحركًا لإظهار استجابة المستخدم يعرض الأيقونة الأول شعار Android وهو يتأرجح
لليسار ثم اليمين، ثم لأعلى ولأسفل داخل الدائرة. تتوسع الأيقونة الثانية
ثم تتقلص مرة أخرى.
    الشكل 2. أمثلة على التأثيرات المرئية التي يتم عرضها بواسطة أيقونة تكيّفية.
  • اختيار سمات المستخدمين حسب المواضيع: بدءًا من Android 13 (المستوى 33 لواجهة برمجة التطبيقات)، يمكن للمستخدمين اختيار تصاميم لرموزهم التكيُّفية. إذا فعّل المستخدم رموز تطبيقات مستوحاة من موضوع معيّن، من خلال تفعيل خيار الرموز المستوحاة من موضوع معيّن في إعدادات النظام، وكان مشغّل التطبيقات يتيح هذه الميزة، يستخدم النظام تلوين الخلفية والمظهر اللذين اختارهما المستخدم لتحديد درجة اللون.

    صورة تعرض أمثلة لثلاثة أجهزة Android تعرض كل منها مظهرًا مختلفًا للمستخدم بدرجات ألوان مختلفة: تعرض الصورة الأولى خلفية بألوان داكنة، بينما تعرض الصورة الثانية خلفية ذهبية اللون، والثالثة تعرض خلفية باللون الرمادي الفاتح مع خلفية ملوّنة باللون الأزرق. في كل مثال، توارثت الأيقونات
تلوين الخلفية ودمجها بشكل مثالي.
    الشكل 3. الأيقونات التكيُّفية التي تكتسب من خلفية المستخدم ومظاهره.

    في السيناريوهات التالية، لا تعرض الشاشة الرئيسية رمز التطبيق المستوحى من مظهره، بل تعرض بدلاً من ذلك رمز التطبيق التكيُّفي أو القياسي:

    • إذا لم يفعّل المستخدم رموز التطبيقات المستوحاة من موضوع معيّن
    • إذا كان تطبيقك لا يعرض رمز تطبيق أحادي اللون.
    • إذا كان مشغّل التطبيقات لا يتوافق مع رموز التطبيقات المستوحاة من موضوع معيّن

تصميم الأيقونات التكيُّفية

للتأكد من أن الأيقونة التكيُّفية تدعم الأشكال والتأثيرات المرئية ومواضيع المستخدم المختلفة، يجب أن يفي التصميم بالمتطلبات التالية:

  • يجب عليك توفير طبقتين لإصدار اللون من الرمز: إحداهما للمقدمة والأخرى للخلفية. يمكن أن تكون الطبقات إما متجهات أو صور نقطية، على الرغم من تفضيل المتجهات.

    صورة تعرض مثالاً لطبقة مقدمة (الصورة اليسرى) وطبقة خلفية (الصورة اليمنى). تعرض المقدّمة رمزًا من 16 جانبًا لنموذج شعار Android
يظهر في منطقة آمنة بحجم 66x66. تتمركز المنطقة الآمنة
داخل حاوية 108×108. تعرض الخلفية الأبعاد نفسها التي تم قياسها للمنطقة الآمنة والحاوية، ولكنّها مجرد خلفية زرقاء وبدون شعار.
    الشكل 4. يتم تحديد الأيقونات التكيُّفية باستخدام طبقتي المقدمة والخلفية. المنطقة الآمنة مقاس 66x66 المعروضة هي المنطقة التي لا يتم اقتصاصها مطلقًا باستخدام قناع على شكل قناع يحدده المصنّع الأصلي.
    صورة تعرض الرمز من الصورة السابقة مركَّبة على قناع دائري.
    الشكل 5. مثال على كيف تبدو طبقات المقدمة والخلفية معًا مع تطبيق قناع دائري.
  • إذا كنت ترغب في إتاحة سمات المستخدمين الخاصة برموز التطبيقات، فقم بتوفير طبقة واحدة للإصدار الأحادي اللون من الأيقونة.

    صورة تعرض مثالاً لطبقة رمز أحادية اللون (الصورة اليسرى)
ومعاينات الألوان (الصورة اليمنى). تعرض الطبقة الأحادية اللون الرمز المكوَّن من 16 جانبًا لنموذج شعار Android في وسط منطقة آمنة بحجم 66x66. ويتم وضع المنطقة الآمنة في وسط حاوية بحجم 108×108. تُظهر معاينات الألوان هذه الطبقة عند تطبيقها على مظاهر المستخدم ذات الألوان المختلفة (البرتقالي والوردي والأصفر والأخضر).
    الشكل 6. طبقة أيقونة أحادية اللون (اليسار) مع أمثلة على معاينات الألوان (إلى اليمين).
  • اضبط حجم جميع الطبقات على 108x108 وحدة بكسل مستقلة الكثافة.

  • استخدم أيقونات ذات حواف نظيفة. يجب ألا تحتوي الطبقات على أقنعة أو ظلال خلفية حول مخطط الأيقونة.

  • استخدِم شعارًا لا يقل حجمه عن 48x48 وحدة بكسل مستقلة الكثافة. ويجب ألا يتجاوز حجمه 66x66 وحدة بكسل مستقلة الكثافة، لأنّه بحجم 66x66 وحدة بكسل مستقلة الكثافة للرمز يظهر في إطار العرض المقنَّع.

يتم تخصيص 18 وحدة بكسل مستقلة الكثافة (dp) على كل جانب من الجوانب الأربعة للطبقات للإخفاء وإنشاء تأثيرات بصرية مثل المنظر أو الوميض.

لمعرفة كيفية إنشاء رموز تكيّفية باستخدام "استوديو Android"، يمكنك الاطّلاع على نموذج Figma لرمز تطبيق Android أو مستندات "استوديو Android" لإنشاء رموز مشغّل التطبيقات. يمكنك أيضًا الاطّلاع على مشاركة المدونة Designing Adaptive Icons .

إضافة الرمز التكيُّفي إلى تطبيقك

يتم تحديد الرموز التكيُّفية، تمامًا مثل الرموز غير التكيفية، باستخدام السمة 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" />

    // Starting with Android 13 (API level 33), you can opt-in to providing a
    // <monochrome> drawable.
    <monochrome android:drawable="@drawable/ic_launcher_monochrome" />
</adaptive-icon>
...

يمكنك أيضًا تعريف العناصر القابلة للرسم كعناصر من خلال تضمينها في العناصر <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() عند إنشائها.

لمزيد من المعلومات حول تنفيذ الرموز التكيُّفية، يُرجى الاطّلاع على تنفيذ الرموز التكيُّفية. لمزيد من المعلومات حول الاختصارات، يُرجى الاطّلاع على نظرة عامة على اختصارات التطبيقات.

مصادر إضافية

راجع الموارد التالية للحصول على معلومات إضافية حول تصميم وتنفيذ أيقونات تكيّفية.