การพัฒนา iOS ด้วย Swift 2 - เลย์เอาต์อัตโนมัติ

เมื่อเราสร้างแอปพลิเคชัน iOS และเพิ่มองค์ประกอบ UI ในแอปพลิเคชันนั้นอาจดูเหมือนสมบูรณ์แบบในอุปกรณ์เดียว อย่างไรก็ตามตอนนี้เราควรลองใช้แอปพลิเคชันเดียวกันกับอุปกรณ์อื่น ๆ เราจะเห็นการเปลี่ยนแปลงอย่างมากใน UI และองค์ประกอบบางอย่างอาจไม่ปรากฏด้วยเช่นกัน

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

เราจะเริ่มต้นด้วยการสร้างแอปพลิเคชันมุมมองเดียวใหม่

การเพิ่มองค์ประกอบ

เพิ่มป้ายกำกับที่ตรงกลางด้านบนของมุมมองและอีกป้ายหนึ่งที่ด้านล่างขวาของมุมมองดังที่แสดงด้านล่าง -

ตอนนี้ลองเปลี่ยนการวางแนวและเราจะเห็นว่าด้านล่างขวาไม่ปรากฏขึ้นในขณะที่ Center ไม่ได้อยู่ตรงกลาง

(Tip - คุณไม่จำเป็นต้องเรียกใช้โปรแกรมจำลองเพื่อดูเลย์เอาต์เพียงคลิกที่ View as - iPhone x ที่ด้านล่างของหน้าจอดังที่แสดงในภาพหน้าจอต่อไปนี้)

เลือกเวอร์ชัน iPhone และการวางแนว เราจะเห็นว่าองค์ประกอบ UI ไม่ได้ถูกจัดวางอย่างเหมาะสม ดังนั้นเมื่อเราเปลี่ยนการวางแนวอุปกรณ์หรือทั้งสองอย่างป้ายด้านล่างขวาจะหายไปและศูนย์กลางจะไม่อยู่ตรงกลาง

สิ่งนี้เกิดขึ้นเนื่องจากเราไม่ได้ระบุตำแหน่งคงที่สำหรับองค์ประกอบ ในการแก้ปัญหานี้เราจะใช้ Constraints

การใช้ข้อ จำกัด กับองค์ประกอบ UI

คลิกที่ Center Label กด control แล้วลากที่ใดก็ได้ในมุมมองปล่อย ตอนนี้คุณต้องเห็น -

เลือก Center Horizontally in Container. ทำซ้ำขั้นตอนข้างต้นอีกครั้งแล้วเลือก Vertical Spacing to Top Layout Guide

ตอนนี้คลิกที่ปุ่มเพิ่มข้อ จำกัด ใหม่แล้วเลือกความสูงและความกว้างแล้วคลิกเพิ่ม 2 ข้อ จำกัด

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

(Tip- หากต้องการเลือกหลายตัวเลือกพร้อมกันให้กด shift และเลือกตัวเลือก ตรวจสอบให้แน่ใจว่าคุณจะไม่ปล่อยกะจนกว่าคุณจะเลือกทุกอย่างแล้ว)

หลังจากใช้ข้อ จำกัด ทั้งหมดแล้วมุมมองควรมีลักษณะดังนี้ -

Stack View

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