Storyboards ถูกนำเสนอให้กับนักพัฒนาครั้งแรกใน iOS 5 พวกมันช่วยประหยัดความยุ่งยากของนักพัฒนาที่ต้องออกแบบอินเตอร์เฟซของแต่ละหน้าจอในไฟล์ต่างกัน Storyboard ช่วยให้คุณเห็น Mockup แนวคิดของแอปทั้งหมด และการโต้ตอบระหว่างแต่ละหน้าจอ โดยใช้ Segues คุณสามารถตั้งค่าได้ว่าแอปจะเปลี่ยนหน้าจออย่างไร และส่งข้อมูลไปพร้อมกัน ในบทช่วยสอนนี้ จะแสดงวิธีทำหน้าจอ Login เรียบง่ายสำหรับแอป
เริ่มต้น
สิ่งแรกที่คุณต้องการทำคือสร้างโปรเจกต์ใหม่ คุณจะต้องการแอปพลิเคชัน Single View ใหม่ ตั้งภาษาเป็น Swift และ Devices เป็น Universal หากคุณไปที่ Storyboard คุณควรจะเห็น Empty View Controller Scene ลูกศรด้านซ้ายของ View Controller บ่งชี้ว่าเป็น Root Controller
เพื่อเพิ่ม Label สำหรับ Username และ Password คุณต้องไปที่กล่องด้านขวาล่างของหน้าจอ เลือกวงกลมที่มีสี่เหลี่ยมอยู่ใน และลากวาง Label สองตัวลงบน View ของคุณ โดยเลือก Preferences บน Sidebar คุณสามารถระบุพารามิเตอร์สำคัญมากมาย มีมากเกินกว่าจะอธิบายแต่ส่วนใหญ่เข้าใจได้เอง
สองอย่างที่สำคัญสำหรับเราคือ Placeholder Text และ Secure Text Entry Checkbox เราต้องการใช้ Placeholder Text เพื่อบอกผู้ใช้ว่าต้องการข้อมูลอะไร และ Secure Entry เพื่อซ่อนรหัสผ่านของผู้ใช้ หลังจากนี้เสร็จ เราต้องการปุ่มเพื่อ Trigger Segue ของเรา เราสามารถลากปุ่มมาได้ในลักษณะเดียวกับที่เราทำกับ Text Field หลังจากที่คุณตั้งชื่อปุ่มและจัดวางวัตถุบนหน้าจอ ควรจะดูเหมือนภาพนี้:
ตอนนี้หน้าจอแรกของแอปเสร็จแล้ว เราต้องทำอีกหน้าจอหนึ่งเพื่อ Transition ไป ไปที่โดยการลาก View Controller ตัวที่สองลงบนหน้าจอ เพื่อเชื่อมต่อสองหน้าจอ คุณต้องทำ 2 สิ่ง แรก คุณต้อง Control-Click ที่ปุ่ม และลากไปที่หน้าจอใหม่ที่คุณเพิ่ม ต่อไป คุณต้องเลือกวงกลมระหว่างสอง View คุณจะต้องเปลี่ยน Identifier ของ Segue สำหรับตัวอย่างนี้ จะใช้ "nextScreen"
สุดท้าย เราจะวาง Label บนหน้าจอใหม่ เพื่อให้เราสามารถดู User และดูว่าแอปทำงานหรือไม่ เพื่อให้สามารถเข้าถึงฟิลด์จาก Storyboard โดยทางโปรแกรม เราจะต้องสร้าง Outlets สำหรับพวกมันใน Class ที่ใช้พวกมัน เช่นนี้:
class FirstScreen: UIViewController {
@IBOutlet weak var username: UITextField!
@IBAction func loginButton(sender: AnyObject) {
perfromSegueWithIdentifier("nextScreen", sender: self)
}
}
class SecondScreen: UIViewController {
var user: String!
@IBOutlet weak var username: UILabel!
override func viewDidload() {
username.text = user
}
}
หลังจากนี้เสร็จ ให้แน่ใจว่าเชื่อมต่อวัตถุจาก Storyboard โดยใช้ Connections Inspector ของแต่ละหน้าจอ Outlets ของคุณควรจะแสดง และคุณสามารถคลิกวงกลมขวามือของพวกมันเพื่อเชื่อมต่อได้
ฟังก์ชันสุดท้ายที่ต้อง Implement คือ prepareForSegue ใน Class ของหน้าจอแรก นี่ช่วยให้คุณส่งข้อมูลไปยัง View ใหม่ได้ เช่นนี้:
override fun prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
if segue.identifier == "nextScreen" {
let destVC = segue.destinationViewController as UIViewController
destVC.user = self.username
}
}
ตอนนี้คุณมีความเข้าใจพื้นฐานเกี่ยวกับการเปลี่ยนหน้าจอและส่งข้อมูลระหว่างพวกมัน นี่จะให้คุณเริ่มต้นที่ดีในการทำแอปที่ทำงานได้ Happy Programming!
