رموز علامات التبويب

أيقونات علامات التبويب هي عناصر رسومية تُستخدم لتمثيل علامات التبويب الفردية في واجهة متعددة علامات التبويب. لكل رمز علامة تبويب حالتان: غير محدد ومحدد.

كما هو موضّح في توفير مجموعات الرموز الخاصة بالكثافة، يجب إنشاء مجموعات رموز منفصلة للشاشات ذات الكثافة المنخفضة والمتوسطة والعالية الكثافة. يضمن ذلك عرض الرموز بشكل صحيح عبر نطاق الأجهزة التي يمكن تثبيت تطبيقك عليها. راجع نصائح للمصممين للحصول على اقتراحات حول كيفية العمل مع مجموعات متعددة من الرموز.

يجب تصدير العمل الفني النهائي كملف PNG شفاف. عدم تضمين لون للخلفية.

تتوفر نماذج إنشاء الرموز في Adobe Photoshop في Icon Templates Pack.

تحذير: تغيّر نمط رموز علامات التبويب بشكل كبير في Android 2.0 مقارنةً بالإصدارات السابقة. لتوفير الدعم لجميع إصدارات Android، على المطوّرين تنفيذ ما يلي:
1. وضع رموز علامة تبويب للإصدار 2.0 من نظام التشغيل Android والإصدارات الأحدث في أدلة drawable-hdpi-v5 وdrawable-mdpi-v5 وdrawable-ldpi-v5
2- وضع رموز علامة التبويب للإصدارات السابقة في أدلة drawable-hdpi وdrawable-mdpi وdrawable-ldpi
3- اضبط android:targetSdkVersion على 5 أو أعلى في <uses-sdk> في بيان التطبيق. سيُعلم هذا النظام بوجوب عرض علامات التبويب باستخدام نمط علامة التبويب الجديد.

توفير رموز لحالات علامتي تبويب

يجب أن تحتوي رموز علامات التبويب على حالتين: غير محددة ومحددة. لتوفير رموز ذات حالات متعددة، على المطوّرين إنشاء قائمة حالة قابلة للرسم لكل رمز، وهو عبارة عن ملف XML يعرض الصورة المطلوب استخدامها لحالات واجهة المستخدم المختلفة.

على سبيل المثال، بالنسبة إلى أداة علامة تبويب تحتوي على علامتي تبويب باسم "الأصدقاء" و"زملاء العمل"، يمكنك استخدام بنية دليل مشابهة للبنية التالية:

res/...
    drawable/...
        ic_tab_friends.xml
        ic_tab_coworkers.xml
    drawable-ldpi/...
        ic_tab_friends_selected.png
        ic_tab_friends_unselected.png
        ic_tab_coworkers_selected.png
        ic_tab_coworkers_unselected.png
    drawable-mdpi/...
        ic_tab_friends_selected.png
        ic_tab_friends_unselected.png
        ic_tab_coworkers_selected.png
        ic_tab_coworkers_unselected.png
    drawable-hdpi/...
        ...
    drawable-ldpi-v5/...
        ...
    drawable-mdpi-v5/...
        ...
    drawable-hdpi-v5/...
        ...

يجب أن يشير محتوى ملفات XML المدرجة أعلاه إلى عناصر رسم الرموز المحددة وغير المحددة المقابلة. على سبيل المثال، في ما يلي رمز ic_tab_friends.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- selected state -->
    <item android:drawable="@drawable/ic_tab_friends_selected"
          android:state_selected="true"
          android:state_pressed="false" />
    <!-- unselected state (default) -->
    <item android:drawable="@drawable/ic_tab_friends_unselected" />
</selector>

الإصدارات من Android 2.0 إلى Android 2.3

تصف الإرشادات التالية كيفية تصميم رموز علامات التبويب لنظام التشغيل Android 2.0 حتى Android 2.3 (مستويات واجهة برمجة التطبيقات من 5 إلى 10).

الحجم والمكانة

