Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

การออกแบบแบบไร้ขอบ

แอปแบบขอบจรดขอบจะใช้ประโยชน์จากทั้งหน้าจอโดยการวาด UI ใต้ แถบระบบ

**รูปที่ 1** ซ้าย แอปที่ไม่แสดงแบบเต็มหน้าจอ ขวา แอปที่แสดงผลแบบไร้ขอบ

ทักษะ Android

ดูใน GitHub

เพิ่มการรองรับแบบไร้ขอบ

ใช้ทักษะ Android แบบขอบจรดขอบเพื่อเพิ่มการรองรับแบบขอบจรดขอบที่ปรับเปลี่ยนได้ลงในแอป Jetpack Compose

หากต้องการติดตั้งทักษะจาก Android CLI ให้เรียกใช้คำสั่งต่อไปนี้

android skills add edge-to-edge

สรุปประเด็นสำคัญ

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

**รูปที่ 2** แอปที่มีการไฮไลต์ระยะขอบของท่าทางสัมผัสเป็นสีเขียว

วาดเนื้อหาด้านหลังแถบระบบ

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

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

โปรดทราบประเภทการแทรกต่อไปนี้เมื่อออกแบบกรณีการใช้งานแบบขอบจรดขอบ

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

ข้อควรพิจารณาเกี่ยวกับแถบสถานะ

ดูคำแนะนำการออกแบบแถบระบบพื้นฐานได้ที่แถบระบบของ Android ส่วนต่อไปนี้จะกล่าวถึงข้อควรพิจารณาเพิ่มเติมเกี่ยวกับแถบสถานะ

เนื้อหาแบบเลื่อน

แถบแอปด้านบนควรยุบขณะเลื่อน ดูวิธียุบ Material 3 TopAppBar ใน Material 3 แถบแอปด้านบนขนาดเล็กจะยุบเป็นความสูงของแถบสถานะ หรือเลื่อนออกนอกหน้าจอได้ แถบแอปด้านบนขนาดกลางและขนาดใหญ่อาจยุบเป็นแถบแอปที่ เล็กลงได้ ดูคำแนะนำเกี่ยวกับ Material

ควรทำ

ยุบ App Bar ด้านบนขนาดเล็กให้มีความสูงเท่ากับแถบสถานะหาก App Bar เป็นแบบติดหนึบ

ควรทำ

เพิ่มการไล่ระดับสีพื้นหลังที่ตรงกันหากแถบแอปด้านบนขนาดเล็กไม่ติดหนึบ

แถบสถานะควรโปร่งแสงเมื่อ UI เลื่อนอยู่ด้านล่าง เพื่อให้ไอคอนแถบสถานะไม่ดูรก หากต้องการดำเนินการนี้ ให้สร้างขอบ UI ที่เลื่อนได้แบบเต็มหน้าจอก่อนโดยทำตามขั้นตอนในเอกสารประกอบ LazyColumn หรือ RecyclerView จากนั้นตรวจสอบว่าแถบระบบโปร่งแสงโดย ทำอย่างใดอย่างหนึ่งต่อไปนี้