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