ไอคอนแบบปรับอัตโนมัติ

Android 8.0 (API ระดับ 26) มีไอคอน Launcher แบบปรับอัตโนมัติเพิ่มเข้ามา ซึ่งแสดงรูปร่างได้หลากหลายในอุปกรณ์รุ่นต่างๆ เช่น ไอคอน Launcher แบบปรับอัตโนมัติอาจแสดงเป็นรูปร่างวงกลมในอุปกรณ์ OEM หนึ่งและแสดงเป็นรูปร่างกึ่งสี่เหลี่ยมกึ่งวงกลมในอุปกรณ์อื่น อุปกรณ์ OEM แต่ละรุ่นมีมาสก์ซึ่งระบบจะใช้เพื่อแสดงไอคอนแบบปรับอัตโนมัติทั้งหมดที่มีรูปร่างเหมือนกัน ไอคอน Launcher แบบปรับอัตโนมัติยังใช้ในทางลัด แอปการตั้งค่า กล่องโต้ตอบการแชร์ และหน้าจอภาพรวมด้วย

รูปที่ 1 ไอคอนแบบปรับอัตโนมัติรองรับมาสก์ที่หลากหลายซึ่งแตกต่างไปในอุปกรณ์แต่ละรุ่น

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

รูปที่ 2 กำหนดไอคอนแบบปรับอัตโนมัติโดยใช้เลเยอร์ 2 รายการและมาสก์ 1 รายการ

ไอคอน Launcher ใน Android 7.1 (API ระดับ 25) และรุ่นก่อนหน้ามีขนาด 48x48 dp ตอนนี้คุณต้องกำหนดขนาดเลเยอร์ของไอคอนโดยใช้หลักเกณฑ์ต่อไปนี้

• เลเยอร์ทั้งสองต้องมีขนาด 108x108 dp
• พื้นที่ขนาด 72x72 dp ที่ด้านในของไอคอนจะปรากฏภายในวิวพอร์ตที่มีมาสก์
• ระบบเก็บพื้นที่ขนาด 18 dp ที่ด้านนอกของทั้ง 4 ด้านเพื่อสร้างเอฟเฟกต์ที่ดูน่าสนใจ เช่น พารัลแลกซ์หรือการกะพริบ

หมายเหตุ: เอฟเฟกต์ภาพเคลื่อนไหวสร้างโดย Launcher ที่รองรับ จึงอาจแตกต่างไปตาม Launcher แต่ละตัว

ข้อควรระวัง: อุปกรณ์ OEM อาจระบุมาสก์ที่มีรัศมีที่สั้นถึง 33 dp ไปตามจุดที่กำหนดของรูปร่าง

รูปที่ 3 ไอคอนแบบปรับอัตโนมัติรองรับเอฟเฟกต์ภาพต่างๆ

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

ดูรู้วิธีสร้างไอคอนแบบปรับอัตโนมัติโดยใช้ Android Studio ได้ที่สร้างไอคอนแอปด้วย Image Asset Studio

การสร้างไอคอนแบบปรับอัตโนมัติเป็นภาษา XML

ในการเพิ่มไอคอนแบบปรับอัตโนมัติให้กับแอปโดยใช้ XML ให้เริ่มต้นด้วยการอัปเดตแอตทริบิวต์ android:icon ในไฟล์ Manifest ของแอปเพื่อระบุทรัพยากรที่ถอนออกได้ หรือจะกำหนดทรัพยากรที่ถอนออกได้ของไอคอนโดยใช้แอตทริบิวต์ android:roundIcon ก็ได้เช่นกัน คุณใช้แอตทริบิวต์ android:roundIcon ได้เฉพาะในกรณีที่ต้องใช้เนื้อหาไอคอนอื่นสำหรับมาสก์แบบวงกลม เช่น เมื่อการสร้างแบรนด์จากโลโก้อาศัยรูปร่างวงกลม ข้อมูลโค้ดต่อไปนี้แสดงให้เห็นแอตทริบิวต์ทั้ง 2 รายการ

    <application
        …
        android:icon="@mipmap/ic_launcher"
        android:roundIcon="@mipmap/ic_launcher_round"
        …>
    </application>
    

ถัดไปคุณต้องสร้างทรัพยากรอื่นที่ถอนออกได้ในแอปเพื่อใช้กับ Android 8.0 (API ระดับ 26) ใน res/mipmap-v26/ic_launcher.xml จากนั้นจึงใช้องค์ประกอบ <adaptive-icon> เพื่อกำหนดเนื้อหาที่ถอนออกได้ของเลเยอร์พื้นหน้าและพื้นหลังให้กับไอคอน องค์ประกอบภายในทั้ง <foreground> และ <background> รองรับแอตทริบิวต์ android:drawable

    <?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" />
    </adaptive-icon>
    

นอกจากนี้คุณยังกำหนดเนื้อหาที่ถอนออกได้ของพื้นหลังและพื้นหน้าเป็นองค์ประกอบได้โดยใส่ไว้ระหว่างองค์ประกอบ <foreground> และ <background>

หากต้องการใช้มาสก์และเอฟเฟกต์ภาพเดียวกันกับทั้งทางลัดและไอคอน Launcher แบบปรับอัตโนมัติปกติ ให้ใช้เทคนิคใดเทคนิคหนึ่งต่อไปนี้

• สำหรับทางลัดแบบคงที่ ให้ใช้องค์ประกอบ <adaptive-icon>
• สำหรับทางลัดแบบไดนามิก ให้เรียกใช้เมธอด createWithAdaptiveBitmap() เมื่อสร้างทางลัด

ดูข้อมูลเพิ่มเติมเกี่ยวกับทางลัดได้ที่ทางลัดของแอป

แหล่งข้อมูลเพิ่มเติม

หากต้องการข้อมูลเพิ่มเติมเกี่ยวกับการออกแบบและนำไอคอนแบบปรับอัตโนมัติไปใช้ ให้อ่านชุดบทความนี้โดย Nick Butcher ซึ่งเป็นนักออกแบบและนักพัฒนาซอฟต์แวร์ของ Google

• ทำความเข้าใจไอคอนแบบปรับอัตโนมัติของ Android
• ออกแบบไอคอนแบบปรับอัตโนมัติ
• นำไอคอนแบบปรับอัตโนมัติไปใช้