สำหรับหัวข้อนี้สามารถนำไปใช้ได้ทั้งกับนักพัฒนาที่ใช้ Xcode และ Xamarin.iOS นะครับ แต่ภาพตัวอย่างที่ใช้ประกอบในบทความจะมาจาก Xamarin.iOS บน Visual Studio ครับ อุปกรณ์ที่ใช้งานระบบปฏิบัติการ iOS ในปัจจุบัน มีอะไรบ้าง และขนาดหน้าจอ ความละเอียดเท่าไหร่  คงเป็นคำถามแรกๆสำหรับนักพัฒนาแอปพลิเคชันสำหรับใช้งานบนระบบปฏิบัติการ iOS ก่อนที่จะเริ่มออกแบบหน้าจอ ข้อมูลจาก http://iosres.com/ นี้คือคำตอบนั้นครับ ความหลากหลายของขนาดหน้าจอ  จะเห็นได้ว่าเยอะไม่แพ้ Android เลยทีเดียวสำหรับปัจจุบัน เมื่อแอปพลิเคชันของเราจำเป็นต้องทำงานได้บนทุกอุปกรณ์  ต้องทำอย่างไร บทความนี้จะสรุปสิ่งที่ต้องรู้และศึกษาเพิ่มเติม เกี่ยวกับการทำ Adaptive Layout หรือ รูปแบบการแสดงผลที่ปรับเปลี่ยนไปตามขนาดหน้าจอได้เอง   Unified Storyboard เล่าวิวัฒนาการของวิธีการออกแบบ UI ของ iOS แอปพลิเคชันซักหน่อยนะครับ โดยแต่เริ่มนั้นเนื่องจากมีเพียงแค่ iPhone ที่ใช้ระบบปฏิบัติการ iOS เครื่องมือของทาง Apple สำหรับใช้ออกแบบหน้าจอเรียกว่า Interface Builder ซึ่งปัจจุบันถูกผนวกรวมมากับ Xcode เรียบร้อยแล้ว ใช้ไฟล์ .xib ในการออกแบบ ลักษณะจะเป็น 1 หน้าจอ 1 ไฟล์  ใช้ไฟล์เพียงชุดเดียว แต่เมื่อมี iPad ซึ่งมีขนาดหน้าจอที่แตกต่างออกไป นักพัฒนาก็ต้องสร้างไฟล์สำหรับ iPad อีกชุด ต่อมาไฟล์สำหรับออกแบบ UI ที่ชื่อว่า Storyboard  ก็ถูกนำมาใช้งาน เป็นการออกแบบในลักษณะที่ สามารถวางหน้าจอ หลายๆ หน้าจอ และกำหนดความเชื่อมโยง โดยใช้ segue เป็นตัวเชื่อมการแสดงผล แต่ก็ยังต้องมี ไฟล์ Storyboard สำหรับ iPhone และ iPad แยกกันอยู่ดี เมื่อมาถึง iOS 8.0 ความหลากหลายของขนาดหน้าจอมีมากขึ้นแม้แต่ iPhone เอง ก็มีหลายขนาด ตัว Unified Storyboard จึงถูกนำมาใช้เพื่อแก้ปัญหานี้ ทำให้ออกแบบ Storyboard เพียงไฟล์เดียวสามารถใช้งานได้กับอุปกรณ์ทุกขนาดหน้าจอ โดยใช้ร่วมกับเทคโนโลยีอีก 2 อย่างคือ Auto Layout และ Size Class วิธีการใช้งาน 1. เมื่อสร้างโปรเจ็คจะมีไฟล์ .storyboard เปิดไฟล์ จากนั้นในหน้าต่าง Property เลือกใช้งาน Use Auto Layout, Use Size Classes 2. ด้านบนของ Interface Builder จะปรากฏเมนูที่เกี่ยวกับการทำ Unified Storyboard ดังรูป 3. ทำการกำหนดค่าใน info.plist เพื่อใช้ไฟล์ Storybord ดังกล่าวเป็น Main interface ของทั้ง iPhone และ iPad 4. ตอนนี้ไฟล์ Storyboard ของเราก็พร้อมใช้งาน รองรับการออกแบบโดยมีความสามารถ Auto Layout และ Size Class ให้ใช้งานแล้วครับ   Auto Layout แนวคิดหลักของ Auto Layout คือการตั้งเงื่อนไขเพื่อกำหนดตำแหน่งและขนาดของ Control ที่อยู่บนหน้าจอ เพื่อให้สามารถปรับตำแหน่งให้เหมาะสมกับขนาดหน้าจอที่เปลี่ยนไปได้ ซึ่งเรียกว่า Constraint มีหลายชนิดด้วยกันดังนี้ Size Constraints คือการกำหนดขนาด โดยระบุ ความกว้าง ความสูง โดยส่วนตัวผมคิดว่าแบบนี้ค่อนข้างได้ใช้น้อยครับ เพราะเหมือนกับเรากำหนด Property ความกว้าง ความสูง ปกติ เหมาะใช้กำหนดแค่ความกว้าง หรือ ความสูงอย่างใดอย่างหนึ่งผสมกับ Constraints แบบอื่นๆ Center Constraints คือการกำหนดให้อยู่ในจุดกึ่งกลาง โดยอ้างอิงจากขนาดของ View ที่เปลี่ยนไป จะทำให้อยู่ในตำแหน่งกลางเสมอ อันนี้ก็ได้ใช้งานบ่อยครับ Combinational Constraints คือการอ้างอิงตำแหน่งของ Control

