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

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

ไอคอนแบบปรับอัตโนมัติจะปรับให้เข้ากับกรณีการใช้งานต่างๆ ได้ ซึ่งแตกต่างจากรูปภาพ บิตแมป

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

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

    GIF ที่แสดงตัวอย่างไอคอนตัวอย่าง Android 2 รายการรูปวงกลม
เคลื่อนไหวเพื่อแสดงการตอบสนองของผู้ใช้ ไอคอนแรกแสดงโลโก้ Android
สั่นซ้ายแล้วขวา จากนั้นขึ้นและลงภายในวงกลม ไอคอนที่ 2
จะขยายและหดอีกครั้ง
    รูปที่ 2 ตัวอย่างเอฟเฟกต์ภาพที่แสดงโดย ไอคอนแบบปรับอัตโนมัติ
  • การกำหนดธีมของผู้ใช้: ตั้งแต่ Android 13 (API ระดับ 33) เป็นต้นไป ผู้ใช้จะกำหนดธีม ไอคอนแบบปรับอัตโนมัติได้ หากผู้ใช้เปิดใช้ไอคอนแอปที่มีธีมโดยการเปิดปุ่มสลับไอคอนตามธีมในการตั้งค่าระบบ และ Launcher รองรับฟีเจอร์นี้ ระบบจะใช้สีของวอลเปเปอร์และธีมที่ผู้ใช้เลือกเพื่อกำหนดสีเฉด

    รูปภาพแสดงตัวอย่างอุปกรณ์ Android 3 เครื่อง โดยแต่ละเครื่องแสดงธีมผู้ใช้ที่แตกต่างกันพร้อมเฉดสีที่ต่างกัน เครื่องแรกแสดงวอลเปเปอร์ที่มีเฉดสีเข้ม เครื่องที่ 2 แสดงวอลเปเปอร์ที่มีเฉดสีทอง และเครื่องที่ 3 แสดงวอลเปเปอร์ที่มีเฉดสีเทาอ่อนผสมสีฟ้า ในแต่ละตัวอย่าง ไอคอนจะรับค่าการปรับสีของวอลเปเปอร์และกลมกลืนกันอย่างลงตัว
    รูปที่ 3 ไอคอนแบบปรับอัตโนมัติที่รับค่ามาจากวอลเปเปอร์และธีมของผู้ใช้

    ในสถานการณ์ต่อไปนี้ หน้าจอหลักจะไม่แสดงไอคอนแอปที่มีธีม แต่จะแสดงไอคอนแอปแบบปรับได้หรือมาตรฐานแทน

    • หากผู้ใช้ไม่ได้เปิดใช้ไอคอนแอปตามธีม
    • หากแอปไม่มีไอคอนแอปสีเดียว
    • หาก Launcher ไม่รองรับไอคอนแอปตามธีม

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

การออกแบบต้องเป็นไปตามข้อกำหนดต่อไปนี้เพื่อให้ไอคอนแบบปรับอัตโนมัติรองรับรูปร่าง เอฟเฟกต์ภาพ และการกำหนดธีมของผู้ใช้ที่แตกต่างกัน

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

    รูปภาพที่แสดงตัวอย่างเลเยอร์เบื้องหน้า (รูปภาพซ้าย) และเลเยอร์
พื้นหลัง (รูปภาพขวา) ส่วนหน้าแสดงไอคอน 16 ด้านของ
โลโก้ Android ตัวอย่างซึ่งอยู่ตรงกลางภายในพื้นที่ปลอดภัยขนาด 66x66 โซนปลอดภัยจะอยู่ตรงกลาง
ภายในคอนเทนเนอร์ขนาด 108x108 พื้นหลังจะแสดงขนาดที่วัดได้เหมือนกัน
สำหรับโซนปลอดภัยและคอนเทนเนอร์ แต่จะมีเพียงพื้นหลังสีน้ำเงิน
และไม่มีโลโก้
    รูปที่ 4 ไอคอนแบบปรับอัตโนมัติที่กำหนดโดยใช้เลเยอร์พื้นหน้า และพื้นหลัง โซนที่ปลอดภัยขนาด 66x66 ที่แสดงคือพื้นที่ ที่ไม่มีการตัดโดยมาสก์รูปร่างที่กำหนดโดย OEM
    รูปภาพที่แสดงไอคอนจากรูปภาพก่อนหน้าซ้อนทับบน
มาสก์วงกลม
    รูปที่ 5 ตัวอย่างลักษณะของเลเยอร์เลเยอร์ด้านหน้าและ เลเยอร์พื้นหลังเมื่อใช้ร่วมกันกับมาสก์วงกลม
  • หากต้องการรองรับการกำหนดธีมไอคอนแอปของผู้ใช้ ให้ระบุเลเยอร์เดียวสำหรับ ไอคอนเวอร์ชันโมโนโครม

    รูปภาพที่แสดงตัวอย่างเลเยอร์ไอคอนขาวดำ (รูปภาพด้านซ้าย)
