ทำความรู้จักกับ Auto Layout ใน iOS
ในการเริ่มต้นเขียน iOS Application สิ่งหนึ่งที่ทุกคนคงต้องคิดออกแบบ และพัฒนาอย่างหลีกเลี่ยงไม่ได้ก็คือหน้าตาของ application หลายๆคนมักเริ่มต้นโดยใช้ Cross-Platform Framework ซึ่งช่วยให้ไม่ต้องมาเรียนรู้อะไรเพิ่มเติมมากนัก สามารถเขียนด้วย HTML5 และ CSS แล้วปล่อยให้เจ้า Cross-Platform Framework จัดการให้เลย
อย่างไรก็ดีส่วนตัวแล้วผู้เขียนชอบพัฒนาแบบ Native มากกว่า เนื่องด้วยเคยมีปัญหากับเจ้า Framework พวกนี้ แล้วพอทำมาเยอะๆก็หลงๆลืมๆ CSS ไปซะเยอะแล้ว ผู้เขียนก็เลยหมกตัวอยู่กับการเขียนแบบ Native มาหลายปี ก็จะขอมาแชร์ความรู้ในการพัฒนา iOS ด้วย Xcode หวังว่าจะมีประโยชน์กับผู้อ่านที่สนใจจะเริ่มต้นพัฒนา iOS Application ก่อนเริ่ม มาดูกันก่อนว่าเราต้องเตรียมตัวอะไรบ้าง
สิ่งที่ต้องมี (Required)
- Macbook/Mac Mini 1 ea (ผู้เขียนแนะนำว่า หาซื้อเครื่องรุ่นเก่าหน่อยก็จะประหยัดตังไปได้ในระดับนึง)
- Xcode อันนี้ฟรี แต่หลังจากลงทุนกับข้อ 1 ไปแล้วอ่ะนะ
New Xcode Project
เมื่อเปิดโปรแกรม Xcode ขึ้นมาจะขึ้นหน้าตาประมาณในรูปให้เลือก Create a new Xcode project
จากนั้นให้เลือก Single View Application แล้วกรอกข้อมูลชื่อ Application ที่ต้องการลงไป
แล้วก็จะได้ Project แรกหน้าตาประมาณนี้
ซึ่งในบทความนี้จะสนใจแค่ main.storyboard ตัวเดียว ก็เลือกไปที่ main.storyboard
ทำความรู้จักกับ Design Tools
หลังจากเข้าไปที่ Storyboard แล้วเครื่องมือที่ผู้เขียนใช้เป็นประจำจะมีประมาณ 6 ตัว
1. UI ไว้ดูหน้าตาว่าจะออกมาประมาณไหน
2. Object Explorer เป็นหน้าจอที่ไว้แสดงว่าเรามี Objects กี่ตัวบ้างในหน้าจอนี้
3. Objects เป็นปุ่มที่กดเพื่อเลือก Object ต่างๆมาใส่ในหน้าจอ
4. Attributes ไว้ปรับค่าต่างๆของ Object
5. Size ไว้กำหนดค่าขนาดของ Object และ ข้อจำกัดต่างๆ
6. Object’s Constraints ไว้เพิ่มข้อจำกัดทางการแสดงผลให้ Object
การนำ Object ไปแสดงผลใน UI
การเพิ่ม Object ไปบนหน้าจอ สามารถทำได้ด้วยปุ่ม Objects ซึ่งจะแสดงรายการของ Object ทั้งหมดที่มีมาให้เลือก และมีปุ่มค้นหาเพื่อที่จะหา object ที่จะใช้ได้
ซึ่งก็สามารถที่จะลาก Object ที่ต้องการไปบน UI ได้เลย
การกำหนด Object’s Constraints ด้วย Menu Add New Constraints
ในการกำหนด Object’s Constraints ทำได้โดยการเลือก Object ก่อน จากนั้นจะสามารถกดที่ปุ่ม Object’s Constraints ตรงมุมขวาล่างได้ ซึ่งจะมี Menu Add New Constraints ขึ้นมาตามภาพ โดยแบ่งเป็น 3 ส่วนคือ
1.ส่วนการกำหนดระยะห่างกับวัตถุข้างเคียง เช่น ในที่นี้ Image อยู่ภายใน UIView ขอบข้างทั้งสี่ด้านอยู่ติดกับ UIView ทั้งหมด ถ้าเลือก 0,0,0,0 ก็จะทำให้ Image มีขนาดเท่า UIView เลย
2. ส่วนการกำหนดขนาดของ Object ตรงนี้จะเป็นการ Fix Size ของ Object เลย อาจจะกำหนดแค่อย่างเดียวก็ได้ เช่น ต้องการทำ Bar ด้านบนที่ยืดตามขนาดจอ แต่ความสูงเท่าเดิมก็จะกำหนดความสูงค้างไว้
3. ส่วนการกำหนดเงื่อนไขพิเศษ ส่วนใหญ่จะใช้ในการกำหนด Ratio ของวัตถุ
ทีนี้เราจะทดลองสร้างรูป Header ที่จะมีขนาด Ratio เท่าเดิมตลอดแม้ว่าขนาดหน้าจอจะเปลี่ยนไป โดยทำตามขั้นตอนดังต่อไปนี้
1.ให้ลาก UIImage ไปใส่ใน UI
2. กำหนดรูปใน Properties (หากไม่มีรูปให้ลองกำหนดพื้นหลังเป็นสีดำ)
3. เลือก UIImage แล้วคลิ๊กที่ Object’s Constraints
4. กำหนดระยะห่างจากวัตถุใกล้เคียง บน10, ซ้าย10, ขวา10, ไม่ระบุ
5.เลือก Aspect Ratio
6.กด Add Constraints
7.ทดลอง Run (ปุ่ม Play ทางซ้ายบน โดยเลือก เครื่องรุ่นใดก็ได้)
8.ทดลอง กด ⌘+Right Arrow เพื่อหมุน Device
9.ทดลองรันบน Device รุ่นอื่นๆ
จะเห็นว่าไม่ว่าเราจะรันบนหน้าจอขนาดเท่าไหร่ก็ตาม สิ่งที่จะแสดงผลออกมาคือ รูปที่ห่างจากขอบบน ซ้าย และ ขวา 10 pixels และ มี Ratio เท่าเดิมตลอด (สามารถลองปรับ Ratio ได้ที่ Tab Size)
การกำหนด Object’s Constraints ด้วย Drag & Drop
Xcode สามารถที่จะเพิ่ม Constaints ให้กับวัตถุผ่านการ Drag & Drop ได้ดังนี้
1. กดปุ่ม control + left click ที่ Object ที่ต้องการสร้าง Constraint
2. ลากไปปล่อยที่ Object ที่ต้องการจะสร้าง Relation ด้วย
3. เลือกว่าจะสร้าง Relation แบบใด
ดังนั้นเราจะมาทดลองแก้ไขรูปภาพจากข้อ 4 โดยกำหนดให้รูปภาพอยู่ตรงกลางหน้าจอเสมอ โดยสามารถทำได้ตามขั้นตอนดังต่อไปนี้
1.เลือกที่รูปภาพ
2.เข้าไปที่ Tab Size จะเห็นว่าใรหมวด Constraints มี Relations อยู่ 4 อัน
3.ลบ Relations ที่ขึ้นต้นว่า Align ออกให้หมด (align คือการอ้างอิงจัดให้อยู่แนวเดียวกัน)
4.control + left click ที่รูปภาพ แล้วลากไปที่พื้นที่ว่างบน View (บนจอ Design รูป iPhone)
5.ให้ทำสามครั้งโดยเลือกที่ equal width, center horizontal และ center vertical
6.ทดลอง Run (ปุ่ม Play ทางซ้ายบน โดยเลือก เครื่องรุ่นใดก็ได้)
7.ทดลอง กด ⌘+Right Arrow เพื่อหมุน Device
8.ทดลองรันบน Device รุ่นอื่นๆ
จะเห็นว่าหลังจากที่ปรับ Constraints ตามที่ระบุจะได้ หน้าจอที่รูปภาพแสดงผลอยู่ตรงกลางตลอด โดนจะมีความกว้างเต็มหน้าจอเสมอ
Content Hugging Priority และ Content Compression Resistance Priority
หลังจากที่ได้ลอง Constraints กันไปแล้วอีกตัวแปรนึงที่มีความสำคัญมากในการทำ UI ก็คือ Hugging และ Compression Resistance ซึ่งจะเป็นตัวกำหนดว่า Content ที่เชื่อมต่อกันใครมีความสำคัญมากกว่ากัน
Content Hugging Priority ขอกอด(กระชับ)การแสดงผล หรือกล่าวคือ วัตถุมีค่านี้มาก ขนาดของวัตถุจะพอดีกับขนาดของสิ่งที่ต้องแสดงผลที่สุดในกลุ่ม
Compression Resistance ความสำคัญของการแสดงผล วัตถุที่มีค่านี้มากที่สุดจะแสดงผลให้ได้มากที่สุดถึงแม่ว่าวัตถุอันอื่นจะไม่ได้แสดงผลก็ตาม
ตัวอย่าง ให้สร้าง Label 2 อัน เข้ามาในหน้าจอ โดยให้มีพื้นหลังสีน้ำเงินและสีแดงตามรูป
จากนั้นให้กำหนด Contraints บน 0, ซ้าย 0, ขวา 0 ทั้งสองอัน
จะเห็นว่ามีการฟ้อง error (เส้นแดงๆ) เพราะว่าเรากำหนด relation ทางขวา = 0 หมายความว่า Label ต้องชิดขวาด้วย แต่ Label ทั้งสองตัวนี้มี Hugging เท่ากัน ดังนั้นจะไม่มีใครยอมขยายเต็มจอ
แต่ถ้าเราปรับ Hugging Horizontal ของ Label ขวา ให้มากกว่า Label ซ้าย (=251) ซึ่งจะทำให้ได้ผลลัพธ์ตามรูป
ผลลัพธ์นี้เกิดจากค่า Hugging ของ Label ขวา มากกว่า ดังนั้น ขนาดของ Label ทางซ้ายจะต้องขยายเพื่อให้ Relations ที่กำหนดไว้สมบูรณ์
คราวนี้ลองแก้ข้อความทาง Label ทางซ้ายให้ยาวจะเกินจอออก
ซึ่งจะเห็นว่า ข้อความของ Label ซ้ายถูกตัดออกไป (กลายเป็น …) ซึ่งหากต้องการให้ Label ทางซ้ายแสดงให้มากที่สุดโดยไม่สน Label ทางขวา ก็สามารถทำได้โดยการกำหนด Compression Resistance ของ Label ขวา ให้น้อยกว่า Label ซ้าย ก็จะทำให้ Label ทางขวาถูก Label ทางซ้ายทับหายไปดังรูปครับ
จากรูปจะเห็นว่ายังเป็น … อยู่เพราะว่ายังไงก็แสดงผลเกินหน้าจอไม่ได้นะครับ
จากบทความนี้ก็หวังว่าผู้อ่านจะได้รู้พื้นฐานของ Autolayout และก็ลองเอาไปเขียนกันดูนะครับ ถ้ามีคำถาม ข้อสงสัยเพิ่มเติม หรือคำแนะนำอื่นๆ สามารถบอกได้ที่คอมเมนต์เลยนะครับ :)
