Bài 3 – Thiết kế giao diện

Sau khi tìm hiểu cấu trúc project iOS thì cũng đã đến lúc bắt tay vào thiết kế giao diện cơ bản. Chúng ta sẽ bắt đầu với màn hình cho phép thêm một món ăn mới vào ứng dụng. Ứng dụng này có tên là FoodTracker (lấy ví dụ mẫu của Apple luôn nhé).

Thiết kế giao diện cơ bản

Xcode cung cấp một thư viện các object để chúng ta có thể thêm vào storyboard. Đây là những thành phần giao diện phục vụ cho việc thiết kế giao diện:

• Thành phần giao diện: Button, Text field, Label, …
• Thành phần xác định hành vi người dùng (không được hiển thị): View Controller, Gesture Recognizer, …

Những phần tử hiển thị trên màn hình chính là các view.

• View đảm nhiệm việc hiển thị nội dung đến người dùng.
• Bạn cứ hình dung view là những khối được đặt lên giao diện người dùng. View giúp bạn trình bày nội dung một cách rõ ràng, đẹp đẽ và tiện dụng.
• Views tích hợp sẵn các hành vi hữu dụng. Bao gồm việc hiển thị trên màn hình và phản hồi lại khi người dùng nhập liệu.

Tất cả các view objects trong iOS đều là kiểu UIView hoặc là lớp con (subclass) của UIView.

Nào, bây giờ chúng ta sẽ bắt đầu thêm một text field (UITextFiel – đây là một lớp con của UIView) vào màn hình của bạn. Text field là đối tượng cho phép user nhập 1 dòng text (ví dụ tên của một món ăn chẳng hạn).

User Interface Elements

Để thiết kế giao diện, bạn hãy mở cửa sổ Object library lên đã nhé. Nếu không nhìn thấy, bạn hãy click button thứ ba từ trái sang như hình dưới. Hoặc bạn chọn View -> Utilities -> Show Object Library cũng được.
 Cửa sổ này cung cấp cho bạn các thành phần giao diện để bạn có kéo – thả lên màn hình. Việc thiết kế khá đơn giản, bạn chỉ cần tìm và kéo thả control vào view. Sau đó bạn hãy canh chỉnh vị trí và kích thước control cho phù hợp.

1. Trong Object library gõ text field trong Filter field để tìm Text Field nhanh chóng.
2. Kéo Text Field từ Object library vào màn hình.
3. Nếu cần, bạn có thể zoom giao diện cho dễ thao tác: Editor > Canvas > Zoom.
4. Kéo text field lên phía nửa trên của màn hình và căn lề trái.
5. Click lên text field để chúng ta chỉnh kích thước của text field.
6. Thay đổi kích thước bằng cách kéo cạnh phải của text field cho đến khi nhìn thấy 3 đường màu xanh hiện lên như minh hoạ.

Đến đây bạn đã có text field trên màn hình cho người dùng nhập liệu. Nhưng để tăng tính tiện dụng thì bạn nên thiết lập thêm một lời gợi ý trong text field để hướng dẫn người dùng nhập nội dung gì. Để thực hiện việc này chúng ta sẽ sử dụng thuộc tính Placeholder của text field.
➤ Ví dụ: Thiết lập Placeholder của Text Field là “Enter meal name”. Thuộc tính này cho phép hiển thị đoạn văn bản mờ trên Text Field (để gợi ý cho người dùng), đoạn văn bản này sẽ biến mất khi người dùng chọn Text Field để nhập dữ liệu.

Cấu hình Keyboard

Ở trên chúng ta đã thiết kế được text field lên giao diện. Nhưng để thuận tiện cho người dùng, chúng ta sẽ cấu hình một số thuộc tính cho bàn phím để việc nhập dữ liệu được thuận tiện hơn.

Để cấu hình bàn phím, bạn mở cửa số Attributes inspector và cấu hình những thông tin sau:

• Capitalization: hỗ trợ đoán từ.
• Correction: kiểm lỗi từ.
• Spell Checking: kiểm lỗi cú pháp.
• Keyboard Type: loại bàn phím, chúng ta nên thiết lập loại bàn phím phù hợp với định dạng dữ liệu muốn nhập.
• Appearance: giao diện bàn phím.
• Return Key: thiết lập tên chức năng cho phím Enter.
  • Chọn Done, thiết lập này sẽ thay label phím Return thành Done. Nhằm thông báo tới người dùng sau khi nhập xong thì nhấn phím này để kết thúc.
  • Chọn Auto-enable Return Key ngay ở bên dưới Return Key. Thuộc tính này đảm bảo rằng người dùng không thể nhấn Done trước khi nhập text vào text field (người dùng sẽ không thể nhập empty string).

