เลย์เอาต์อัตโนมัติเป็นระบบเลย์เอาต์ตามข้อจำกัดที่ใช้สำหรับการพัฒนาส่วนต่อประสานผู้ใช้สำหรับอุปกรณ์ iOS ระบบจำกัดตามเลย์เอาต์นี้เรียกอีกอย่างว่าเลย์เอาต์อัตโนมัตินั้นเป็น UI แบบปรับได้ซึ่งปรับให้เข้ากับหน้าจอที่มีขนาดและทิศทางต่างกัน
เลย์เอาต์อัตโนมัติขึ้นอยู่กับข้อจำกัดที่ผู้พัฒนากำหนดความสัมพันธ์ระหว่างองค์ประกอบใกล้เคียงหรือองค์ประกอบหลักเพื่อยึดตำแหน่ง
ทำไมต้องเลย์เอาต์อัตโนมัติ
ขณะออกแบบแอปพลิเคชัน iOS คุณต้องแน่ใจว่า UI ที่คุณกำลังพัฒนาควรเข้ากันได้อย่างเท่าเทียมกันกับขนาดหน้าจอและการวางแนวทั้งหมด การจัดวางอัตโนมัติมีประโยชน์เมื่อคุณต้องการ
พิจารณาภาพด้านล่าง ปุ่มที่เก็บไว้จากส่วนกลางใน iPhone 6 ไม่จัดตำแหน่งจากส่วนกลางกับอุปกรณ์อื่น เนื่องจากอุปกรณ์ iOS ต่างๆ มีมิติต่างกัน ในโพสต์นี้ เราจะเน้นที่ข้อจำกัด ดังนั้นหากคุณต้องการอ่านเพิ่มเติมเกี่ยวกับมิติข้อมูล สามารถดูได้ที่ https://iosres.com/
เพื่อให้แน่ใจว่า UI ที่เราพัฒนาขึ้นนั้นมีความเหมือนกันในทุกอุปกรณ์และการวางแนว เราจะใช้เค้าโครงอัตโนมัติ มาเริ่มกันเลย
ขั้นตอนที่ 1 − เปิด Xcode → New Projecr → Single View Application → ตั้งชื่อมันว่า "AutoLayout"
ขั้นตอนที่ 2 − เปิด Main.storyboard เพิ่มปุ่มตามที่แสดงด้านล่าง เพื่อใช้อ้างอิงอุปกรณ์ที่เลือกเป็น iPhone 7Plus
คุณจะเห็นว่าเราได้เพิ่มปุ่มหนึ่งปุ่มในตำแหน่งแบบสุ่มโดยไม่มีข้อจำกัดใดๆ เป้าหมายของเราคือวางปุ่มนี้ไว้ตรงกลางและเข้ากันได้กับอุปกรณ์และทิศทางทั้งหมด ก่อนที่เราจะไปยังขั้นตอนที่ 3 มาทำความเข้าใจกันก่อนว่าเราต้องทำอะไรและเราจะบรรลุเป้าหมายนี้ได้อย่างไร
Xcode มีสองวิธีในการกำหนดข้อจำกัดเค้าโครงอัตโนมัติ → แถบเค้าโครงอัตโนมัติ และ Control-drag แม้ว่าเราจะใช้แถบ Auto Layout บ่อยมากและในบล็อกนี้ด้วย แต่ฉันจะบอกวิธีใช้ Control-drag ให้คุณทราบด้วย ใน Xcode ของคุณที่มุมล่างขวาของตัวสร้างส่วนต่อประสาน คุณอาจเห็นปุ่ม 5 ปุ่มที่รู้จักในฐานะปุ่มเค้าโครงที่ใช้กำหนดข้อจำกัด
ตอนนี้เราจะใช้แถบเค้าโครงอัตโนมัติเพื่อกำหนดข้อจำกัดให้กับปุ่มทั้งสอง
ทฤษฎีหลักที่ระบบข้อจำกัดทั้งหมดทำงานคือพารามิเตอร์ 4 ตัว (นำหน้า ต่อท้าย บน และล่าง) ตลอดจนความสูง ความกว้าง และศูนย์กลางแนวตั้งและแนวนอน
ขั้นตอนที่ 3 - คลิกที่ปุ่มและแท็บบน Align เปิดใช้งานแนวนอนและแนวตั้งในคอนเทนเนอร์ดังที่แสดงด้านล่าง
หลังจากเพิ่มข้อจำกัดทั้งสองแล้ว คุณจะเห็นปุ่มของคุณอยู่ตรงกลางหน้าจอ
คุณสามารถเลือกทำสิ่งเดียวกันได้ผ่านคุณสมบัติการลากตัวควบคุม ดังที่แสดงด้านล่าง เลือกองค์ประกอบ UI แตะที่ปุ่มควบคุมแล้วลากเพื่อให้มีข้อจำกัด ให้กึ่งกลางในแนวนอนและแนวตั้ง
ขั้นตอนที่ 4 − ตอนนี้เราจะกำหนดความกว้างและความสูงของปุ่ม เลือกเพิ่มตัวเลือกข้อจำกัดใหม่ดังที่แสดงด้านล่างและเพิ่มความสูงและความกว้าง
อีกทางหนึ่ง คุณสามารถระบุข้อจำกัดชั้นนำ ข้อจำกัดต่อท้าย ระยะขอบบน และระยะขอบล่าง หากคุณไม่ต้องการระบุแนวนอนและแนวตั้งให้กับคอนเทนเนอร์
ขั้นตอนที่ 5 − เราได้จัดเตรียมข้อจำกัดที่จำเป็นทั้งหมดแล้ว เราควรจำขอบทั้ง 4 ด้าน จัดแนวแกน X จัดแนวแกน Y ความกว้างและความสูง เราจำเป็นต้องยึดคอมโพเนนต์ UI
ตอนนี้เรามาทำงานในอุปกรณ์ต่าง ๆ และดูผลลัพธ์กัน เราจะทำงานในอุปกรณ์และการวางแนวที่แตกต่างกัน
คุณยังสามารถแก้ไขข้อจำกัดได้ หากต้องการแก้ไขหรือลบข้อจำกัดดังกล่าว ในพื้นที่ยูทิลิตี้ที่บานหน้าต่างด้านขวา ให้เลือกตัวเลือกหมายเลข 5 แล้วเลื่อนด้านล่างตามที่แสดงในภาพ
ดังนั้น บทช่วยสอนนี้จึงจัดทำขึ้นเพื่อให้คุณทราบข้อมูลคร่าวๆ เกี่ยวกับวิธีใช้เค้าโครงอัตโนมัติและข้อจำกัดในการพัฒนา UI ที่ปรับเปลี่ยนได้ คุณสามารถลองใช้ส่วนประกอบหลายๆ ส่วนได้โดยใช้แนวคิดพื้นฐานด้านบน
