ไอคอนแท็บ

ไอคอนแท็บเป็นองค์ประกอบกราฟิกที่ใช้แสดงแต่ละแท็บใน หลายแท็บ ไอคอนแท็บแต่ละไอคอนมี 2 สถานะ ได้แก่ ยกเลิกการเลือกและเลือก

ตามที่อธิบายไว้ในการให้ ชุดไอคอนเฉพาะความหนาแน่น คุณควรสร้างชุดไอคอนแยกกันสำหรับ หน้าจอความหนาแน่นปานกลางและสูง เพื่อให้ไอคอนของคุณแสดงขึ้น อย่างเหมาะสมในอุปกรณ์ที่สามารถติดตั้งแอปพลิเคชันของคุณได้ ดูเคล็ดลับสำหรับนักออกแบบ เพื่อดูคำแนะนำเกี่ยวกับวิธีใช้งานไอคอนหลายๆ ชุด

ภาพสุดท้ายต้องส่งออกเป็นไฟล์ PNG แบบโปร่งใส ไม่รวม สีพื้นหลัง

เทมเพลตสำหรับการสร้างไอคอนใน Adobe Photoshop มีให้ดาวน์โหลดใน ไอคอน ชุดเทมเพลต

คำเตือน: รูปแบบของไอคอนแท็บได้เปลี่ยนแปลงไปอย่างมากใน Android 2.0 เมื่อเทียบกับเวอร์ชันก่อนหน้า ถึง ให้การสนับสนุน Android ทุกเวอร์ชัน โดยนักพัฒนาซอฟต์แวร์ควรทำดังนี้
1. วางไอคอนแท็บสำหรับ Android 2.0 ขึ้นไปใน ไดเรกทอรี drawable-hdpi-v5, drawable-mdpi-v5 และ drawable-ldpi-v5
2. วางไอคอนแท็บสำหรับเวอร์ชันก่อนหน้าใน ไดเรกทอรี drawable-hdpi, drawable-mdpi และ drawable-ldpi
3. ตั้ง android:targetSdkVersion เป็น 5 ขึ้นไปใน <uses-sdk> ในไฟล์ Manifest ของแอปพลิเคชัน ซึ่งจะแจ้งให้ระบบทราบว่าควรแสดงผลแท็บโดยใช้สไตล์แท็บใหม่

การให้ไอคอนสำหรับสถานะ 2 แท็บ

ไอคอนแท็บควรมี 2 สถานะคือ ไม่ได้เลือกและเลือก การจัดเตรียมไอคอน ในหลายรัฐ นักพัฒนาแอปจะต้องสร้าง รัฐ ที่ถอนออกได้สำหรับแต่ละไอคอน ซึ่งเป็นไฟล์ XML ที่แสดงรายการรูปภาพ เพื่อใช้กับสถานะต่างๆ ของ UI

ตัวอย่างเช่น สำหรับวิดเจ็ตแท็บที่มีแท็บชื่อ "เพื่อน" และ "เพื่อนร่วมงาน" คุณสามารถใช้โครงสร้างไดเรกทอรีที่คล้ายกับตัวอย่างด้านล่าง

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 (API ระดับ 5 ถึง 10)

ขนาดและการวางตำแหน่ง

ไอคอนแท็บควรใช้รูปทรงและรูปแบบง่ายๆ ปรับขนาดและจัดตำแหน่งภายในเนื้อหาสุดท้ายแล้ว

รูปที่ 1 แสดงวิธีที่หลากหลายในการวางตำแหน่งไอคอนภายใน เนื้อหา คุณควรปรับขนาดไอคอนให้เล็กกว่าขอบเขตจริงของ เนื้อหา

ในการระบุขนาดที่แนะนำสำหรับไอคอน ตัวอย่างแต่ละรายการใน รูปที่ 1 มีสี่เหลี่ยมผืนผ้านำ 3 รูป ได้แก่

• ช่องสีแดงคือกรอบล้อมรอบสำหรับเนื้อหาแบบเต็ม
• กล่องสีฟ้าคือกรอบที่แนะนำสำหรับไอคอนจริง ช่องไอคอนมีขนาดเล็กกว่ากล่องเนื้อหาแบบเต็มเพื่อให้ การรักษาไอคอนพิเศษ
• กล่องสีส้มคือกรอบล้อมรอบที่แนะนำสำหรับไอคอนจริง เนื้อหาจะเป็นแบบสี่เหลี่ยมจัตุรัส ช่องสำหรับไอคอนรูปสี่เหลี่ยมจัตุรัสมีขนาดเล็กกว่าช่องอื่นๆ เพื่อกำหนดน้ำหนักของการแสดงผลทั้ง 2 ประเภทให้สอดคล้องกัน

ขนาดไอคอนแท็บสำหรับหน้าจอความหนาแน่นสูง (hdpi) : เนื้อหาแบบเต็ม: 48 x 48 พิกเซล ไอคอน: 42 x 42 พิกเซล
ขนาดไอคอนแท็บสำหรับหน้าจอความหนาแน่นปานกลาง (mdpi) มีดังนี้ เนื้อหาแบบเต็ม: 32 x 32 พิกเซล ไอคอน: 28 x 28 พิกเซล
ขนาดไอคอนแท็บสำหรับหน้าจอความหนาแน่นต่ำ (ldpi) มีดังนี้ เนื้อหาแบบเต็ม: 24 x 24 พิกเซล ไอคอน: 22 x 22 พิกเซล
	รูปที่ 1 การปรับขนาดและการวางตำแหน่งไอคอนแท็บภายในขอบเขตของ ไอคอนเนื้อหา

