เลย์เอาต์แอปแบบเลื่อน

สำหรับหน้าที่มีข้อมูลเพิ่มเติมซึ่งยาวเกินความสูงของหน้าจอ หรือต้องใช้เส้นทางที่ยาวขึ้นและสมจริงมากขึ้น ให้ใช้ ScrollView

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

กล่องโต้ตอบที่มีปุ่มด้านล่างซ้อนกัน

กล่องโต้ตอบที่มีปุ่มด้านล่างซ้อนกัน

กล่องโต้ตอบที่มีปุ่มคู่ด้านล่าง

ตัวอย่างเลย์เอาต์การเลื่อนที่กำหนดเอง

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

เนื้อหาเพิ่มเติมบนหน้าจอขนาดใหญ่

รายการปุ่ม: ปุ่มไอคอนที่มีขนาดไอคอน 26dp

รายการปุ่ม: ปุ่มแอปที่มีขนาดไอคอน 32dp

รายการปุ่ม: ปุ่มแอปที่มีขนาดไอคอน 36dp

รายการปุ่มที่มีปุ่มเปิด/ปิด

รายการแบบผสมที่มีองค์ประกอบแบบบรรทัดเดียว

รายการแบบผสมที่มีองค์ประกอบหลายบรรทัด

รายการการ์ดที่มีการ์ดแอป

รายการการ์ดที่มีการ์ดชื่อ

รายการการ์ดที่มีการ์ดที่กำหนดเอง

รายการข้อความ

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

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

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

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