Bài 27: UIStoryboard

UIStoryboard

Hôm nay mình sẽ giới thiệu với các bạn UIStoryboard. Một UI mà hầu như lúc nào chúng ta cũng sử dụng nhưng mình chưa có dịp giới thiệu cho các bạn.

1. Giới thiệu UIStoryboard

UIStoryboard là thành phần thể hiện và quản lý giao diện người dùng, trong một Storyboard có thể có một hoặc nhiều màn hình (ViewController).

Mỗi ViewController sẽ quản lý một Scene:

Scene và ViewController
Hình 1.1 Scene và ViewController

Để xem một Scene được quản lý bởi ViewController nào các bạn vào menu Show the Indenity inspector:

Menu Show the Indenity inspector
Hình 1.2 Menu Show the Indenity inspector

Các bạn có thể thêm ViewController vào UIStoryboard bằng cách vào Library tìm ViewController và kéo thả vào UIStoryboard. Các ViewController trong UIStoryboard có thể kết nối với nhau:

Nhiều ViewController trong UIStoryboard
Hình 1.3 Nhiều ViewController trong UIStoryboard

2. Demo

Trong phần này mình sẽ giới thiệu với các bạn cách chuyển cảnh giữa 2 màn hình.

Trong Main.Storyboard các bạn thêm một ViewController nữa và chỉnh sửa màu sắc như hình 1.3. Trong ViewController Scene 1 các bạn kéo vào một UIButton.

Để di chuyên giữa hai màn hình các bạn thực hiện như sau:

  • Nhấn giữ nút Control vào UIButton kéo thả vào ViewController màu vàng.
  • Xcode hiện ra pop up chọn vào Present Modally
2.1 Di chuyển giữa 2 màn hình

Thực hiện xong các bạn sẽ thấy một đường nối giữa hai màn hình đó gọi là segue:

Storyboard Segue
Hình 2.3 Storyboard Segue

Chạy thử project nhấn vào Button các bạn sẽ được di chuyển từ màn hình màu xanh sang màn hình màu vàng.

Di chuyển giữa 2 màn hình
Hình 2.4 Di chuyển giữa 2 màn hình

Cảm ơn bạn đã theo dõi bài viết, nếu có thắc mắc gì vui lòng để lại bình luận bên dưới.

Bạn có thể tham khảo khoá học lập trình iOS tại laptrinh0kho.com. Các khoá học từ cơ bản đến nâng cao, được thực tập doanh nghiệp. Bạn sẽ được cung cấp kiến thức có hệ thống với đội ngũ giảng viên giàu kinh thực tế và am hiểu sư phạm. Hãy liên hệ ngay để được tư vấn miễn phí theo thông tin bên dưới:

LAPTRINH0KHO.COM

  • 138/36 Nguyễn Xí, P. 26, Q. Bình Thạnh, TP.HCM
  • Hotline: 0347.750.760 (Kết bạn Zalo để tư vấn)
  • Email: laptrinh0kho@gmail.com
  • Website: www.laptrinh0kho.com
  • FanPage : laptrinh0kho.com