نمادهای برگه

نمادهای برگه عناصر گرافیکی هستند که برای نشان دادن برگه های جداگانه در یک رابط چند تب استفاده می شوند. هر نماد برگه دارای دو حالت است: انتخاب نشده و انتخاب شده.

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

هنر نهایی باید به عنوان یک فایل PNG شفاف صادر شود. از رنگ پس زمینه استفاده نکنید .

الگوهای ایجاد آیکون در Adobe Photoshop در بسته قالب آیکون موجود است.

هشدار: سبک آیکون های تب در اندروید 2.0 نسبت به نسخه های قبلی به شدت تغییر کرده است. برای ارائه پشتیبانی از همه نسخه‌های اندروید ، توسعه‌دهندگان باید:
1. نمادهای برگه را برای اندروید 2.0 و بالاتر در فهرست راهنمای 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>

اندروید 2.0 تا اندروید 2.3

دستورالعمل های زیر نحوه طراحی نمادهای برگه برای Android 2.0 تا Android 2.3 (سطح API 5 تا 10) را شرح می دهد.

اندازه و موقعیت

نمادهای برگه باید از اشکال و اشکال ساده استفاده کنند و آن‌ها باید مقیاس‌بندی شده و در داخل دارایی نهایی قرار گیرند.

شکل 1 روش های مختلف قرار دادن نماد در داخل دارایی را نشان می دهد. شما باید اندازه نمادها را کوچکتر از محدوده واقعی دارایی کنید .

به منظور نشان دادن اندازه توصیه شده برای نماد، هر نمونه در شکل 1 شامل سه مستطیل راهنمای مختلف است:

• کادر قرمز، کادر محدود کننده دارایی کامل است.
• کادر آبی، کادر محدود کننده پیشنهادی برای نماد واقعی است. اندازه جعبه نماد کوچکتر از جعبه دارایی کامل است تا امکان استفاده از نمادهای ویژه را فراهم کند.
• وقتی محتوا مربع است، کادر نارنجی، کادر محدود کننده پیشنهادی برای نماد واقعی است. جعبه نمادهای مربعی کوچکتر از سایر نمادها است تا وزن بصری ثابتی را در بین این دو نوع ایجاد کند.

ابعاد نماد برگه برای صفحات با چگالی بالا ( hdpi ): دارایی کامل: 48 x 48 پیکسل نماد: 42 x 42 px
ابعاد نماد برگه برای صفحات با چگالی متوسط ​​( mdpi ): دارایی کامل: 32 x 32 پیکسل نماد: 28 x 28 پیکسل
ابعاد نماد برگه برای صفحات با چگالی کم ( ldpi ): دارایی کامل: 24 x 24 پیکسل نماد: 22 x 22 پیکسل
	شکل 1. اندازه آیکون برگه و موقعیت آن در داخل محدوده دارایی نماد.

سبک، رنگ ها و جلوه ها

آیکون‌های برگه‌ها صاف، مات و رو به رو هستند.

نمادهای برگه باید دو حالت داشته باشند: انتخاب شده و انتخاب نشده.

شکل 2. سبک و جلوه ها برای نمادهای برگه انتخاب نشده. توجه: تمام ابعاد پیکسل برای چگالی متوسط ​​است و باید برای تراکم های دیگر مقیاس بندی مناسبی داشته باشد. 1. رنگ پر کردن: #808080 2. محتوای درونی: محتوای داخلی باید از شکل بیرونی کم شود و کاملاً از پیکسل های شفاف تشکیل شده باشد.

شکل 3. سبک و جلوه ها برای نمادهای برگه انتخاب شده. توجه: تمام ابعاد پیکسل برای چگالی متوسط ​​است و باید برای تراکم های دیگر مقیاس بندی مناسبی داشته باشد. 1. رنگ پر کردن: #FFFFFF 2. محتوای درونی: محتوای داخلی باید از شکل بیرونی کم شود و کاملاً از پیکسل های شفاف تشکیل شده باشد. 3. درخشش بیرونی: #000000 ، شفافیت 25٪ سایز 3 پیکسل

بایدها و نبایدها

در زیر چند نمونه "انجام و انجام" وجود دارد که باید هنگام ایجاد نمادهای برگه برای برنامه خود در نظر بگیرید.

نمادهای نمونه

در زیر نمادهای برگه استاندارد با چگالی بالا نشان داده شده است که در پلتفرم اندروید استفاده می شود.