يجب أن تستخدم أيقونات علامات التبويب أشكالاً ونماذج بسيطة ويجب قياسها ووضعها داخل مادة العرض النهائية.

يوضّح الشكل 1 طرقًا مختلفة لوضع الرمز داخل مادة العرض. يجب ضبط حجم الرموز على أصغر من الحدود الفعلية لمادة العرض.

للإشارة إلى الحجم الموصى به للأيقونة، يتضمن كل مثال في الشكل 1 ثلاثة مستطيلات مختلفة للدليل:

• إنّ المربّع الأحمر هو المربّع المحيط بمادة العرض بالكامل.
• المربع الأزرق هو مربع الإحاطة الموصى به للرمز الفعلي. يكون حجم مربع الرموز أصغر من حجم مربع مواد العرض الكامل للسماح بمعالجات خاصة للأيقونات.
• يمثل المربع البرتقالي مربع الإحاطة الموصى به للأيقونة الفعلية عندما يكون المحتوى مربعًا. مربع الأيقونات المربع أصغر من مربع الأيقونات الأخرى لإنشاء وزن مرئي متناسق عبر النوعين.

أبعاد رمز علامة التبويب للشاشات عالية الكثافة (hdpi): مادة العرض الكاملة: 48 × 48 بكسل الرمز: 42 × 42 بكسل
أبعاد رمز علامة التبويب للشاشات المتوسطة الكثافة (mdpi): مادة العرض الكاملة: 32 × 32 بكسل الرمز: 28 × 28 بكسل
أبعاد رمز علامة التبويب للشاشات المنخفضة الكثافة (ldpi): مادة العرض الكاملة: 24 × 24 بكسل الرمز: 22 × 22 بكسل
	الشكل 1. يمكنك تغيير حجم رمز علامة التبويب وتحديد موضعه داخل حدود مادة عرض الرمز.

الأنماط والألوان والتأثيرات

رموز علامات التبويب مسطحة وغير لامعة ومصوّرة وجهًا لوجه.

يجب أن تحتوي رموز علامات التبويب على حالتين: محددة وغير محددة.

الشكل 2. الأنماط والتأثيرات لرموز علامات التبويب غير المحددة. ملاحظة: جميع أبعاد البكسل للكثافة المتوسطة ويجب قياسها بشكل مناسب للكثافات الأخرى. 1. لون التعبئة: #808080 2. المحتوى الداخلي: يجب أن يطرح المحتوى الداخلي من الشكل الخارجي وأن يتكون فقط من وحدات بكسل شفافة.

الشكل 3. الأنماط والتأثيرات لرموز علامات التبويب المحددة. ملاحظة: جميع أبعاد البكسل للكثافة المتوسطة ويجب قياسها بشكل مناسب للكثافات الأخرى. 1. لون التعبئة: #FFFFFF 2. المحتوى الداخلي: يجب أن يطرح المحتوى الداخلي من الشكل الخارجي وأن يتكون فقط من وحدات بكسل شفافة. 3. اللمعان الخارجي: #000000، تعتيم بنسبة 25% حجم 3 بكسل

الإجراءات المسموح بها وغير المسموح بها

فيما يلي بعض أمثلة "افعل ولا تفعل" التي يجب مراعاتها عند إنشاء أيقونات علامات التبويب لتطبيقك.

أمثلة على الرموز

يظهر أدناه رموز علامات تبويب قياسية عالية الكثافة يتم استخدامها في نظام Android الأساسي.

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

Android 1.6 والإصدارات الأقدم

تشرح الإرشادات التالية كيفية تصميم رموز علامات التبويب لنظام التشغيل Android 1.6 (المستوى 4 لواجهة برمجة التطبيقات) والإصدارات الأقدم.

التركيبة

