ตั้งค่าการแสดงผลแบบไร้ขอบด้วยตนเอง

คุณเปิดใช้การแสดงผลแบบไร้ขอบในแอปได้โดยเรียกใช้ enableEdgeToEdge ซึ่งเพียงพอสําหรับแอปส่วนใหญ่ คู่มือนี้จะอธิบายวิธีเปิดใช้การแสดงผลแบบเต็มหน้าจอหากแอปของคุณจำเป็นต้องดำเนินการดังกล่าวโดยไม่ต้องใช้ enableEdgeToEdge

จัดวางแอปในโหมดเต็มหน้าจอ

ใช้ WindowCompat.setDecorFitsSystemWindows(window, false) เพื่อวางเลย์เอาต์แอปไว้ด้านหลังแถบระบบ ดังที่แสดงในตัวอย่างโค้ดต่อไปนี้

override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
  WindowCompat.setDecorFitsSystemWindows(window, false)
}

@Override
public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  WindowCompat.setDecorFitsSystemWindows(getWindow(), false);
}

เปลี่ยนสีของแถบระบบ

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

• โหมดการไปยังส่วนต่างๆ ด้วยท่าทางสัมผัส: ระบบจะใช้การปรับสีแบบไดนามิก ซึ่งเนื้อหาของแถบระบบจะเปลี่ยนสีตามเนื้อหาที่อยู่เบื้องหลัง ในตัวอย่างต่อไปนี้ แฮนเดิลในแถบนําทางจะเปลี่ยนเป็นสีเข้มเมื่ออยู่เหนือเนื้อหาสีอ่อน และเปลี่ยนเป็นสีอ่อนเมื่ออยู่เหนือเนื้อหาสีเข้ม

• โหมดปุ่ม: ระบบจะใช้ม่านทึบแสงอยู่หลังแถบระบบ (สำหรับ API ระดับ 29 ขึ้นไป) หรือแถบระบบแบบโปร่งใส (สำหรับ API ระดับ 28 หรือต่ำกว่า)

• สีของเนื้อหาในแถบสถานะ: ควบคุมสีของเนื้อหาในแถบสถานะ เช่น เวลาและไอคอน

คุณสามารถแก้ไขไฟล์ themes.xml เพื่อตั้งค่าสีของแถบนำทาง และตั้งค่าแถบสถานะเป็นโปร่งใสและสีของเนื้อหาแถบสถานะเป็นสีเข้ม (ไม่บังคับ)

<!-- values-v29/themes.xml -->
<style name="Theme.MyApp">
  <item name="android:navigationBarColor">
     @android:color/transparent
  </item>

  <!-- Optional: set to transparent if your app is drawing behind the status bar. -->
  <item name="android:statusBarColor">
     @android:color/transparent
  </item>

  <!-- Optional: set for a light status bar with dark content. -->
  <item name="android:windowLightStatusBar">
    true
  </item>
</style>

คุณใช้ WindowInsetsController API ได้โดยตรง แต่เราขอแนะนําอย่างยิ่งให้ใช้ Support Library WindowInsetsControllerCompat หากเป็นไปได้ คุณสามารถใช้ WindowInsetsControllerCompat API แทน theme.xml เพื่อควบคุมสีของเนื้อหาในแถบสถานะ โดยให้ใช้ฟังก์ชัน setAppearanceLightNavigationBars() โดยส่ง true เพื่อเปลี่ยนสีพื้นหน้าของการนําทางเป็นสีอ่อน หรือ false เพื่อเปลี่ยนกลับไปเป็นสีเริ่มต้น

val windowInsetsController =
      ViewCompat.getWindowInsetsController(window.decorView)

windowInsetsController?.isAppearanceLightNavigationBars = true

WindowInsetsControllerCompat windowInsetsController =
      ViewCompat.getWindowInsetsController(getWindow().getDecorView());
if (windowInsetsController == null) {
    return;
}

windowInsetsController.setAppearanceLightNavigationBars(true);