Trang chủ > Lập trình iPhone cơ bản > Lập trình iPhone- Làm quen với Interface Builder

Lập trình iPhone- Làm quen với Interface Builder


Trong bài trước Lập trình iPhone – HelloWorld,  mình đã nói rằng có rất nhiều cách để hiển thị lời chào “ Hello World” trong lập trình iPhone. Sau đây là cách sử dụng Interface Builder. Lần trước, mình đã mô tả một cách đơn giản để hiện thị một cell trên UITableView với một dòng text. Bài hôm nay còn đơn giản hơn thế. Mình sẽ chỉ cho các bạn cách làm việc với Interface Builder để tạo một layout đơn giản cho ứng dụng của bạn.

Bạn sẽ không cần phải viết bất kỳ một dòng mã lệnh nào! Trong bài tới, mình sẽ chỉ các bạn cách để tạo interface với các UI component bằng mã lệnh.

Trong bài này các bạn sẽ học cách:

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ẻ!

  1. Sơn
    17/01/2011 lúc 6:01 sáng

    Hay quá, thanks!

  2. 18/11/2010 lúc 5:38 sáng

    Good quá! nữa đi bạn🙂

  1. 03/03/2010 lúc 10:15 sáng

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: