Bài 03: Kết nối giao diện với mã nguồn

Lập trình iOS - 03

Trong bài này, mình sẽ hướng dẫn các bạn thực hiện kết nối giao diện với mã nguồn (source code). Sau khi bạn thiết kế xong giao diện của một màn hình bước tiếp theo chúng ta phải bắt các sự kiện khi tương tác với màn hình này. Hãy cùng tìm hiểu các kết nối giao diện với mã nguồn (bài viết mình thực hiện trên Xcode 11).

1. Thiết kế một giao diện đơn giản

Đầu tiên các bạn hãy tạo một Project Xcode mang tên HelloWord, sau đó vào Main.storyboard mình sẽ tạo một cái giao diện đơn giản như sau:

 thiết kế giao diện
Hình 1.1 Thiết kế giao diện đơn giản

Click vào nút dấu cộng như hình bên dưới để thấy được danh sách các control của iOS

Danh sách control
Hình 1.2 Danh sách các control iOS

2. Kết nối giao diện với mã nguồn

Bước 1: Chia đôi màn hình để ánh xạ control vào ViewController. Chọn vào Adjust Editor Option → Assistant

Chia đôi màn hình để ánh xạ control
Hình 2.1 Chia đôi màn hình để ánh xạ control
  • Đây là màn hình kết quả
Assistant result
Hình 2.2 Kết quả khi chia đôi màn hình

Bước 2: Ánh xạ các control (outlet, action) vào ViewController

  • Chọn vào control cần ánh xạ nhần giữ chuột phải và kéo vào ViewController (cũng có thể nhấn giữ nút control trên bàn phím máy Mac rồi chuột trái kéo vào).
ánh xạ outlet
Hình 2.2 Ánh xạ outlet vào ViewController
  • Đặt tên cho Outlet sau đó nhấn connect.
Connect Outlet
Hình 2.3 Connect Outlet
  • Ánh xạ action cho Button. Các bạn làm tương tự như khi ánh xạ Outlet nhưng Connection chọn là Action.
Ánh xạ Action
Hình 2.3 Ánh xạ Action cho button

3. Chạy chương trình và kiểm tra các Outlet, Action đã kết nối

  • Các bạn vào ViewController thêm dòng code sau:
thêm code cho action button
Hình 3.1 Thêm code cho action button
  • Xong bây giờ chúng ta chạy project và kiểm tra kết quả. Nếu như các bạn làm đúng như hướng dẫn thì khi nhấn vào Button, Label sẽ đổi thành chữ “Hello Word!!!” và consle bên dưới sẽ in ra “Hello Word!!!”.
kết quả khi chạy project
Hình 3.2 Kết quả khi chạy project

Xem thêm video hướng dẫn tại đây.

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: 0987.360.431 (Kết bạn Zalo để tư vấn)
  • Email: laptrinh0kho@gmail.com
  • Website: www.laptrinh0kho.com
  • FanPage : laptrinh0kho.com

Leave a Reply

Your email address will not be published. Required fields are marked *