สตอรี่บอร์ดได้รับการแนะนำให้รู้จักกับนักพัฒนาเป็นครั้งแรกในการเปิดตัว iOS 5 พวกเขาช่วยนักพัฒนาไม่ให้มีปัญหาในการออกแบบอินเทอร์เฟซของแต่ละหน้าจอในไฟล์อื่น กระดานเรื่องราวช่วยให้คุณเห็นม็อคอัพแนวคิดของแอปโดยรวมและการโต้ตอบระหว่างแต่ละหน้าจอ เมื่อใช้ Segues คุณจะกำหนดวิธีที่แอปจะเปลี่ยนระหว่างหน้าจอที่กำหนดและส่งผ่านข้อมูลไปด้วยได้ ในบทช่วยสอนนี้ ฉันจะแสดงวิธีสร้างหน้าจอการเข้าสู่ระบบอย่างง่ายสำหรับแอป
การเริ่มต้นใช้งาน
สิ่งแรกที่คุณจะต้องทำคือสร้างโครงการใหม่ คุณจะต้องการแอปพลิเคชันหน้าจอเดียวใหม่ที่ตั้งค่าภาษาเป็น Swift และอุปกรณ์ให้เป็นสากล หากคุณไปที่กระดานเรื่องราว คุณจะเห็นฉากควบคุมมุมมองที่ว่างเปล่า ลูกศรทางด้านซ้ายของตัวควบคุมมุมมองระบุว่าเป็นตัวควบคุมรูท
ในการเพิ่มป้ายกำกับสำหรับชื่อผู้ใช้และรหัสผ่าน คุณต้องไปที่กล่องที่ด้านล่างขวาของหน้าจอ เลือกวงกลมที่มีสี่เหลี่ยมจัตุรัสอยู่ในนั้น แล้วลากและวางป้ายกำกับสองป้ายลงในมุมมองของคุณ โดยการเลือกการตั้งค่าบนแถบด้านข้าง คุณสามารถระบุพารามิเตอร์ที่สำคัญได้มากมาย มีมากเกินไปที่จะผ่านไป แต่ส่วนใหญ่อธิบายตัวเองได้
สิ่งสำคัญสองประการสำหรับเราคือข้อความตัวแทนและช่องทำเครื่องหมายการป้อนข้อความที่ปลอดภัย เราต้องการใช้ข้อความตัวแทนเพื่อให้ผู้ใช้ทราบว่าข้อมูลใดที่จำเป็นสำหรับพวกเขา และรายการที่ปลอดภัยเพื่อซ่อนรหัสผ่านของผู้ใช้ไม่ให้แสดง หลังจากเสร็จสิ้น เราจำเป็นต้องมีปุ่มเพื่อเรียกการทำงานของเรา เราสามารถลากไปในลักษณะเดียวกับที่เราทำช่องข้อความ หลังจากที่คุณได้ตั้งชื่อปุ่มและจัดเรียงวัตถุของคุณบนหน้าจอแล้วควรมีลักษณะดังนี้:
ตอนนี้หน้าจอแรกของแอปเสร็จเรียบร้อยแล้ว เราจึงต้องสร้างหน้าจออื่นเพื่อเปลี่ยนไปใช้ ทำได้โดยลากตัวควบคุมมุมมองที่สองลงบนหน้าจอ ในการเชื่อมต่อทั้งสองหน้าจอ คุณต้องทำสองสิ่ง ขั้นแรก คุณจะต้องควบคุมการคลิกที่ปุ่มแล้วลากไปยังหน้าจอใหม่ที่คุณเพิ่มเข้าไป ถัดไป คุณจะต้องเลือกวงกลมระหว่างสองมุมมอง คุณจะต้องเปลี่ยนตัวระบุเป็นภาคต่อ สำหรับตัวอย่างนี้ ฉันจะใช้ “nextScreen”
สุดท้ายเราจะติดป้ายกำกับบนหน้าจอใหม่เพื่อให้เราสามารถดูผู้ใช้และดูว่าแอพของเราใช้งานได้หรือไม่ เพื่อให้สามารถเข้าถึงฟิลด์จากกระดานเรื่องราวโดยทางโปรแกรม เราจะต้องสร้างช่องทางสำหรับพวกเขาในชั้นเรียนที่ใช้ฟิลด์เหล่านี้:
คลาส FirstScreen:UIViewController {
@IBOutlet ชื่อผู้ใช้ var ที่อ่อนแอ:UITextField!
@IBAction func loginButton(sender:AnyObject) {
perfromSegueWithIdentifier("nextScreen", sender:self)
}
}
คลาส SecondScreen:UIViewController {
ผู้ใช้ var:String!
@IBOutlet ชื่อผู้ใช้ var ที่อ่อนแอ:UILabel!
แทนที่ func viewDidload() {
username.text =user
}
}
หลังจากเสร็จสิ้น ตรวจสอบให้แน่ใจว่าได้เชื่อมโยงวัตถุจากกระดานเรื่องราวโดยใช้ตัวตรวจสอบการเชื่อมต่อของแต่ละหน้าจอ ร้านของคุณควรปรากฏขึ้นและคุณสามารถคลิกวงกลมทางด้านขวาเพื่อเชื่อมโยงร้าน
ฟังก์ชันสุดท้ายที่จะนำมาใช้คือฟังก์ชัน prepareForSegue ในคลาสของหน้าจอแรก ซึ่งจะทำให้คุณสามารถส่งข้อมูลไปยังมุมมองใหม่ได้ดังนี้:
แทนที่ความสนุก prepareForSegue (ส่วนต่อ:UIStoryboardSegue ผู้ส่ง:AnyObject?) {
if segue.identifier ==“nextScreen” {
let destVC =segue.destinationViewController เป็น UIViewController
destVC.user =self ชื่อผู้ใช้
}
}
ตอนนี้คุณมีความเข้าใจพื้นฐานเกี่ยวกับวิธีเปลี่ยนหน้าจอและส่งผ่านข้อมูลระหว่างหน้าจอแล้ว สิ่งนี้จะช่วยให้คุณเริ่มต้นได้ดีในการสร้างแอปที่ใช้งานได้จริง การเขียนโปรแกรมอย่างมีความสุข!
