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

การแสดงผลแบบไร้ขอบช่วยให้แอปวาด 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. จัดการการซ้อนทับโดยใช้ Inset

เมื่อเปิดใช้การแสดงผลแบบไร้ขอบแล้ว เนื้อหาและองค์ประกอบ 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) }
    }
    ...
}