Storyboard được giới thiệu lần đầu cho nhà phát triển trong bản phát hành iOS 5. Chúng giúp nhà phát triển không phải thiết kế giao diện mỗi màn hình trong file riêng. Storyboard cho thấy bản mô phỏng khái niệm của toàn bộ app và tương tác giữa các màn hình. Sử dụng segues, bạn thiết lập cách app chuyển đổi giữa màn hình và truyền dữ liệu. Trong hướng dẫn này, tôi sẽ chỉ cách tạo màn hình đăng nhập đơn giản cho app.
Bắt đầu
Điều đầu tiên: tạo project mới. Chọn Single View Application, ngôn ngữ Swift, thiết bị Universal. Nếu điều hướng đến Storyboard, sẽ thấy một View Controller Scene trống. Mũi tên bên trái View Controller chỉ ra nó là root controller.
Để thêm label cho tên người dùng và mật khẩu, vào hộp góc dưới phải màn hình, chọn hình tròn có vuông trong, kéo thả 2 label lên view. Chọn tùy chọn thanh bên, chỉ định nhiều tham số quan trọng. Quá nhiều để liệt kê nhưng hầu hết tự giải thích.
Hai tùy chọn quan trọng cho chúng ta: placeholder text và checkbox secure text entry. Dùng placeholder text để người dùng biết thông tin cần nhập, secure entry để ẩn mật khẩu. Sau khi xong, cần nút bấm (button) để kích hoạt segue. Kéo thả button tương tự như text field. Sau khi đặt tiêu đề button và sắp xếp đối tượng, màn hình trông như sau:
Màn hình đầu tiên xong, cần màn hình thứ hai để chuyển tiếp. Kéo thả View Controller thứ hai lên màn hình. Để kết nối 2 màn hình, làm 2 việc: Control-click nút bấm kéo đến màn hình mới. Chọn mũi tên tròn giữa 2 view. Đổi identifier của segue; ví dụ dùng "nextScreen".
Cuối cùng, đặt label trên màn hình mới để xem user và kiểm tra app hoạt động. Để truy cập trường từ storyboard bằng code, tạo outlet cho chúng trong class sử dụng như sau:
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
}
}
Sau khi xong, liên kết đối tượng từ storyboard dùng Connections Inspector của từng màn hình. Outlet sẽ hiện ra, click vòng tròn bên phải để liên kết.
Hàm cuối cùng cần triển khai là prepareForSegue trong class màn hình đầu. Cho phép truyền dữ liệu sang view mới như sau:
override fun prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
if segue.identifier == "nextScreen" {
let destVC = segue.destinationViewController as UIViewController
destVC.user = self.username
}
}
Bây giờ bạn hiểu cơ bản cách chuyển màn hình và truyền dữ liệu giữa chúng. Điểm khởi đầu tốt để tạo app chức năng, chúc lập trình vui vẻ!