ตั้งค่าแบบไร้ขอบ

การแสดงผลแบบไร้ขอบช่วยให้แอปวาด UI ไว้ด้านหลังแถบระบบ ซึ่งได้แก่ แถบสถานะ แถบคำบรรยาย และแถบนำทาง เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่สมจริงยิ่งขึ้น หากคุณกำหนดเป้าหมายเป็นอุปกรณ์ที่ใช้ Android 15 (ระดับ API 35) ขึ้นไป ระบบจะบังคับใช้การแสดงผลแบบไร้ขอบโดยค่าเริ่มต้น

หากต้องการแสดงเนื้อหาแบบขอบจรดขอบอย่างถูกต้องใน Android ทุกเวอร์ชัน ให้ทำตาม ขั้นตอนการตั้งค่า หากไม่มีขั้นตอนเหล่านี้ แอปอาจวาดสีทึบไว้ด้านหลังแถบระบบ หรือไม่แสดงภาพเคลื่อนไหวเนื้อหาพร้อมกับการเปลี่ยนแป้นพิมพ์บนหน้าจอ (IME)

1. เปิดใช้การแสดงผลแบบไร้ขอบ

หากต้องการเปิดใช้การแสดงผลแบบขอบจรดขอบใน Android เวอร์ชันก่อนหน้า ให้เรียกใช้ enableEdgeToEdge() ในเมธอด Activity.onCreate() ดังนี้

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    enableEdgeToEdge()
    // ...
}

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

2. กำหนดค่า windowSoftInputMode

ตั้งค่า android:windowSoftInputMode="adjustResize" ในรายการAndroidManifest.xmlกิจกรรม การตั้งค่านี้ช่วยให้แอปได้รับ Inset ของ IME ซึ่งช่วยให้คุณปรับเลย์เอาต์ด้วยระยะเว้นเมื่อแป้นพิมพ์บนหน้าจอ ปรากฏขึ้นหรือหายไป

<!-- In your AndroidManifest.xml file: -->
<activity
  android:name=".ui.MainActivity"
  android:label="@string/app_name"
  android:windowSoftInputMode="adjustResize"
  android:theme="@style/Theme.MyApplication"
  android:exported="true">
  ...
</activity>

3. จัดการการซ้อนทับโดยใช้ระยะขอบ

เมื่อเปิดใช้ขอบจรดขอบแล้ว เนื้อหาและองค์ประกอบ UI บางอย่างของแอปอาจแสดงอยู่ด้านหลังแถบระบบ หากต้องการป้องกันไม่ให้แถบระบบบดบังองค์ประกอบสำคัญหรือองค์ประกอบแบบอินเทอร์แอกทีฟ หรือไม่ให้องค์ประกอบดังกล่าวทับซ้อนกับท่าทางสัมผัสของระบบ คุณต้องจัดการ Inset

ระยะขอบอธิบายส่วนต่างๆ ของหน้าจอที่ทับซ้อนกับ UI ของระบบหรือท่าทางสัมผัสของระบบ ประเภทการแทรกหลักๆ ที่ควรพิจารณาสำหรับการแสดงผลแบบขอบจรดขอบมีดังนี้

  • ระยะขอบของแถบระบบ: แสดงพื้นที่ที่แถบระบบแสดง ใช้ สิ่งเหล่านี้เพื่อหลีกเลี่ยงไม่ให้แถบระบบบดบัง UI
  • ขอบของรอยบากบนจอแสดงผล: แสดงพื้นที่ที่มีรอยบากจริง (เช่น รอยบากของกล้อง) บนหน้าจออุปกรณ์

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

หัวข้อขั้นสูง

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

โหมดใหญ่พิเศษ

เนื้อหาบางอย่าง เช่น วิดีโอหรือแผนที่ จะได้รับประโยชน์จากประสบการณ์การใช้งานที่สมจริงอย่างเต็มที่ ซึ่งจะซ่อนแถบระบบ คุณซ่อนแถบระบบได้โดยใช้ WindowInsetsControllerCompat

val windowInsetsController = WindowCompat.getInsetsController(window, window.decorView)

// Hide the system bars.
windowInsetsController.hide(WindowInsetsCompat.Type.systemBars())

// Show the system bars.
windowInsetsController.show(WindowInsetsCompat.Type.systemBars())

สีและไอคอนของแถบระบบ

เมื่อแสดงผลแบบขอบจรดขอบ พื้นหลังของแอปอาจปรากฏอยู่ด้านหลังแถบระบบ คุณจึงอาจต้องปรับสีไอคอนแถบระบบเพื่อให้คอนทราสต์ดีขึ้น

หากต้องการเปลี่ยนไอคอนแถบสถานะเป็นสีอ่อนหรือสีเข้ม ให้ทำดังนี้ WindowInsetsControllerCompat

// Set status bar icons to dark.
WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = true

// Set status bar icons to light.
WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = false

การป้องกันแถบระบบ

แม้ว่า enableEdgeToEdge() จะมีแถบระบบแบบโปร่งใสหรือกึ่งโปร่งใสเป็นค่าเริ่มต้น แต่คุณอาจต้องปรับแต่ง โปรดดูคำแนะนำในการออกแบบแถบระบบ Android และคำแนะนำในการออกแบบแบบขอบจรดขอบเพื่อตัดสินใจว่าจะใช้แถบแบบโปร่งใสหรือแบบโปร่งแสงเมื่อใด

หากต้องการให้แถบนำทางแบบ 3 ปุ่มโปร่งใสทั้งหมดแทนที่จะโปร่งแสง คุณสามารถปิดใช้การบังคับใช้คอนทราสต์ได้โดยทำดังนี้

window.isNavigationBarContrastEnforced = false

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

ถัดไป
เกี่ยวกับ WindowInsetsRulers