สำหรับหัวข้อนี้สามารถนำไปใช้ได้ทั้งกับนักพัฒนาที่ใช้ 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 จาก เส้นขอบทั้ง 4 ด้าน และ Control อื่นๆ ที่อยู่ใน View หรือแม้กระทั่ง Toolbar, Tab bar, Header, Footer ของ View อันนี้ผมใช้เยอะสุดครับ
วิธีการใช้งาน
1. เมื่อได้เปิดใช้งาน Auto Layout ในขั้นตอนการสร้าง Unified Storyboard แล้วนั้น จะปรากฏ Toolbar เมื่อต้องการใช้งาน ให้คลิกเลือกที่ Control ที่ต้องการ จากนั้นคลิกที่ไอคอน เพิ่ม ลบ หรืออัพเดทเฟรม ตามลำดับ โดยที่การเพิ่ม Constraint โดยวิธีการนี้จะเพิ่ม 2 ตำแหน่ง คือ top/bottom + left/right หาก Control นั้นไม่ได้มี intrinsic size (Control ที่จำกัดขนาดกับ View ที่แสดงผล นักพัฒนาไม่สามารถแก้ไขได้) ก็จะเพิ่ม Constraint ระบุ width + height ให้ด้วย
2. จะเห็นได้ว่าการเพิ่ม Constraint โดยใช้ Toolbar นั้น ไม่สามารถตอบสนองการใช้งานได้ครบถ้วน เราสามารถเพิ่ม Constraint ทีละตำแหน่งได้เอง โดยดับเบิ้ลคลิกที่ Control ให้มีลักษณะ ดังรูป
3. จากนั้นสามารถคลิกแล้วลาก ไปยังตำแหน่งอ้างอิง ซึ่งจะเปลี่ยนไปตามแต่ละด้านของ Control
4. เมื่อเพิ่มสำเร็จสามารถตรวจสอบดูได้ที่ Property > Layout
5. ในขณะที่เราเพิ่ม Constraint นั้น อาจจะสังเกตุได้ว่า กรอบของ Control เป็นสีส้ม ซึ่งหมายถึง Constraint ที่เรากำหนดไปนั้นยังไม่สมบูรณ์ หรือมีความขัดแย้งกัน ทำให้ไม่สามารถแสดงผลได้ถูกต้อง เรียกว่า Error นั้นเอง แนะนำว่าให้เพิ่มจนครบทุกด้าน และให้มี Constraint เพียงชนิดเดียวในแต่ละด้านครับ ถ้ายัง Error อยู่ ให้ลองเช็คจุดอ้างอิง ถ้าเป็น Control ด้วยกัน Control ที่ใช้อ้างอิงจะต้องไม่ Error ครับ ไม่เช่นนั้นจะพากัน Error ทั้งหมด
6. หากเพิ่ม Constraint สมบูรณ์กรอบจะเป็นสีน้ำเงิน แบบนี้ครับ และจะมีเส้นไกด์สีน้ำเงินเล็กๆ บอกตำแหน่งอ้างอิงอยู่ด้วย
7. ทำการทดสอบแอปพลิเคชัน ด้วย Simulator ที่ขนาดหน้าจอต่างๆ ว่าแสดงผลถูกต้องหรือไม่
Size Class
เพื่อให้การออกแบบโดยใช้เพียงไฟล์ Storyboard เดียวใช้งานได้กับหน้าจอทุกขนาด ยังมีปัญหาในเรื่องของ การแสดงผลในแนวตั้ง และแนวนอน ที่การกำหนด Constraint ตอนทำ Auto Layout ไม่สามารถทำให้แสดงผลได้ถูกต้องซะทีเดียว จำเป็นต้องมีการแบ่งประเภทหน้าจอแสดงผล โดยใช้ Grid ขนาด 3×3 ซึ่งจะจำแนกได้เป็น 9 แบบ ดังรูป
โดยจะมีคำเรียกขนาด 3 ชนิด คือ Compact, Any, Regular จากเล็กไปใหญ่ตามลำดับ เมื่อนำเอา ความกว้าง และ ความสูง ทั้ง 3 แบบมาใช้ร่วมกันก็จะเป็นตัวแทนของ หน้าจอแบบต่างๆของทุกอุปกรณ์ที่ใช้ระบบปฏิบัติการ iOS ดังนี้ครับ
ภาพประกอบจาก https://developer.apple.com/reference/uikit/uitraitcollection
สังเกตุว่าจะมี แค่ 6 ขนาดที่เทียบกับอุปกรณ์จริงๆได้ ส่วนอีก 3 ขนาด ที่มีความกว้าง ความสูง แบบ Any ผสมอยู่ก็เพื่อใช้กับการออกแบบที่ไม่จำเป็นต้องระบุ Size Class เพราะสามารถใช้ Constraint ร่วมกันได้นั้นเองครับ
วิธีการใช้งาน
1. เมื่อต้องการติดตั้ง Size Class ใดๆเพิ่มเติม ให้เลือก Control ที่ต้องการจากนั้นในหน้าต่าง Property เลื่อนลงไปที่ Stretching คลิกที่รูปไขควง
2. จะมีตัวเลือก Compact, Any, Regular ให้เลือก 2 ลำดับ โดยตัวเลือกลำดับแรกคือชนิดความกว้าง ลำดับที่ 2 คือชนิดความสูง
3. เลือก Size Class ที่ต้องการออกแบบ จาก Toolbar
ในบทความนี้เป็นเพียงแนวทาง และหยิบประเด็นใหญ่ๆที่ควรทราบในเรื่องของการทำ Adaptive Layout มาเท่านั้น เมื่อท่านใช้งานจริงจะยังมีประเด็นต่างๆที่ต้องศึกษาเพิ่มเติมอีกมากมาย หวังว่าสิ่งที่ผมรวบรวมมาจะเป็นประโยชน์ไม่มากก็น้อยครับ
แหล่งอ้างอิง
https://developer.xamarin.com/guides/ios/platform_features/introduction_to_Unified_Storyboards/
https://developer.xamarin.com/guides/ios/user_interface/designer/designer_auto_layout/