เลย์เอาต์ของแอปแบบไม่เลื่อน

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

คอมโพเนนต์เลย์เอาต์แบบไม่เลื่อนที่กำหนดไว้ล่วงหน้า

ตัวอย่างเลย์เอาต์แบบไม่เลื่อนที่กำหนดเอง

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

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

พฤติกรรมที่ตอบสนองและปรับเปลี่ยนได้

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

สำหรับปุ่ม การ์ด และขอบของ UI หลายรายการ ให้ขยายและเติมพื้นที่ สำหรับขนาดหน้าจอต่างๆ เพื่อใช้ประโยชน์จากพื้นที่ว่างใน UI และสร้างเลย์เอาต์ที่สมดุล

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

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

เส้นทางหน้าเว็บหลายหน้าแบบไม่เลื่อนโดยใช้การแบ่งหน้า

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