และตัวอย่างสี (รูปภาพด้านขวา) เลเยอร์สีเดียวแสดงไอคอน 16 ด้าน
ของโลโก้ Android ตัวอย่างที่อยู่ตรงกลางภายในพื้นที่ปลอดภัยขนาด 66x66 โดยพื้นที่ปลอดภัยจะอยู่ตรงกลางภายในคอนเทนเนอร์ขนาด 108x108 ตัวอย่างสีแสดง
เลเยอร์นี้เมื่อใช้กับธีมผู้ใช้ที่มีสีต่างกัน (ส้ม
ชมพู เหลือง และเขียว)
    รูปที่ 6 เลเยอร์ไอคอนสีเดียว (ซ้าย) พร้อม ตัวอย่างการแสดงตัวอย่างสี (ขวา)
  • ปรับขนาดเลเยอร์ทั้งหมดเป็น 108x108 dp

  • ใช้ไอคอนที่มีขอบสะอาดตา เลเยอร์ต้องไม่มีมาสก์หรือเงาพื้นหลังรอบๆ ขอบไอคอน

  • ใช้โลโก้ที่มีขนาดอย่างน้อย 48x48 dp ต้องไม่เกิน 66x66 dp เนื่องจากพื้นที่ขนาด 66x66 dp ที่ด้านในของไอคอนจะปรากฏภายในวิวพอร์ตที่มีมาสก์

ระบบเก็บพื้นที่ขนาด 18 dp ที่ด้านนอกของทั้ง 4 ด้านของเลเยอร์ไว้สำหรับ การมาสก์และสร้างเอฟเฟกต์ภาพ เช่น พารัลแลกซ์หรือการกะพริบ

ดูรู้วิธีสร้างไอคอนแบบปรับอัตโนมัติโดยใช้ Android Studio ได้ที่เทมเพลตไอคอน แอป Android ใน Figma หรือเอกสารประกอบของ Android Studio สำหรับการสร้างไอคอน Launcher นอกจากนี้ โปรดดูบล็อกโพสต์การออกแบบไอคอน แบบปรับเปลี่ยนได้ ด้วย

เพิ่มไอคอนแบบปรับอัตโนมัติลงในแอป

ไอคอนแบบปรับอัตโนมัติจะได้รับการระบุโดยใช้แอตทริบิวต์ android:icon ในไฟล์ Manifest ของแอปเช่นเดียวกับไอคอนที่ไม่ใช่แบบปรับอัตโนมัติ

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

ข้อมูลโค้ดต่อไปนี้แสดงให้เห็นแอตทริบิวต์ทั้ง 2 รายการ แต่แอปส่วนใหญ่จะระบุเฉพาะ android:icon

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

จากนั้นบันทึกไอคอนแบบปรับอัตโนมัติไปยัง res/mipmap-anydpi-v26/ic_launcher.xml ใช้องค์ประกอบ <adaptive-icon> เพื่อกำหนดทรัพยากรเลเยอร์พื้นหน้า พื้นหลัง และเลเยอร์ขาวดำสำหรับไอคอน องค์ประกอบภายใน <foreground>, <background> และ <monochrome> รองรับทั้งรูปภาพเวกเตอร์และบิตแมป

ตัวอย่างต่อไปนี้แสดงวิธีกำหนดองค์ประกอบ <foreground>, <background> และ <monochrome> ภายใน <adaptive-icon>

<?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" />
    <monochrome android:drawable="@drawable/ic_launcher_foreground" />
</adaptive-icon>
...

เลเยอร์เลเยอร์พื้นหน้าและเลเยอร์ขาวดำใช้ drawable เดียวกัน แต่คุณสร้าง Drawable แยกต่างหากสำหรับแต่ละเลเยอร์ได้หากต้องการ

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

<?xml version="1.0" encoding="utf-8"?>
...
<foreground>
   <inset
       android:insetBottom="18dp"
       android:insetLeft="18dp"
       android:insetRight="18dp"
       android:insetTop="18dp">
       <shape android:shape="oval">
           <solid android:color="#0000FF" />
       </shape>
   </inset>
</foreground>
...

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

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับการนำไอคอนแบบปรับอัตโนมัติไปใช้ได้ที่การนำไอคอนแบบ ปรับอัตโนมัติ ไปใช้ ดูข้อมูลเพิ่มเติมเกี่ยวกับทางลัดได้ที่ภาพรวมทางลัดของแอป

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับการออกแบบและ การใช้งานไอคอนแบบปรับอัตโนมัติได้จากแหล่งข้อมูลต่อไปนี้