CHƯƠNG 2 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ SỰ KIỆN TRÊN IOS
2.1 Thiết kế giao diện với Storyboard
2.1.3 Màn hình thiết kế giao diện Main.storyboard
Giao diện chính của màn hình hiện tại với các ứng dụng iOS hiện đại thường được thiết kế trong Main.storyboard với cơng cụ Interface Builder tích hợp sẵn trong Xcode. Trên Navigation Area lựa chọn Main.storyboard, trên vùng Editor giao diện để thiết kế cho
50
màn hình ứng dụng iOS hiện ra, cho phép lập trình viên xây dựng giao diện màn hình (Hình 2.1.3.1).
Hiện tại, Main.storyboard chỉ chứa giao diện thiết kế cho một màn hình (Các phần sau sẽ hướng dẫn cách tạo ra các ứng dụng nhiều màn hình và vấn đề di chuyển giữa chúng), đó là một khung hình trắng có hình dáng giống vẻ bên ngồi một chiếc iPhone và có một mũi tên trỏ vào cạnh bên trái. Khung hình trắng chính là khung giao diện cho lập trình viên tự thiết kế các phần tử bên trong của màn hình ứng dụng (Những gì hiện ra trong khung hình thì khi chạy chương trình cũng sẽ hiện ra trên màn hình iPhone, iPad tương ứng). Cịn mũi tên được gọi là điểm vào của chương trình, nghĩa là với ứng dụng nhiều màn hình thì khung hình nào có mũi tên chỉ vào thì màn hình tương ứng với nó sẽ được thực hiện đầu tiên khi chạy chương trình (Giống như 2 lệnh cấu hình chạy chương trình trong Manifest của ứng dụng Android).
Hình 2.1.3.1 Màn hình thiết kế giao diện Main.storyboard
Thiết kế giao diện UI trong iOS tương đối dễ dàng, chủ yếu dựa trên thao tác kéo thả và đưa vào các ràng buộc cho các đối tượng giao diện. Xcode cung cấp sẵn cho người sử dụng một thư viện các đối tượng cho thiết kế giao diện để kéo vào trong các màn hình thiết kế trong Main.storyboard. Để có thể truy xuất vào thư viện này, nhấp chọn vào biểu tượng (trong các phiên bản Xcode cũ) hoặc biểu tượng (trong phiên bản
Xcode mới), khi đó giao diện cho phép lựa chọn và kéo thả các đối tượng trong thư viện (Object Library) sẽ xuất hiện (Hình 2.1.3.2).
Hình 2.1.3.2 Thư viện các đối tượng cho thiết kế giao diện (Object Library)
Trong màn hình Dialog này, lập trình viên hồn tồn có thể sử dụng cơng cụ tìm kiếm gõ vào tên thư viện cần tìm để tìm nhanh đối tượng trong thư viện: Ví dụ gõ “but” thì các đối tượng loại Button như UIButton, Bar Button Item, Fixed Space Bar Button Item,… sẽ được lọc ra cho lập trình viên. Sau đó chỉ một thao tác kéo-thả đơn giản đối tượng trương ứng trong thư viện vào đối tượng màn hình trong Main.storyboard là chúng ta đã hồn thành giai đoạn 1 của thiết kế giao diện (Hình 2.1.3.3).
52
Sau khi kéo đối tượng vào màn hình thiết kế giao diện, ta có thể thay đổi các thuộc tính của đối tượng tuỳ theo yêu cầu một cách dễ dàng dựa vào bảng thuộc tính của đối tượng (trong Utility Area):
- Nhấp đúp chuột lên trên đối tượng: Có thể thay đổi Title của đối tượng
- Lựa chọn đối tượng trên màn hình thiết kế giao diện => Mở Utility Area (Hình 2.1.3.4) Lựa chọn biểu tượng để vào
Identity Inspector của đối tượng
(nhằm điều chỉnh các thuộc tính liên quan đến lớp đối tượng), hoặc biểu tượng để vào bảng Attributes Inspector của đối tượng (nhằm điều chỉnh các thuộc tính liên quan đến các tính chất của đối tượng như mầu sắc, căn chỉnh lề, font chữ, mầu chữ…), hoặc vào biểu tượng để vào Size Inspector của đối tượng (nhằm điều chỉnh các thuộc tính liên quan đến kích thước của đối tượng như dài, rộng, …). Ngồi ra cịn nhiều bảng thuộc tính khác sẽ được giới thiệu trong các phần tiếp theo. Ngồi ra, lập trình viên cũng có thể kéo và di chuyển đối tượng trong màn hình thiết kế giao diện đến những vị trí mong muốn, hoặc thay đổi trực tiếp kích thước các đối tượng băng cách kéo các điểm giới hạn tại các cạnh hoặc góc của đối tượng như trong nhiều ngơn ngữ lập trình khác.
Hình 2.1.3.5 Ví dụ thay đổi thuộc tính đối tượng trực tiếp trên màn hình thiết kế