هشدار: از آنجایی که این منابع می توانند بین نسخه های پلتفرم تغییر کنند، نباید به کپی سیستم از منابع مراجعه کنید. اگر می‌خواهید از هر نماد یا سایر منابع داخلی قابل ترسیم استفاده کنید، باید یک کپی محلی از آن نمادها یا نقشه‌ها را در منابع برنامه خود ذخیره کنید، سپس به نسخه محلی کد برنامه خود مراجعه کنید. به این ترتیب، حتی اگر کپی سیستم تغییر کند، می توانید کنترل ظاهر آیکون های خود را حفظ کنید. توجه داشته باشید که شبکه زیر کامل نیست.

اندروید 1.6 و قبل از آن

دستورالعمل‌های زیر نحوه طراحی نمادهای برگه را برای Android 1.6 (سطح API 4) و نسخه‌های قبلی توضیح می‌دهد.

ساختار

• نمادهای برگه انتخاب نشده دارای شیب پر شدن و جلوه های مشابه با نمادهای منو هستند ، اما بدون درخشش بیرونی.
• نمادهای برگه انتخاب شده دقیقاً مانند نمادهای برگه انتخاب نشده به نظر می رسند، اما با یک سایه داخلی ضعیف تر، و دارای شیب قسمت جلویی مشابه نمادهای گفتگو هستند.
• نمادهای برگه دارای یک قاب امن 1 پیکسلی هستند که فقط باید برای لبه ضد نام مستعار یک شکل گرد همپوشانی داشته باشند.
• تمام ابعاد مشخص شده در این صفحه بر اساس اندازه 32x32 پیکسل آرت بورد است. 1 px از padding را در اطراف کادر محدود کننده در داخل قالب فتوشاپ قرار دهید.

	شکل 3. Safeframe و گرادیان پر برای نمادهای برگه انتخاب نشده. اندازه آیکون 32x32 است.
	شکل 4. Safeframe و گرادیان پر برای نمادهای برگه در حالت انتخاب شده. اندازه آیکون 32x32 است.

نماد برگه انتخاب نشده است

نور، افکت ها و سایه ها

نمادهای برگه انتخاب نشده دقیقاً مانند نمادهای برگه انتخاب شده به نظر می رسند، اما با یک سایه داخلی ضعیف تر و همان شیب قسمت جلویی مانند نمادهای گفتگو.

شکل 5. نور، جلوه ها و سایه ها برای نمادهای برگه انتخاب نشده. 1. قسمت جلو: روکش گرادیان | زاویه 90 درجه رنگ پایین: r 223 | g 223 | b 223 رنگ بالا: r 249 | g 249 | b 249 محل رنگ پایین: 0% مکان رنگ برتر: 75% 2. سایه درونی: سیاه | کدورت 10 درصد | زاویه 90 درجه فاصله 2px | سایز 2 پیکسل 3. اریب داخلی: عمق 1% | جهت پایین | اندازه 0px | زاویه 90 درجه | ارتفاع 10 درجه تیرگی 70% سفید را برجسته کنید سایه سیاه 25 درصد کدورت

نماد برگه انتخاب شده

نمادهای برگه انتخاب شده دارای شیب پر شدن و افکت های مشابه با نماد منو هستند، اما بدون درخشش بیرونی.

شکل 6. نور، جلوه ها و سایه ها برای نمادهای برگه انتخاب شده. 1. قسمت جلو: از شیب پر از پالت رنگ استفاده کنید. 2. سایه درونی: سیاه | شفافیت 20% | زاویه 90 درجه | فاصله 2 پیکسل | سایز 2 پیکسل 3. اریب داخلی: عمق 1% | جهت پایین | اندازه 0px | زاویه 90 درجه | ارتفاع 10 درجه تیرگی 70% سفید را برجسته کنید سایه سیاه 25 درصد کدورت

پالت رنگ گرادیان را پر کنید 1: r 163 | g 163 | ب 163 2: r 120 | g 120 | b 120 به عنوان پر رنگ در نمادهای برگه انتخاب نشده استفاده می شود.

قدم به قدم شکل اصلی را با استفاده از ابزاری مانند Adobe Illustrator ایجاد کنید. شکل را به ابزاری مانند Adobe Photoshop وارد کنید و آن را به اندازه یک تابلو هنری 32x32 پیکسل با پس‌زمینه شفاف تنظیم کنید. افکت های مشاهده شده در شکل 6 را برای فیلتر حالت انتخاب شده اضافه کنید. نماد را در ابعاد 32x32 به عنوان یک فایل PNG با شفافیت فعال صادر کنید.