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

การแสดงผลแบบไร้ขอบช่วยให้แอปวาด 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()) For example, use either `Scaffold`,

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

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

หากต้องการเปลี่ยนไอคอนแถบสถานะเป็นสีอ่อนหรือสีเข้ม ให้ทำดังนี้ 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

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

กล่องโต้ตอบ

หากต้องการแสดงกล่องโต้ตอบแบบเต็มหน้าจอแบบขอบจรดขอบ ให้เรียกใช้ WindowCompat.enableEdgeToEdge ในเมธอด onStart() ของกล่องโต้ตอบ

class MyAlertDialogFragment : DialogFragment() {
    override fun onStart(){
        super.onStart()
        dialog?.window?.let { WindowCompat.enableEdgeToEdge(it) }
    }
    ...
}
ถัดไป
เกี่ยวกับ WindowInsetsRulers