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

ไอคอนแบบปรับอัตโนมัติ หรือ 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 ไอคอน และ ให้ดูบล็อกโพสต์ Designing Adaptiveing ไอคอน ที่ใช้เวลาเพียง 2 นาที

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

ไอคอนแบบปรับอัตโนมัติจะถูกระบุโดยใช้ไอคอนแบบปรับอัตโนมัติ เช่นเดียวกับไอคอนแบบปรับอัตโนมัติ แอตทริบิวต์ 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> รองรับทั้ง 2 องค์ประกอบ รูปภาพเวกเตอร์และบิตแมป

ตัวอย่างต่อไปนี้แสดงวิธีให้คำจำกัดความ <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" />

    // Starting with Android 13 (API level 33), you can opt-in to providing a
    // <monochrome> drawable.
    <monochrome android:drawable="@drawable/ic_launcher_monochrome" />
</adaptive-icon>
...

คุณยังกำหนดเนื้อหาที่ถอนออกได้เป็นองค์ประกอบโดยแทรกองค์ประกอบเหล่านั้นลงใน องค์ประกอบ <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() เมื่อคุณสร้างหน่วยโฆษณา

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

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

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