iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad) |
iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad) จากบทความก่อนหน้านี้เราได้รู้วิธีการสร้าง View บน Storyboard ด้วยวิธีอันแสนง่าย ภายในไม่กี่นาทีเราก็สามารถสร้างสรร Application ที่ประกอบด้วยหลาย View ได้อย่างง่ายดายและรวดเร็ว และผมเองก็ยอมรับว่าเป็น Tools ที่สุดยอดจริง ๆ และจากบทความที่แล้วได้พูดถึงเรื่องการสร้าง Class (Objective-C)ที่เป็น .h และ .m แล้วทำการเชื่อมโยงให้กับแต่ล่ View
iOS Storyboard View and Class
จากขั้นตอนการสร้าง Storyboard ที่เราสร้าง View ขึ้นมาต่าง ๆ บน Storyboard แต่ View เหล่านั้นจะทำการเชื่อมโยงไปยัง Class ที่เป็น .h และ .m ได้อย่างไร และเหตุผลที่จะต้องเชื่อมโยงระหว่าง View กับ Class ก็คือ ในการเขียน Application ที่มีความซับซ้อน ที่ไม่ใช่แค่แสดงข้อความบน Label ที่เป็น Static View แต่เราต้องการให้มันฉลาดขึ้นและโต้ตอบกับผู้ใช้ เราไม่สามารถจัดการส่วนต่าง ๆ ผ่าน Interface Builder ได้ทั้งหมด เหตุผลนี่เองเราจึงจำเป็นจะต้องสร้าง Class ให้กับ View แต่ล่ะตัว และ Class นั้นเราจะใช้ภาษา Objective-C ในการที่จะเขียน Code และเงื่อนไขต่าง ๆ ให้ View ในหน้านั้น ๆ ทำงานตามที่ต้องการ
iOS/iPhone Storyboard and View , Multiple View (Objective-C, iPhone, iPad)
เพื่อไม่ให้เกิดความสสับสนจะขอเริ่มต้นตั้งแต่ขั้นตอนการเริ่มสร้าง App
![iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad) iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-views-storyboard-class-01.jpg?v=1001)
เลือก Proejct เป็นแบบ Single View Application
![iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad) iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-views-storyboard-class-02.jpg?v=1001)
ขั้นตอนนี้อย่าลืมว่าจะต้องเลือก Use Storyboards ด้วย
![iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad) iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-views-storyboard-class-03.jpg?v=1001)
หลัก ๆ แล้วหลัวจากที่ Project ถุกสร้างไฟล์ที่ใช้จริง ๆ จะมีอยู่แค่ 3 ไฟล์คือ AppDelegate.h , AppDelegate.m และ MainStoryboard.storyboard ส่วนไฟล์ที่เป็น ViewController.h , ViewController.m เราสามารถทำการลบมันทิ้งได้
![](/images/adv.jpg)
![iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad) iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-views-storyboard-class-04.jpg?v=1001)
ลบไฟล์ ViewController.h และ ViewController.m ทิ้ง
![iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad) iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-views-storyboard-class-05.jpg?v=1001)
คลิกขวาเลือก Delete ไฟล์ทั้ง 2 ทิ้ง
![iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad) iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-views-storyboard-class-06.jpg?v=1001)
เลือก Remove References (ลบออกจาก Project แต่ยังอยู่ในโฟเดอร์ App เพียงแต่ไม่ถูก Include เข้ามา หรือมองไม่เห็น) หรือ Move to Trash (ลบทิ้งทั้งใน Project และ App)
![iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad) iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-views-storyboard-class-07.jpg?v=1001)
ไฟลืได้ถูกลบไปเรียบร้อยแล้ว และเลือกหลัก ๆ แค่ 3 ไฟล์ AppDelegate.h , AppDelegate.m และ MainStoryboard.storyboard
![iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad) iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-views-storyboard-class-08.jpg?v=1001)
กลับมายังหน้า Storyboard เราจะทดสอบสร้าง View ขึ้นมา 3 ตัวบน Storyboard
![iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad) iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-views-storyboard-class-09.jpg?v=1001)
ได้ View ทั้ง 3 ตัวอยู่บน Storyboard
![iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad) iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-views-storyboard-class-10.jpg?v=1001)
ถ้าต้องการสร้าง Object ต่าง ๆ ด้วย Interface Builder ลงในแต่ล่ะ View ก็สามารถหาอ่านได้จากบทความก่อน ๆ ที่ได้เขียนไว้
ขั้นตอนการสร้าง Class (.h และ .m)
ใน Stroyboard เรามี View อยู่ 3 ตัว เฉพาะฉะนั้นเราจะสร้าง Class Class (.h และ .m) ขึ้นมา 3 ชุด ซึ่งปกติการสร้าง Objective-C Class ขึ้นมาแต่ล่ะครั้งจะได้ไฟล์ .h และ .m ขึ้นมาพร้อมกันในทันที
![iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad) iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-views-storyboard-class-11.jpg?v=1001)
คลิกขวาที่ Folder App เลือก New File...
![iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad) iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-views-storyboard-class-12.jpg?v=1001)
ภายใต้ iOS -> Cocoa Touch ให้เลือก Objective-C Class และเลือก Next
![iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad) iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-views-storyboard-class-13.jpg?v=1001)
ให้ใส่ชื่อ Class และเลือก Subclass เป็น UIViewController อย่าลืมว่า Checkbox จะต้องไม่เลือกตั้งสองรายการ
![iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad) iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-views-storyboard-class-14.jpg?v=1001)
เลือก Path ที่จัดเก็บ
![iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad) iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-views-storyboard-class-15.jpg?v=1001)
เราจะได้ไฟล์ .h และ .m ขึ้นมา 1 ชุด
![iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad) iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-views-storyboard-class-16.jpg?v=1001)
จากนั้นให้สร้างขึ้นมาอีก 2 ชุด ซึ่งตอนนี้เราได้ไฟล์ Class ทั้งหมด 3 ชุด สำหรับ View 3 ตัว เป็นที่เรียบร้อยแล้ว
ขั้นตอนการเชื่อมโยง View ใน Storybord กับ Class
หลังจากที่ได้ Class ขึ้นมา 3 ชุด พราก็พร้อมที่จะเชื่อมโยง View ที่อยู่บน Storyboard กับ Class ทั้ง 3 ตัว
![iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad) iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-views-storyboard-class-17.jpg?v=1001)
ให้เลือก View ที่ต้องการและคลิกที่ File's Owner (Icons สีแดง) จากนั้นให้ไปที่ Inspector ที่อยู่มุมขวาบน ในรูป
![iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad) iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-views-storyboard-class-18.jpg?v=1001)
ตรง Custom Class ให้เลือกทำการ Map เชื่อม View กับ Class ที่ต้องการ และให้ทำจนครบทั้ง 3 View หลังจากเรียบร้อยแล้ว เราก็ได้ View บน Storyboard ที่เชื่อมโยงกับ Class ต่าง ๆ แล้ว
![iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad) iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-views-storyboard-class-19.jpg?v=1001)
สังเกตุว่าต่อไปนี้ถ้าเราเลือกมุมมองของ UI และ Coding บน Class จะมีการเชื่อมโยงกับไฟล์ Class ที่เป็น .h และ .m ให้ทันที
![iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad) iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-views-storyboard-class-20.jpg?v=1001)
มุมมอง UI กับ Class
![iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad) iOS/iPhone Storyboard and Custom Class in View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-views-storyboard-class-21.jpg?v=1001)
มุมมอง UI กับ Class
วิธีข้างต้นเป็นเพียงการเชื่อมโยง View ที่อยู่บน Storyboard กับ Class ที่สร้างขึ้นมาใหม่ ด้วยวิธีง่าย ๆส่วนการเขียน Code ต่าง ๆ ให้ Class ควบคุมการทำงานของ View ก็สามารถเขียนได้เช่นเดียวกับ Class ควบคุมการทำงานของ .xib ไฟล์ ซึ่งรูปแบบและวิธีการนั้น ทั้งการออกแบบ UI ด้วย Interface Builder และการเขียน Code ต่าง ๆ ด้วยภาษา Objectve-C ก็เหมือนกันทุกประการ
|
ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท
|
|
|
By : |
ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ) |
|
Score Rating : |
![](/images/resource/startrue.gif) ![](/images/resource/startrue.gif) ![](/images/resource/startrue.gif) |
|
|
Create/Update Date : |
2012-10-23 21:55:03 /
2017-03-25 23:51:53 |
|
Download : |
|
|
Sponsored Links / Related |
|
|
|
|
|
|
|