• رموز علامات التبويب غير المحددة لها نفس تدرج التعبئة والتأثيرات مثل رموز القوائم، ولكنها بدون توهج خارجي.
• تشبه رموز علامات التبويب المحددة رموز علامات التبويب غير المحددة، ولكن بظل داخلي خافت ولها نفس تدرج الجزء الأمامي مثل رموز الحوار.
• تحتوي أيقونات علامات التبويب على إطار آمن مقاس 1 بكسل يجب أن يتداخل فقط مع حافة الاسم المستدير للشكل المستدير.
• تستند جميع الأبعاد المحددة في هذه الصفحة إلى حجم اللوحة الفنية 32x32 بكسل. حافظ على ترك مساحة بمقدار 1 بكسل حول مربع الإحاطة داخل نموذج Photoshop.

	الشكل 3. إطار آمن وتدرج تعبئة لرموز علامات التبويب غير المحددة حجم الرمز هو 32x32.
	الشكل 4. يمكنك استخدام إطار آمن وتعبئة تدرج لرموز علامات التبويب في الحالة المحددة. حجم الرمز هو 32x32.

رمز علامة تبويب غير محدّدة

الإضاءة والتأثيرات والظلال

تبدو أيقونات علامات التبويب غير المحددة مثل أيقونات علامات التبويب المحددة، ولكن بظل داخلي خافت وتدرج الجزء الأمامي نفسه مثل أيقونات مربعات الحوار.

الشكل 5. الإضاءة والتأثيرات والتظليل لرموز علامات التبويب غير المحددة 1. الجزء الأمامي: تركيب التدرج | الزاوية 90 درجة لون الجزء السفلي: r 223 | g 223 | b 223 اللون العلوي: r 249 | g 249 | b 249 موقع اللون السفلي: 0% موقع اللون العلوي: 75% 2. الظل الداخلي: أسود | تعتيم بنسبة % 10 | زاوية 90 درجة مسافة 2 بكسل | الحجم 2 بكسل 3. الميل الداخلي: العمق 1% | الاتجاه لأسفل | الحجم 0 بكسل | الزاوية 90 درجة | الارتفاع 10° تمييز اللون الأبيض تعتيم بنسبة 70% تعتيم أسود الظل بنسبة 25%

الخطوات التفصيلية أنشئ الأشكال الأساسية باستخدام أداة مثل Adobe Illustrator. استورِد الشكل إلى أداة مثل Adobe Photoshop واختَر مقياسًا ليلائم صورة بحجم 32×32 بكسل على خلفية شفافة. أضف التأثيرات التي تظهر في الشكل 5 لفلتر الحالة غير المحدد. قم بتصدير الرمز بحجم 32×32 كملف PNG مع تفعيل الشفافية.

رمز علامة التبويب التي تم اختيارها

لأيقونات علامة التبويب المحددة نفس تدرج التعبئة والتأثيرات مثل أيقونة القائمة، ولكن بدون توهج خارجي.

الشكل 6. الإضاءة والتأثيرات والتظليل لرموز علامات التبويب المحدّدة 1. الجزء الأمامي: استخدام تدرج التعبئة من لوحة الألوان 2. الظل الداخلي: أسود | تعتيم بنسبة% 20 | زاوية 90 درجة | المسافة 2 بكسل | حجم 2 بكسل 3. الميل الداخلي: العمق 1% | الاتجاه لأسفل | الحجم 0 بكسل | الزاوية 90 درجة | ارتفاع 10 درجة تمييز اللون الأبيض تعتيم بنسبة 70% تعتيم أسود الظل بنسبة 25%

لوحة الألوان تدرّج التعبئة 1:  r 163 | g 163 | b 163 2:  r 120 | g 120 | b 120 يُستخدم كتعبئة بالألوان في رموز علامات التبويب غير المحددة.

الخطوات التفصيلية أنشئ الشكل الأساسي باستخدام أداة مثل Adobe Illustrator. قم باستيراد الشكل إلى أداة مثل Adobe Photoshop وحجمه ليناسب لوحة فنية بحجم 32x32 بكسل بخلفية شفافة. أضف التأثيرات التي تظهر في الشكل 6 لفلتر الحالة المحدد. قم بتصدير الرمز بحجم 32×32 كملف PNG مع تفعيل الشفافية.