การพัฒนาแอปพลิเคชันสำหรับระบบปฏิบัติการ iOS นั้นมีหลายช่องทางในปัจจุบัน โดยไม่นานมานี้ ทางไมโครซอฟ ได้เข้าซื้อ Xamarin ซึ่งเป็นซอฟแวร์ สร้างแอปพลิเคชันสำหรับ Android, iOS, Windows Phone โดยใช้ภาษา C# โดยมีแนวคิดแชร์โค้ดในส่วน Logic ระหว่างแพลตฟอร์มได้ (แต่ส่วน User Interface และ Controller ต้องเขียนแยกกัน) ซึ่งเดิมทีซอฟแวร์ตัวนี้มีค่าใช้จ่ายในการนำมาใช้งานพอสมควร แต่ปัจจุบัน สามารถใช้ร่วมกับ Visual Studio ได้ตั้งแต่รุ่น Community ซึ่งฟรี ทำให้มีความน่าสนใจในการนำมาใช้งานสำหรับ ทีมพัฒนาระบบ ที่ใช้ Visual Studio ร่วมกับ ภาษา C# อยู่แล้วเป็นอย่างมาก สิ่งที่ต้องมี สำหรับการใช้ Xamarin พัฒนา iOS แอปพลิเคชัน 1.เครื่องคอมพิวเตอร์ที่ติดตั้ง macOS ได้ เช่น MacBook , MAC Pro, iMAC เป็นต้น หรือหากท่านใดสามารถสร้าง Virtual Machine ด้วย VirtualBox หรือ VMware แล้วติดตั้ง macOS ได้ ก้สามารถใช้งานได้เช่นกัน 2.Apple ID ที่ลงทะเบียน Apple Developer Account ไว้เรียบร้อยแล้ว (มีค่าใช้จ่ายรายปีประมาณ 3000 บาท) 3.หากต้องการใช้ Visual Studio เวอร์ชันสำหรับ Windows ในการพัฒนาก็ต้องมี เครื่องคอมพิวเตอร์อีกเครื่องที่ติดตั้งระบบปฏิบัติการ Windows (สำหรับท่านที่ต้องการใช้เครื่องเดียว สามารถใช้ Xamarin Studio หรือ Visual Studio For Mac ได้ เท่าที่ผมทดลองใช้งานก็มีความพร้อมระดับใช้งานได้ แม้จะเป็นเวอร์ชั่น Preview ในขณะที่ทดลองก็ตาม) ติดตั้ง Xamarin และ ตั้งค่าบน macOS 1.ติดตั้ง Xcode จาก App Store ให้เรียบร้อย เนื่องจากตัว Xamarin จำเป็นต้องใช้งานทั้ง iOS SDK และ Simulator ที่ติดตั้งมาพร้อมกับ Xcode ในการ Build และ Run เพื่อทดสอบแอปพลิเคชันของเรา 2.ใช้ Apple Developer Account สร้าง Provisional Profile ได้ที่ https://developer.apple.com/account/ios/certificate จากนั้นทำการดาวน์โหลดและติดตั้งให้เรียบร้อย 3.ดาวน์โหลดตัวติดตั้ง ที่ https://www.xamarin.com/download ใส่ข้อมูล ชื่อ, อีเมล, หน่วยงาน แล้วเลือกว่ามีการติดตั้ง Visual Studio ไว้แล้วหรือไม่ เลือกยอมรับข้อตกลง เลือก Download Xamarin Studio for OS X 4.เมื่อเริ่มติดตั้งจะมีหน้าจอให้ยอมรับข้อตกลง และแสดงความคืบหน้าในการติดตั้ง รอจนแจ้งผลติดตั้งเสร็จสิ้น 5.ตั้งค่าเปิดใช้งาน Remote Login สำหรับการเชื่อมต่อจากเครื่องพัฒนาอื่นไปที่ System Preferences > Sharing 6.เสร็จเรียบร้อยในฝั่ง macOS ติดตั้ง Xamarin บน Windows เพื่อใช้งานร่วมกับ Visual Studio 1.ดาวน์โหลดตัวติดตั้ง Visual Studio เวอร์ชั่นที่ต้องการใช้งาน สามารถใช้ได้ทั้ง Community, Professional, Enterprise (ในขณะที่เขียนผมใช้เวอร์ชั่น Enterprise 2015 with update 3) 2.เลือกติดตั้งแบบ Custom 3.ติดตั้ง Cross Platform Mobile Development Plugin ที่ตัวเลือกจะมีวงเล็บไว้ให้แล้วว่าเป็น Xamarin เลือกให้เรียบร้อยกด Next