Dưới đây là một giao diện các loại Keyboard trong iPhone Device.

Giao diện FoodTracker

Bước tiếp theo chúng ta thêm label (UI Label). Label không tương tác với người dùng, nó chỉ hiển thị một text tĩnh trên màn hình. Để thêm label vào màn hình chúng ta làm như sau:
1. Trong Object library, nhập label trong filter field để tìm Label object.
2. Kéo Label vào màn hình.
3. Double-click vào Label nhập “Meal Name” và nhấn Return.
 Tương tự, chúng ta cũng sẽ thêm một button (UIButton) vào màn hình. Button là thành phần để tương tác với người dùng, khi người dùng nhấn vào button nó sẽ thực hiện một chức năng cụ thể nào đó. Để thêm một button ta làm như sau:
1. Trong Objetc library, gõ button trong Filter field để tìm Button object.
2. Kéo button vào màn hình
3. Double-click vào button nhập “Set Default Label Text” và nhấn Return.

Tới đây là đã hoàn thành xong phần thiết kế giao diện rồi. Khá đơn giản phải không nào.

Outline view

Sau khi thiết kế giao diện, nếu bạn muốn xem cấu trúc của giao diện thì có thể xem tại cửa sổ Outline view. Màn hình này sẽ giúp bạn tương tác với các thành phần giao diện được chính xác hơn. Trong storyboard, tìm Outline view toggle để mở giao diện Outline view (bạn cũng có thể ẩn và hiện Outline view bằng button này).
Trong Outline view, chúng ta có thể thấy các phần tử của giao diện đều được “đặt” trong View. Điều đó cho thấy view ngoài vai trò là thành phần giao diện chính, nó còn là nơi để chứa các view khác bên trong (ví dụ như Label, Button, …).

➤ Lưu ý: Các View được sắp xếp theo cấu trúc phân cấp gọi là View hierarchy. Trong View hierarchy, các view con được gọi là subviews và view cha gọi là superview. Một view có thể có nhiều subviews nhưng chỉ có một superview. Nhìn chung, mỗi màn hình có một cây phân cấp view của riêng nó. Trên đầu mỗi cây phân cấp view là một content view. Trong màn hình hiện tại, content view có tên là View. Text field, Label và Button là các subviews của content view. Tất cả các view khác mà chúng ta đặt trong màn hình này sẽ là subviews của content view này (cho dù chúng có thể chứa các subviews khác).

Preview Interface

Xcode cung cấp cho bạn một cách thức để xem kiểm tra trước giao diện mà bạn thiết kế có như mong đợi hay không (mà không cần chạy ứng dụng hay thiết bị ảo). Điều này giúp chúng ta tiết kiệm thời gian hơn so với việc chạy máy ảo.

Để xem kiểm thử giao diện, chúng ta mở assitant editor (bằng cách click vào Assistant button). Nếu muốn có thêm không gian để làm việc, hãy ẩn project navigator và utility area lại bằng cách click Navigtor và Utilities button trên toolbar.
 Sau đó chuyển assistant editor từ Automatic thành Preview -> Main.storyboard (Preview) để xem thử giao diện. Toàn bộ quá trình bạn hãy xem minh hoạ bên dưới cho dễ hiểu nhé.

Tổng kết

Bài này mình đã trình bày cho bạn phương pháp thiết kế giao diện trên iOS. Trong nội dung này cũng tương đối nhiều ý mới, vì vậy bạn hãy lưu ý để vận dụng cho tốt nhé. Trong khuôn khổ bài này mình mới chỉ đề cập tới việc thiết kế giao diện, chương trình vẫn chưa hoạt động được đâu nhé. Bài tiếp theo mình sẽ hướng dẫn bạn cách viết code để giao diện này có thể hoạt động được. Nhưng trước khi sang bài mới, mình hy vọng bạn hãy đọc và hiểu thật kỹ bài này. Nếu có gì thắc mắc thì hãy cứ comment bên dưới nhé.