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

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

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

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

تتوفر نماذج إنشاء الرموز في Adobe Photoshop في رمز حزمة "النماذج".

تحذير: لقد تغير نمط أيقونات علامات التبويب تغييرًا جذريًا في 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 بكسل يجب أن يتداخل فقط عند الحافة للشكل المستدير.
• تستند جميع الأبعاد المحددة في هذه الصفحة إلى حجم اللوحة الفنية 32×32 بكسل. احتفظ بمساحة 1 بكسل من المساحة المتروكة حول مربع الإحاطة داخل نموذج Photoshop.

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

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

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

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

الشكل 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% تعتيم

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

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

الشكل 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، واضبط الحجم ليلائم حجم 32×32. لوحة فنية بتنسيق px بخلفية شفافة. أضف التأثيرات التي تظهر في الشكل 6 لفلتر الحالة المحدد. قم بتصدير الأيقونة بحجم 32×32 كملف PNG مع تمكين الشفافية.