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

การแสดงผลแบบไร้ขอบช่วยให้แอปวาด 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