Make an interface with UI components (Objective-C)

Tạo một ứng dụng mới kiểu View Based
Chúng ta sẽ bắt đầu bằng việc mở XCode và tạo một ứng dụng mới kiểu View-Based. Bấm vào File > New Project. Đảm bảo rằng Application được hiển thị bên dưới iPhone OS và chọn View-Based Application. Đặt tên cho ứng dụng là HelloWorldViews.

Apple đã cung cấp sẵn một số file mặc định để chúng ta làm việc. Họ đã thêm vào một cửa sổ chính(main window) cho chúng ta chỉnh sửa và mã lệnh để chúng ta hiển thị cửa sổ này. Thuật ngữ iPhone gọi mỗi cửa sổ là một View. Vì bạn chỉ có thể nhìn thấy một view tại một thời điểm, bạn cần phải tạo ra view mới cho mỗi màn hình trong ứng dụng của bạn. Trong bài này, chúng ta sẽ chỉ chú ý tới việc chỉnh sửa view mà Apple đã cung cấp sẵn. Trong bài tới, mình sẽ trình bày cách tạo các view mới và chuyển đổi qua lại giữa các view này. Bây giờ bạn chỉ việc bấm Build and Go.
Mở thiết bị giả lập iPhone
Sau khi bấm Build and Go thì chương trình sẽ được biên dịch và thiết bị giả lập iPhone sẽ được gọi ra. Màn hình của bạn sẽ như hình sau

Chưa có gì thú vị đúng không bạn? Bây giờ chúng ta sẽ thêm một số UI component vào view để cho nó trở nên hấp dẫn hơn. Để làm điều này, ta sẽ chỉnh sửa file HelloWorldViewController.xib. File có đuôi .xib được gọi là nib file. Những file này được tạo với Interface Builder và là những file mà bạn định nghĩa phần look and feel cho ứng dụng của bạn. Apple cũng tỏ ra khá đáng yêu khi họ đã cung cấp sẵn cho ta một file như thế.



Thêm UIElements vào màn hình chính
Sauk hi bạn mở Interface Builder, bạn sẽ thấy một vài cửa sổ khác nhau… Bạn sẽ thấy một cửa sổ trống có cùng kích thước với iPhone. Nếu không thấy, bạn bấm vào biểu tượng View trong cái hộp nhỏ hơn. Đây chính là cửa sổ chính mà ta sẽ chỉnh sửa.
Nhìn sang bên phải, bạn thấy một tool box chứa rất nhiều UI component. Hầu hết đều khá quen thuộc nếu bạn đã từng sử dụng ứng dụng iPhone. Chúng ta sẽ chèn một số component này vào view của ta. Chỉ việc bấm vào component mà bạn muốn chèn vào view của bạn. Bạn phải đảm bảo là bạn có sử dụng ít nhất một Label. Trong bài này, mình sử dụng một Label, một Search Bar, và một Tab Bar. Bạn nhận thấy rằng khi bạn kéo thả search bar và tab bar vào trong view, kích thước của chúng sẽ tự động được chọn cho phù hợp với màn hình. Còn nữa, khi bạn di chuyển chúng, bạn sẽ thấy một đường kẻ màu xanh giúp bạn bố trí và sắp đặt vị trí thích hợp cho các component.
Sau khi bạn chèn vào một Label, bấm lên nó. Bây giờ ta mở Attributes Inspector để thay đổi text cho label. Bấm vào Tools > Attributes Inspector. Trên cùng của Attributes Inspector bạn thấy một hộp có tiêu đề Text. Nếu không thấy, bấm vào Label để chọn lại. Gõ vào bât kỳ cái gì mà bạn muốn label của bạn hiển thị. Ở đây, mình gõ “Hello World”. Bạn có thể cập nhật lại các thuộc tính khác của label như là font và color trong Attributes Inspector. Có thể bạn cần điều chỉnh lại kích thước của label để dòng text bạn gõ hiển thị được đầy đủ. Bấm lên label vào chỉ việc kéo thả để chỉnh kích thước của nó.
Sau khi bạn thực hiện xong, màn hình của bạn trông như sau:

Bây giờ bấm Apple-S để lưu file này lại. Chúng ta đã xong việc với Interface Builder, bạn có thể đóng nó lại. Ứng dụng của bạn đã sẵn sàng để chạy.
Chạy chương trình
Bấm Build and Go để chạy ứng dụng của bạn trên thiết bị giả lập iPhone. Ứng dụng của bạn sẽ như hình sau:
Bạn đã có một ứng dụng iPhone! Một ứng dụng iPhone đơn giản mà không cần viết bất kỳ một dòng mã lệnh nào. Nếu bạn bấm vào search box, iPhone sẽ tự động hiển thị bàn phím. Cám ơn các bạn đã đọc bài viết này và mình hy vọng các bạn cũng biết thêm được một chút gì đó từ bài viết này. Trong bài viết tới, mình sẽ chỉ các bạn cách sử dụng code để viết các UI component. Nếu các bạn có thắc mắc gì, xin vui lòng gửi cho mình trong phần comments. Chúc các bạn vui vẻ!