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

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

ส่วนแทรกจะอธิบายส่วนต่างๆ ของหน้าจอที่ตัดกับ 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