รูปแบบ สี และเอฟเฟกต์

ไอคอนแท็บจะเป็นแบบแบนราบ ด้านในและด้านในรูปภาพ

ไอคอนแท็บควรมี 2 สถานะ ได้แก่ เลือกแล้วและไม่ได้เลือก

รูปที่ 2 รูปแบบและเอฟเฟกต์สำหรับไอคอนแท็บที่ไม่ได้เลือก หมายเหตุ: ขนาดพิกเซลทั้งหมดมีไว้สำหรับความหนาแน่นปานกลางและควรปรับขนาดอย่างเหมาะสมสำหรับความหนาแน่นอื่นๆ 1. เติมสี: #808080 2. เนื้อหาภายใน เนื้อหาด้านในควรลบออกจากรูปร่างด้านนอก และให้มีพิกเซลโปร่งใส

รูปที่ 3 รูปแบบและเอฟเฟกต์สำหรับไอคอนแท็บที่เลือก หมายเหตุ: ขนาดพิกเซลทั้งหมดมีไว้สำหรับความหนาแน่นปานกลางและควรปรับขนาดอย่างเหมาะสมสำหรับความหนาแน่นอื่นๆ 1. เติมสี: #FFFFFF 2. เนื้อหาภายใน เนื้อหาด้านในควรลบออกจากรูปร่างด้านนอก และควรมีพิกเซลโปร่งใส 3. แสงด้านนอก: #000000 ความทึบแสง 25% ขนาด 3px

สิ่งที่ควรและไม่ควรทำ

ส่วนด้านล่างนี้คือสิ่งที่ "ควรทำและไม่ควรทำ" ตัวอย่างที่ควรพิจารณาเมื่อสร้างไอคอนแท็บสำหรับ แอปพลิเคชันของคุณ

ไอคอนตัวอย่าง

ด้านล่างนี้เป็นไอคอนแท็บความหนาแน่นสูงมาตรฐานที่ใช้ใน แพลตฟอร์ม Android

คำเตือน: เนื่องจากทรัพยากรเหล่านี้ สามารถเปลี่ยนไปมาระหว่างเวอร์ชันของแพลตฟอร์ม ไม่ควรอ้างอิงสำเนาของทรัพยากรของระบบ หากคุณต้องการ ใช้ไอคอนหรือทรัพยากรภายในที่ถอนออกได้อื่นๆ คุณควรจัดเก็บ สำเนาไอคอนหรือไอคอนที่ถอนออกได้ไว้ในทรัพยากรของแอปพลิเคชัน จากนั้นให้อ้างอิงสำเนาในเครื่องจากโค้ดของแอปพลิเคชัน ด้วยวิธีนี้ คุณสามารถ สามารถควบคุมลักษณะไอคอนได้ ถึงแม้ว่าระบบ คัดลอกการเปลี่ยนแปลง โปรดทราบว่าตารางด้านล่างนี้ไม่ได้เป็นตารางที่สมบูรณ์

Android 1.6 และเก่ากว่า

หลักเกณฑ์ต่อไปนี้อธิบายวิธีออกแบบไอคอนแท็บสำหรับ Android 1.6 (API ระดับ 4) และเก่ากว่า

โครงสร้าง

• ไอคอนแท็บที่ไม่ได้เลือกมีการไล่ระดับสีและเอฟเฟกต์เหมือนกับ ไอคอนเมนู แต่ไม่มีแสงภายนอก
• ไอคอนแท็บที่เลือกมีลักษณะเหมือนไอคอนแท็บที่ไม่ได้เลือก แต่จะจางลง เงาภายใน และไล่ระดับสีส่วนหน้าเหมือนกัน ไอคอนกล่องโต้ตอบ
• ไอคอนแท็บมี SafeFrame ขนาด 1 พิกเซล ซึ่งควรซ้อนทับที่ขอบเท่านั้น ของรอยหยักของรูปทรงกลม
• ขนาดทั้งหมดที่ระบุในหน้านี้จะอิงตามขนาดอาร์ตบอร์ด 32x32 พิกเซล เว้นระยะห่าง 1 พิกเซลไว้รอบกรอบภายในเทมเพลต Photoshop

	รูปที่ 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° ระยะห่าง 2 พิกเซล | ขนาด 2px 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 | b 163 2:  r 120 | g 120 | b 120 ใช้เป็นการเติมสีบนไอคอนแท็บที่ไม่ได้เลือก

คำแนะนำทีละขั้นตอน สร้างรูปร่างพื้นฐานโดยใช้เครื่องมืออย่าง Adobe Illustrator นำเข้ารูปร่างลงในเครื่องมือ เช่น Adobe Photoshop และปรับขนาดให้พอดีกับ 32x32 อาร์ตบอร์ด px ที่มีพื้นหลังโปร่งใส เพิ่มเอฟเฟกต์ที่เห็นในรูปที่ 6 สำหรับตัวกรองสถานะที่เลือก ส่งออกไอคอนขนาด 32x32 เป็นไฟล์ PNG ที่เปิดใช้ความโปร่งใส