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

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

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

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

  วันที่

• เอฟเฟกต์ภาพ: ไอคอนแบบปรับอัตโนมัติรองรับภาพที่น่าสนใจหลายรูปแบบ เอฟเฟ็กต์ ซึ่งจะปรากฏขึ้นเมื่อผู้ใช้วางหรือย้ายไอคอนไปทั่วบ้าน บนหน้าจอ

  วันที่

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

  วันที่

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

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

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

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

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

  วันที่

  

• หากต้องการรองรับการกำหนดธีมของไอคอนแอปของผู้ใช้ ให้ระบุเลเยอร์เดียวสำหรับ ไอคอนเวอร์ชันโมโนโครม

  วันที่

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

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

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

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

• เทมเพลตหน้าชุมชน Figma
• ทำความเข้าใจไอคอนแบบปรับอัตโนมัติของ Android
• การออกแบบไอคอนแบบปรับอัตโนมัติ
• การใช้ไอคอนแบบปรับอัตโนมัติ
• สร้างไอคอนแอปใน Android Studio
• ข้อกำหนดในการออกแบบไอคอนของ Google Play