1. Tạo
“Hello World” với ứng dụng
Navigation-Based
Vào Xcode>New Project hộp thoại hiển thị ra bạn chọn ứng
dụng cần tạo.
Hình 1‑1 Hộp thoại chọn tạo ứng dụng
Navigation-Based
Ø
Bạn cần chọn Application cho iPhone OS và chọn
Navigation-Based Application. Bấm Choose… và bạn sẽ được yêu cầu đặt tên cho
project. Gõ vào “HelloWorld” và ta bắt đầu hoàn thành project.
Tìm hiểu về
những files mặc định
Khi tạo project thì có nhiều file được tự động thêm vào
project của bạn. sau đây ta sẽ tìm hiểu sơ qua về các file đó có chức năng là
gì.
Ø
CoreGraphics.framework, Foundation.framework,
UIKit.framework - Đây là một tập hợp các library functions cung
cấp sẵn bởi Apple mà chúng ta sẽ sử dụng trong các ứng dụng của mình. Chúng ta
sử dụng chúng giống như việc include thư viện trong các ngôn ngữ lập trình
khác.
Ø
HelloWorld.app - Đây chính là ứng
dụng của bạn được cài đặt vào iPhone. File này sẽ dùng khi đưa ứng dụng của ta
lên App Store.
Ø
Hello_World_Prefix.pch - Đây là một
file được include khác, biên dịch từ nhiều file riêng biệt giúp bạn không cần
phải include từng file một vào trong project. File này chứa một số đoạn mã để
include dữ liệu bên trong frameworks.
Ø
Hello_WorldAppDelegate.h - Đây là
file header chứa tất cả các định nghĩa về biến mà ta sẽ sử dụng. Tương tự như
một file header trong C hay C++.
Ø
Hello_WorldAppDelegate.m – Đây là phần
cốt lõi của ứng dụng nằm ở đây. File chính là điểm bắt đầu của ứng dụng. File
main.m gọi object này.
Ø
Info.plist - File này chứa nhiều
thông tin(meta information) khác nhau trong chương trình của bạn. Chúng ta sẽ
không cần phải ca đến file này cho đến khi chúng ta sẵn sàng cho việc test thử
chương trình trên iPhone.
Ø
main.m - Giống như hầu hết các ngôn
ngữ lập trình khác, file này chứa hàm main. Đây là khởi điểm của chương trình.
Hàm main về cơ bản khởi tạo object và khởi động chương trình. Chúng ta không
cần chỉnh sửa file này
Ø
MainWindow.xib - Chứa các thông tin
trực quan về cửa sổ màn hình chính(main window). Nếu bạn nháy đúp lên nó, một
chương trình có tên gọi “Interface Builder” sẽ được được mở ra.Chúng ta sẽ nói
đến “Interface Builder” sau. Bạn cần nhớ một điều, file này không chứa bất kỳ
một dòng mã nào cả.
Ø
RootViewController.h, RootViewController.m -
Những file này dùng cho một view controller đã được thêm sẵn vào cửa sổ màn
hình chính(main window). Về cơ bản, Apple đã tạo sẵn một giao diện đơn giản
ngay khi bạn bấm vào Navigation-Based Application. Vì hầu hết các ứng dụng kiểu
navigation-based đều sử dụng một TableView, Apple cung cấp sẵn cho chúng ta.
Ø
RootViewController.xib - Đây là một
view mà Apple cung cấp sẵn dưới dạng table. Nó có các dòng và cột. Chúng ta sẽ
hiển thị lời chào “HelloWorld” trên một trong số các dòng của table này.
Ø
Tất cả các file trên tập hợp lại để tạo nên một
chương trình cơ bản.
Bây giờ ta chạy thử chương trình bằng cách bấm vào nút Build and Go
ở phía trên của Xcode. Chú ý nếu ta không gắn thiết bị iPhone thì cần đặt
Simulator|Debug, có nghĩa là thong báo cho Xcode biết ta test trên thiết bị giả
lập iPhone(iPhone Simulator).
Hình 1‑2 Chọn giải lập iPhone
Bạn sẽ thấy iPhone Simulator khởi động và chương trình của
bạn bắt đầu chạy. Hiện tại vẫn chưa có gì trên màn hình hiển thị. Tất cả những
gì bạn thấy chỉ là một TableView mà Apple đã thêm sẵn cho chúng ta. Việc ta cần
làm là thêm một dòng(row) vào TableView này.
Hình 1‑3 Giao diện ban đầu chỉ là TableView
Cập nhật UITableView Cells để hiển thị lời chào “HelloWorld”.
Ta bắt đầu bằng việc mở file RootViewController.m. Đây là view controller mà
Apple đã thêm sẵn vào cửa sổ chính của chương trình. Tất cả các hàm mà bạn thấy
đã được tạo sẵn ở đây được ghi đè từ lớp cha TableView. Vì chúng ta đang chỉnh
sửa table nên các hàm này liên quan đến thao tác chỉnh sửa table. Tìm đến hàm
numberOfRowsInSection.
-(NSInteger)tableView:(UITableView*)tableView
numberOfRowsInSection
:(NSInteger)section{
return 0;
}
Ø
Hàm này cho ứng dụng biết table sẽ chứa bao
nhiêu dòng. Hiện tại nó trả về 0. Chúng ta sẽ sửa lại thành return 1. Ta muốn
ứng dụng sẽ hiển thị 1 dòng trên table. Bây giờ, kéo xuống hàm
cellForRowAtIndexPath. Hàm này được gọi một lần đối với mỗi dòng. Đây là nơi ta
sẽ định nghĩa những gì sẽ được hiển thị tại từng dòng. Trong trường hợp này ta
muốn hiển thị lời chào “Hello World”.
- (UITableViewCell
*)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString
*MyIdentifier = @”MyIdentifier”;
UITableViewCell *cell =
[tableView dequeueReusableCellWithIdentifier
:MyIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell
alloc] initWithFrame:CGRectZero
reuseIdentifier:MyIdentifier] autorelease];
}
[cell setText:@"Hello
World"];
return cell;
}
Ø
Ta gọi phương thức setText của đối tượng cell và
truyền vào chuỗi “Hello World”. Trong Objective-C, chuỗi bắt đầu với ký tự “@”.
Bây giờ ta chạy lại ứng dụng, bấm nút Build and Go để khởi động iPhone
Simulator. Bạn sẽ thấy một màn hình như dưới đây:
Hình 1‑4 Màn hình hiển thị đã có câu chào “Hello
World”
2. Tạo
“Hello World” với ứng dụng View Based
Project “Hello World” ở trên hiển thị câu chào “Hello
World” trên TableView. Sau đây là cách hiển thị câu chào này bằng cách sử dụng
Interface Builder.
Sau đây là cách sử dụng Interface Builder, ta chỉ sử dụng
các chức năng thiết kế để tạo ra ứng dụng. Không cần viết một câu lệnh nào cả.
Vào Xcode>New Project hộp thoại hiển thị ra bạn chọn ứng dụng cần tạo. Đả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.
Hình 2‑1 Hộp thoại chọn tạo ứng dụng View-Based
Xcode đã cung cấp sẵn một số file mặc định để chúng ta làm việc. Xcode đã 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ì ta chỉ có thể nhìn thấy một view tại một thời điểm, nên ta cần phải tạo ra view mới cho mỗi màn hình trong ứng dụng của chúng ta. 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. Bây giờ chúng ta chạy ứng dụng bấm Build and Go.(Nhớ chọn thiết bị Simulator)
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
Hình 2‑2 Giao diện chương trình View-Based ban đầu
Màn hình hiển thị trắng chưa có gì cả. 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 hiển thị cho ứng dụng của bạn. Xcode cũng tỏ ra khá thuận tiện khi đã cung cấp sẵn một file như thế.
Hình 2‑3 File định nghĩa hiển thị
HelloWorldViewsViewController.xib
Thêm UIElements vào màn hình chính
Ø
Sau khi Interface Builder hiển thị ra ở phần làm
việc, ta sẽ thấy một giao diện thiết kế kích thước bằng với iPhone. Chúng ta sẽ
thiết kế giao diện hiển thị ở đây.
Ø
Nhìn sang bên phải, ta thấy Object Library chứa
rất nhiều UI component (nếu không thấy thì bạn vào View > Utilities >
Object Library để mở nó). 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, sẽ sử dụng một Label, một
Search Bar. Bạn nhận thấy rằng khi bạn kéo thả search 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.
Hình 2‑4 Hộp thoại Object Library
Ø
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 Attributes
Inspector, ta sẽ 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, gõ
câu chào “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ó.
Hình 2‑5 Attributes Inspector của Lable
Ø
Sau khi bạn thiết kế xong, màn hình của bạn
trông như sau:
Bây giờ ta chạy ứng dụng. Bấm Build and Go để chạy ứng dụng
trên thiết bị giả lập iPhone. Ứng dụng của chúng ta như hình sau:
Hình 2‑7 Chương trình chạy sau khi thiết kế xong
Nếu bạn bấm vào search box, iPhone sẽ tự động hiển thị bàn
phím.
Hãy like nếu bài viết có ích →
Kết bạn với gisgpsrs trên Facebook
để nhận bài viết mới nóng hổi