Link tài nguyên thiết kế Mockup cho ứng dụng Bếp Việt: https://www.dropbox.com/s/derg11jaxumqyl3/BepViet-DesignResources.zip?dl=0
Website thiết kế Prototype – Proto.io: https://proto.io
Playlist của khóa học: https://www.youtube.com/watch?v=ewi2FZ7YbD4&list=PLrYzmTLQ3nmBIU0fVRASwABOFkkB-uZle
Để tham gia nhiều khóa học miễn phí hơn, vui lòng truy cập: VietDevelopers.com bạn nhé!
Link tài nguyên thiết kế Mockup cho ứng dụng Bếp Việt: https://www.dropbox.com/s/derg11jaxumqyl3/BepViet-DesignResources.zip?dl=0
Website thiết kế Mockup – Figma: https://www.figma.com
Trang tìm kiếm icon miễn phí: https://www.flaticon.com
Playlist của khóa học: https://www.youtube.com/watch?v=ewi2FZ7YbD4&list=PLrYzmTLQ3nmBIU0fVRASwABOFkkB-uZle
Để tham gia nhiều khóa học miễn phí hơn, vui lòng truy cập: VietDevelopers.com bạn nhé!
Xin chào tất cả các bạn!
Từ hôm nay mình sẽ “sản xuất” một loạt bài mới về lập trình iOS với Swift 3. Ở loạt bài này, chúng ta sẽ cùng nhau phát triển một ứng dụng iOS tên là Flavr – là một ứng dụng dành cho tín đồ đam mê nấu nướng. Trong quá trình phát triển ứng dụng Flavr chúng ta sẽ cùng nhau tìm hiểu về cách phát triển một ứng dụng iOS như thế nào và những thành phần cấu thành nên một ứng dụng hoàn chỉnh.
Như thường lệ, khi bắt đầu tìm hiểu một ngôn ngữ, bài học vỡ lòng đầu tiên mà chúng ta sẽ học sẽ là Hello World – một câu chào đến với thế giới lập trình. Vì vậy, đừng chần chừ nữa, hãy cùng mình bắt tay vào làm và khám phá thế giới lập trình iOS nhé!
Bạn nào đang đọc đến đây đều cũng sẽ đặt ra thắc mắc là bắt đầu học lập trình iOS thì sẽ cần những gì? Dưới đây là những gì bạn cần có:
✅ Một chiếc máy Mac đang cài hệ điều hành tối thiểu là Mac OS X 10.11.4 (OS X EL Capitan)
✅ Tải Xcode trên App Store về và nhớ là Xcode phải là phiên bản Xcode 8 trở lên nhé. Nhiệm vụ của các bạn là phải cài xong rồi mới được đọc tiếp nhé 
✅ Nếu bạn mới tìm hiểu về lập trình iOS thì bạn sẽ chưa cần mua tài khoản Developer của Apple, chúng ta sẽ có một bài viết về chủ đề này
✅ Bạn có thể sử dụng máy ảo (Simulator) để test ứng dụng, tuy nhiên nếu có thiết bị iOS thật thì càng tuyệt cú mèo
Phần duy nhất mà bạn cần nữa là sự đam mê và chăm chỉ mày mò. Sẽ chẳng có lối đi tắt nào để đến thành công cả, Chiến thôi 
Việc đầu tiên, chúng ta sẽ mở Xcode lên:
Khi bật lên thì sẽ có giao diện như sau:
Sau đó các bạn chọn vào phần Create a new Xcode project để tạo một project mới nhé. Tiếp đến bạn bạn chọn mục iOS và chọn Single View Application để tạo một ứng dụng iOS nhé.
Các bạn có thể thấy là ở bước này chúng ta có thể chọn một trong nhiều loại khác nhau như Single View Application, Game, Tabbed Application… Bản chất là với mỗi một loại project, Xcode sẽ tạo sẵn cho chúng ta những phần cần thiết liên quan đến từng loại kiểu ứng dụng, ví dụ như Tabbed Application thì Xcode sẽ tạo ra cho ta một project mẫu có các tab ở phía dưới màn hình (Ứng dụng có các tab nhỏ ở màn hình chính). Ở bài này, chúng ta sẽ chọn Single View Application, Xcode sẽ tạo ra một project trắng tinh để các bạn tha hồ khám phá. Nói chung, Single View Application là loại project mà chẳng có gì trong đó sất, và các bạn phải tự làm hết mọi thứ
Bạn nhấn Next để tiếp tục việc tạo 1 iOS project, và bạn phải điền các thông tin như hình dưới đây:
Như hình trên thì chúng ta sẽ phải điền các thông tin như dưới đây:
Product Name: Tên của project mà chúng ta sẽ phát triển, ở đây ta đặt tên là Flavr
Team: Ở phần này chúng ta có thể chọn nhóm hoặc account phát triển, mặc định ta chọn None
Organization Name: Tên tổ chức/công ty/nhóm của bạn – bạn có thể đặt tên gì cũng được
Organization Identifier: Đây là địa chỉ hoặc định danh của nhóm/tổ chức/công ty của bạn, thông thường sẽ đặt theo tên miền đảo ngược, ví dụ mình là khachuong.com thì mình sẽ đặt ngược lại là com.khachuong – Các bạn lưu ý là các bạn không nhất thiết phải có tên miền mới đặt được nhé, bạn có thể đặt gì cũng được, nhưng nên là dạng tên miền theo chiều ngược lại. Bạn nhớ là đặt tên không dấu, không khoảng cách nhé!
Bundle Identifier: Chà, phần này rất quan trọng vì phần này sẽ thể hiện ứng dụng của bạn duy nhất. Nó được tạo ra bởi sự kết hợp giữa Project Name và Organization Identifier
Language: Tất nhiên là chúng ta đang sử dụng Swift để phát triển ứng dụng, nên chúng ta sẽ chọn Swift
Devices: Bạn định phát triển ứng dụng cho mình iPhone, iPad hay cho tất cả các thiết bị? Nếu phát triển cho tất cả các thiết bị iOS thì bạn chọn Universal nhé, ở project này chúng ta sẽ chỉ phát triển cho iPhone, nên chúng ta sẽ chọn iPhone
Ở 3 phần chọn cuối, chúng ta bỏ chọn cả 3 phần nhé. Mình sẽ giải thích cụ thể ở các phần sau. Sau khi bạn hoàn tất bạn nhấn Next để tiếp tục. Xcode sẽ hiển thị ra một popup mà bạn có thể chọn một thư mục để lưu trữ project này. Mình chọn Desktop để lưu, sau đó bạn nhấn Create để tạo.
Phù, cuối cùng thì cũng đã khởi tạo được project Flavr. Giao diện Xcode sẽ như sau:
Giao diện Xcode được chia thành nhiều vùng với nhiều tác vụ khác nhau. Mình sẽ giải thích chức năng của từng vùng như sau:
Vùng 01: Cho phép bạn chạy hoặc dừng ứng dụng trên một thiết bị nào đó, bạn có thể chọn thiết bị để test. Ở đây thiết bị có thể là máy ảo hoặc máy thật
Vùng 02: Bạn để ý nhé, sẽ có 3 nút tương ứng với việc ẩn hoặc hiện các thành phần bên tay trái (03), tay phải (02) và phía dưới (05). Mục đích giúp bạn có thể tuỳ biến sao cho bạn có thể code thuận tiện và dễ dàng điều hướng nhất. Ngoài ra, toàn bộ các chức năng ở khối bên tay trái đều gọi là khối tiện ích (Utilities)
Vùng 03: Là phần điều hướng của project, nó sẽ liệ kê ra các thư mục, file thuộc project đó. Bạn sẽ dễ dàng điều hướng và di chuyển giữa các file. Đây còn gọi là khối điều hướng (Navigator)
Vùng 04: Là vùng trung tâm của màn hình, code của bạn có thể hiển thị ở đây hoặc bất cứ thứ gì mà bạn mở ở vùng 03 đều sẽ hiển thị ở vùng trung tâm này
Vùng 05: Khi bạn chạy một ứng dụng, nếu có lỗi hoặc log thì bạn có thể dễ dàng xem tại đây. Đây còn gọi là phần Debug (Debug area)
Ok, bây giờ chúng ta hãy chạy ứng dụng lần đầu tiên xem ứng dụng của chúng ta hiện có gì. Bạn hãy chọn một thiết bị máy ảo ở vùng số 01 và nhấn nút chạy nhé. Dưới đây là thành quả của chúng ta ở lần chạy đầu tiên:
Hehe, app của chúng ta chỉ hiển thị một màn hình trắng. Bình thường thôi, vì ứng dụng của bạn chưa hề hoàn thành mà, đây chỉ là lần chạy đầu tiên. Để dừng chạy ứng dụng của bạn, hãy nhấn vào nút “Stop” ở trên thanh công cụ.
Nhiệm vụ tiếp theo chúng ta phải thực hiện là tạo ra một nút có tên là “Say Hello” và khi nhấn vào nút đó thì màn hình sẽ hiện ra chữ “Hello World” thay vì một màn hình trắng phau như ở trên.
Đầu tiên ta sẽ mở file Main.Storyboard ở phía tay trái ra, và chọn vào màn hình View Controller:
File Storyboard là gì?
Chúng ta có thể hiểu file Storyboard là file để chúng ta có thể bố cục giao diện cho các màn hình của app. Đồng thời, chúng ta cũng có thể sử dụng Storyboard để kiểm soát luồng hoạt động của ứng dụng. Trong Xcode sẽ có một công cụ tên là Interface Builder – cho phép lập trình viên có thể kéo thả các thành phần giao diện của một ứng dụng. Thay vì phải tự code lên giao diện, thì chúng ta có thể sử dụng Interface Builder để kéo thả, việc này sẽ dễ dàng hơn nhiều so với code chay.
Trong một ứng dụng, mỗi màn hình mà ứng dụng hiển thị lên thì được gọi là một Scene trong Storyboard. Như vậy, ở trong file Main.Storyboard hiện tại của chúng ta có một Scene tên là View Controller -> chính là màn hình trắng mà chúng ta đã thấy ở lần chạy đầu tiên. Mỗi một Scene thì phải tương ứng với một file code, ở trong ví dụ này ta có thể thấy Scene có tên là View Controller thì sẽ có một file code tên là ViewController.swift ở bên tay trái. Ok, tạm gác tại đó, mình sẽ giải thích cụ thể hơn ở các bài viết sau.
Quay lại với phần thiết kế giao diện (Interface Builder), ở file Storyboard, chúng ta sẽ kéo vào một nút (button) và đặt tên button đó là Say Hello. Một button được xem là một UI component (thành phần giao diện) Ở góc màn hình bên tay phải, chúng ta sẽ có thể tìm một thành phần giao diện (UI component) và kéo vào màn hình View Controller.
Các bước thực hiện như sau:
Bước 1: Bạn chọn vào nút thứ 3 (Show Object Library) là nơi liệt kê ra danh sách các đối tượng (object) giao diện
Bước 2: Tìm đến object có tên là Button
Bước 3: Giữ vào kéo Button vào giữa Scene View Controller
Tiếp đến chúng ta sẽ thay đổi chữ Button bằng chữ Say Hello, bạn có thể click đúp vào nút Button ở giữa màn hình và đổi lại thành chữ Say Hello:
Bây giờ nếu chúng ta chạy lại ứng dụng, ta sẽ thấy màn hình không còn trắng trơn nữa, thay vào đó là một nút Say Hello. Tuyệt cú mèo 
Nếu bạn thử nhấn vào nút Say Hello thì chẳng có gì xuất hiện cả, bởi vì chúng ta còn thiếu một bước, đó là hiển thị ra dòng thông báo “Hello World” khi có sự kiện nhấn vào nút Say Hello. Bây giờ hãy bắt tay vào code chút nhé!
Đầu tiên, hãy mở file ViewController.swift ra và viết những câu lệnh dưới đây ngay trên dòng override func didReceiveMemoryWarning()
@IBAction func btnSayHelloPressed(_ sender: Any) {
let alert = UIAlertController(title: "Notification", message: "Hello World!", preferredStyle: UIAlertControllerStyle.alert)
alert.addAction(UIAlertAction(title: "OK", style: UIAlertActionStyle.default, handler: nil))
self.present(alert, animated: true, completion: nil)
}
Toàn bộ code của bạn sẽ như hình dưới đây:
Chúng ta vừa viết xong một hàm chức năng tên là btnSayHelloPressed() với mục đích là khi người dùng nhấn vào nút Say Hello thì hàm này sẽ xử lý và hiển thị lên màn hình câu chào. Đoạn code trong hàm này sẽ được diễn giải như sau:
let alert = UIAlertController(title: "Notification", message: "Hello World!", preferredStyle: UIAlertControllerStyle.alert)
2. Thêm một hành động (action) có tên là OK vào thông báo alert phía trên
alert.addAction(UIAlertAction(title: "OK", style: UIAlertActionStyle.default, handler: nil))
3. Hiển thị (present) thông báo alert trên lên màn hình hiện tại
self.present(alert, animated: true, completion: nil)
Đến thời điểm hiện tại, bạn chỉ cần hiểu được luồng hoạt động của ứng dụng là ok rồi, mình sẽ giải thích sâu hơn nữa ở các bài viết tiếp theo. Bây giờ bạn thử chạy lại ứng dụng và nhấn vào nút Say Hello xem có gì xảy ra không? Tất nhiên là không rồi bởi vì chưa có sự kết nối (link hoặc connection) nào từ phần giao diện Interface Builder đến code mà chúng ta vừa viết cả. Vậy, việc cuối cùng chúng ta cần làm là kết nối nút Say Hello với hàm btnSayHelloPressed:
Để kết nối nút Say Hello với hàm btnSayHelloPressed: bạn chỉ cần nhấn giữ phím Ctrl và kéo chuột từ nút Say Hello vào View Controller và chọn hàm btnSayHelloPressed: như hình dưới đây:
Như vậy là xong việc kết nối (link) giữa nút Say Hello ở phần giao diện (Interface Builder) với hàm btnSayHelloPressed: trong file ViewController.swift. Bây giờ bạn thử chạy lại app, kết quả là chúng ta sẽ có một thông báo Hello World! khi nhấn vào nút Say Hello. Kết quả sẽ như hình dưới đây:
Vola, như vậy là chúng ta đã xây dựng thành công ứng dụng iOS đầu tiên có tên là Hello World sử dụng ngôn ngữ Swift 3 và Xcode 8. Thật tuyệt vời phải không? Mình biết là còn rất nhiều thắc mắc, khó hiểu trong quá trình làm ứng dụng này. Tuy nhiên, bạn sẽ hiểu sâu hơn ở các bài viết tiếp theo. Bây giờ hãy nghỉ ngơi và dành thời gian cho những ý tưởng xây dựng ứng dụng mới, sau loạt bài viết này bạn sẽ có thêm kinh nghiệm và kiến thức để có thể tự mình xây dựng được ứng dụng của riêng mình.
Source code của bài này bạn có thể download tại đây: Sourcecode_Flavr_Day1
Hẹn các bạn ở bài viết tiếp theo!
Chú ý: Bản quyền thuộc về blog VietDevelopers do Khả Chương phát triển, mọi trích dẫn, hay copy vui lòng ghi rõ nguồn và được sự đồng ý của tác giả. Các nhà tài trợ có thể ủng hộ chi phí duy trì cho blog xin liên hệ email: khachuongvn@hotmail.com. Mọi sự đóng góp của các bạn sẽ góp phần blog phát triển hơn. Xin cảm ơn và chúc các bạn học tốt!
Ở bài trước các bạn đã được học về cách sử dụng song song 2 ngôn ngữ Objective-C và Swift trong cung 1 project để hiển thị ra câu chào Hello World. Nếu các bạn chưa xem bài trước thì các bạn có thể xem tại đây: Link
Ở bài hôm nay chúng ta sẽ cùng nhau tìm hiểu về các kiến thức cơ bản trong lập trình như khai báo biến, hằng số, kiểu dữ liệu, mảng, vòng lặp, câu điều kiện. Ở mỗi video mình sẽ giao cho các bạn 1 bài tập nho nhỏ, các bạn có thể gửi bài giải về cho mình tại email: khachuongvn@hotmail.com. Mình hy vọng các bạn có thể học được nhiều kiến thức từ blog này.
Bài học hôm nay:
Bài tập hôm nay: Hãy tìm số gà và chó trong bài toán sau (Đáp án sẽ được cung cấp ở video sau)
Vừa gà vừa chó
Bó lại cho tròn
Ba mươi sáu con
Một trăm chân chẵn.
Sách tham khảo về Swift của Apple các bạn có thể tải tại đây: Link
Source code trong video các bạn tải tại đây: Link
Chú ý: Bản quyền thuộc về blog VietDevelopers do Khả Chương phát triển, mọi trích dẫn, hay copy vui lòng ghi rõ nguồn và được sự đồng ý của tác giả. Các nhà tài trợ có thể ủng hộ chi phí duy trì cho blog xin liên hệ email: khachuongvn@hotmail.com. Mọi sự đóng góp của các bạn sẽ góp phần blog phát triển hơn. Xin cảm ơn và chúc các bạn học tốt!
Xin chào tất cả các bạn đã đến với loạt bài mới về lập trình iOS cơ bản sử dụng ngôn ngữ lập trình mới của Apple đó là Swift. Ở bài đầu tiên này chúng ta sẽ sử dụng song song 2 ngôn ngữ Objective-C và Swift để xem sự khác nhau như thế nào. Hãy bắt đầu với Hello World nào 😀
[Bài viết được dẫn nguồn từ: http://VietDevelopers.com – Học viện lập trình Online]
Ở bài trước, chúng ta đã tạo một ứng dụng SimpleTable để hiển thị danh sách tên các món ăn với ảnh được định sẵn. Ở bài này chúng ta sẽ tiếp tục làm việc với ứng dụng đó nhưng sẽ khiến nó trở nên lung linh hơn.
1. Hiển thị các ảnh thumbnail khác nhau:
Trước khi chúng ta thay đổi code, hãy nhìn lại một lần nữa code để hiển thị ảnh thumbnail trong tabe row.
Lần trước, chúng ta đã thêm dòng code để chỉ ra cho UITableView hiển thị ảnh có tên là “creme_brelee.jpg” trong từng hàng. Rõ ràng rằng chúng nên được hiển thị các ảnh khác nhau, do vậy chúng ta cần phải sửa lại code. Như giải thích từ trước, phương thức “cellForRowAtIndex“ được gọi bởi iOS một cách tự động mỗi lần trước khi hàng trong bảng được hiển thị.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
Nếu bạn nhìn vào tham số (parameter) của phương thức, nó được truyền vào tham số “indexPath” khi được triệu gọi. Tham số indexPath chứa đựng số hàng trong một bảng. Bạn có thể sử dụng thuộc tính (property) indexPath.row để tìm ra hàng hiện tại. Giống như mảng, hàng trong bảng được bắt đầu từ số 0. Hay nói cách khác, thuộc tính indexPath.row trả về (return) giá trị 0 cho hàng đầu tiên của bảng.
Vậy để hiển thị các ảnh thumbnail khác nhau, chúng ta cần một mảng (array) mới (có thể có tên là thumbnails) để lưu các tên ảnh thumbnail:
@implementation SimpleTableViewController
{
NSArray *recipes;
NSArray *thumbnails;
}
- (void)viewDidLoad
{
[super viewDidLoad];
// Khoi tao ten cac mon an
recipes= [NSArray arrayWithObjects:@"Egg Benedict", @"Mushroom Risotto", @"Full Breakfast", @"Hamburger", @"Ham and Egg Sandwich", @"Creme Brelee", @"White Chocolate Donut", @"Starbucks Coffee", @"Vegetable Curry", @"Instant Noodle with Egg", @"Noodle with BBQ Pork", @"Japanese Noodle with Pork", @"Green Tea", @"Thai Shrimp Cake", @"Angry Birds Cake", @"Ham and Cheese Panini", nil];
// Khoi tao ten cac anh thumbnail
thumbnails = [NSArray arrayWithObjects:@"egg_benedict.jpg", @"mushroom_risotto.jpg", @"full_breakfast.jpg", @"hamburger.jpg", @"ham_and_egg_sandwich.jpg", @"creme_brelee.jpg", @"white_chocolate_donut.jpg", @"starbucks_coffee.jpg", @"vegetable_curry.jpg", @"instant_noodle_with_egg.jpg", @"noodle_with_bbq_pork.jpg", @"japanese_noodle_with_pork.jpg", @"green_tea.jpg", @"thai_shrimp_cake.jpg", @"angry_birds_cake.jpg", @"ham_and_cheese_panini.jpg", nil];
}
Như bạn có thể thấy đoạn code ở trên, chúng ta đã khởi tạo mảng thumbnails với danh sách tên các file ảnh. Thứ tự của các ảnh tương ứng với dữ liệu của mảng recipes.
Để giúp bạn thuận tiện hơn, bạn có thể tải về bộ ảnh có sẵn tại đây và add (thêm) nó vào project của bạn. Hãy nhớ đánh dấu vào ô “Copy items into destination group’s folder”.
Sau khi thêm các ảnh vảo project của bạn, bạn có thể thấy chúng xuất hiện trong phần Project Navigator giống như hình sau:
Sau đó, thay đổi dòng code trong phương thức “cellForRowAtIndex” thành:
cell.imageView.image = [UIImage imageNamed:[thumbnails objectAtIndex:indexPath.row]];
[thumbnails objectAtIndex:indexPath.row] là gì?
Dòng code trên mục đích để lấy ra tên của các ảnh cho từng hàng nhất đinh. Có thể nói, đối với hàng thứ nhất, thuộc tính indexPath.row sẽ trả về giá trị bằng 0 và chúng ta sẽ lấy ra được tên ảnh là “egg_benedict.jpg” từ mảng thumbnails bằng cách sử dụng method (phương thức) “objectAtIndex”.
Sau khi sửa đổi xong tất cả mọi thứ, hãy thử chạy ứng dụng của bạn lại 1 lần nữa. Nó sẽ hiển thị các ảnh thumbnail khác nhau cho từng hàng khác nhau:
2. Tùy biến Table View Cell (ô trong bảng):
Dường như ứng dụng bây giờ nhìn đẹp hơn phải không? Chúng ta sẽ làm nó đẹp hơn nữa bằng cách tùy biến ô trong bảng. Hơn hết chúng ta sẽ không sử dụng giao diện mặc định của table view cell nữa. Vị trí và kích thước của anh thumbnail đã được gán cố định. Vậy nếu chúng ta muốn ảnh thumbnail lớn hơn và hiển thị ra thời gian chuẩn bị của từng (preparation time) món ăn như hình sau thì sao?
3. Thiết kế Cell (ô):
Trong trường hợp này, bạn cần phải tạo và thiết kế cho riêng mình một table cell. Quay trở lại Xcode. Trong phần Project Navigator , click chuột phải vào thư mục “SimpleTable” và chọn “New File..”
Chúng ta sẽ tự thiết kế cho riêng mình một table cell, trước tiên chúng ta cần phải tạo một file Interface Builder cho cell (ô). Trong trường hợp này, chúng ta chỉ cần bắt đầu với một giao diện rỗng “Empty”. Nhấn next để tiếp tục.
Khi hộp thoại xuất hiện để chọn dòng thiết bị, bạn chọn iPhone và nhấn next để tiếp tục. Lưu tên file là “SimpleTableCell”.
Một khi file đã được tạo ra, bạn có thể nhìn thấy nó nằm trong phần Project Navigator. Chọn file “SimpleTableCell.xib” để chuyển sang phần xây dựng giao diện. Chúng ta sẽ thiết kế look and feel (cái này minh không dịch, bạn hiểu nó có ý nghĩa là giao diện) cho table cell.
Ở trong phần Object Library (góc dưới bên tay phải), chọn “Table View Cell” và kéo nó vào khu vực thiết kế của phần xây dựng giao diện (Interface Builder).
Để phù hợp với ảnh thumbnail lớn hơn, chúng ta cần phải thay đổi chiều cao của cell. Đơn giản là chỉ cần kéo dãn cell ra, cho đến khi Xcode ghi là H:78.0 tức là chiều cao là 78, và chiều rộng là 320.
Ngoài ra bạn cụng có thể sử dụng Thanh kích thước – Size Inspector để thay đổi chiều cao.
Tiếp đó, bạn chọn thanh thuộc tính – Attributes Inspector nằm trên cùng của phần tiện ích – Utility Area và đặt định danh – Identifier của cell tùy biến thành “SimpleTableCell”. Định danh này sẽ được sử dụng sau.
Sau khi cấu hình table cell view, chúng ta sẽ thêm các phần tử vào trong đó. Chọn “Image View” và kéo nó vào Table View Cell.
Image View này sẽ được sử dụng để hiển thị ảnh thumbnail. Bạn có thể chỉnh sửa kích thước của nó để phù hợp với cell. Mình khuyên bạn đặt chiều cao (height) và chiều rộng (width) đều bằng 69 pixels.
Tiếp đó, chúng ta sẽ thêm vào 3 label (nhãn): Name – tên, Prep Time – Thời gian chuẩn bị, và Time – thời gian. Lable “Name” sẽ được sử dụng để hiển thị tên của món ăn. Lable “Prep Time” là label tĩnh (static) mà chỉ hiển thị dòng chữ “Prep Time”. Cuối cùng là lable “Time” là label động (dynamic) sử dụng để hiển thị giá trị thời gian chuẩn bị từng món ăn khác nhau.
Để thêm 1 lable, bạn chọn “Label” trong phần Object library (thư viện đối tượng – góc phải phía dưới) và kéo nó vào cell. Bạn có thể nhấn đúp (double click) vào lable để sửa tên cho nó.
Bạn có thể nhận thấy kích thước font chữ và kiểu khác nhau cho từng label như ở hình trên. Để thay đổi kiểu font, bạn chọn vào Label và sau đó chọn thanh thuộc tính – “Attribute Inspector”. Tại đó bạn có thể thay đổi kiểu font bằng cách chọn ở ô Font và bạn có thể đặt kích thước cho font. Bạn cũng có thể thay đổi màu sắc và vị trí của font tại đó.
Bản thiết kế cuối cùng của bạn sẽ giống như thế này:
4. Tạo 1 class (lớp) cho Cell tùy biến:
Trước đó chúng ta đã thiết kế xong table cell. Tuy nhiên làm cách nào mà chúng ta có thể thay đổi giá trị label của cell tùy biến? Chúng ta sẽ tạo một lớp mới cho table view cell tùy biến. Lớp này thể hiện cho tầng mô hình dữ liệu (data model) của cell tùy biến.
Cũng giống như trước, click chuột phải vào thư mục SimpleTable trong phần Project Navigator và chọn New/File…
Sau đó Xcode sẽ xuất hiện một hộp thoại để chọn template. Chúng ta đang tạo một lớp mới cho table view cell tùy biến, do vậy hãy chọn “Objective-C class” dưới mục “Cocoa Touch” và sau đó nhấn next để tiếp tục.
Điền tên class là “SimpleTableCell” và chọn “UITableViewCell” trong mục “Subclass of”.
Nhấn next để tiếp tục, lưu file trong thư mục project SimpleTable và nhấn Create để tiếp tục. Xcode sẽ tạo ra 2 file với tên là SimpleTableCell.h và SimpleTableCell.m trong phần Project Navigator (điều hướng project).
Như đã nói đến từ trước, class SimpleTableCell đóng vai trò là mô hình dữ liệu (data model) của cell tùy biến. Trong cell (ô), chúng ta có 3 giá trị có thể thay đổi đó là: khung chứa ảnh thumbnail, label tên, lable thời gian. Trong lớp này, chúng ta sẽ thêm vào 3 thuộc tính (property) thể hiện cho 3 giá trị động đó.
Mở file SimpleTableCell.h và thêm các thuộc tính sau vào trước dòng “@end”:
@property (nonatomic, weak) IBOutlet UILabel *nameLabel; @property (nonatomic, weak) IBOutlet UILabel *prepTimeLabel; @property (nonatomic, weak) IBOutlet UIImageView *thumbnailImageView;
Property và Outlet
Những dòng code trên định nghĩa ra 3 biến thể hiện (iVar – instance variable) mà sau đó được liên kết với table view cell trong phần xây dựng giao diện – Interface Builder. Từ khóa “@property” được sử dụng để định nghĩa là một thuộc tính trong một lớp theo cú pháp sau:
@property (cacThuocTinh) kieuDuLieu tenThuocTinh;
Được đề cập ở dòng code trên, weak và nonatomic là các thuộc tính của property. UILabel và UIImageView là các kiểu dữ liệu, trong khi “nameLabel”, “prepTimeLabel” và “thumbnailImageView” là các tên của property.
Vậy còn IBOutlet là gì? Bạn có thể nghĩ rằng IBOutlet như một chỉ thị. Để liên kết các biến thể hiện – iVar với các phần tử trong Table View Cell chúng ta sử dụng từ khóa “IBOutlet” để giúp Interface Builder biết rằng chúng được phép tạo ra các liên kết. Chút nữa, chúng ta sẽ biết cách để tạo ra 1 liên kết giữa các outlet và các đối tượng nằm trong Interface Builder.
Bây giờ hãy mở file SimpleTableCell.m ra và thêm dòng code sau ngay dưới dòng lệnh “@implementation SimpleTableCell”:
@synthesize nameLabel = _nameLabel; @synthesize prepTimeLabel = _prepTimeLabel; @synthesize thumbnailImageView = _thumbnailImageView;
Từ khóa @synthesize
Từ khóa “@synthesize” giúp trình biên dịch tự động tạo ra code cho phép truy cập các property mà chúng ta đã khai báo trước đó. Nếu bạn quên việc này, Xcode sẽ cảnh báo ngay:
Tuy nhiên đối với Xcode 4.4 trở đi bạn không cần phải sử dụng từ khóa này nữa.
5. Tạo các liên kết (connection):
Lưu tất cả sự thay đổi và mở file “SimpleTableCell.xib“ để quay lại với bộ xây dựng giao diện – Interface Builder. Bây giờ chúng ta sẽ tạo ra các liên kết giữa các property (thuộc tính) của lớp và các label, ImageView mà chúng ta đã tạo trong Interface.
Đầu tiên, chọn cell và thay đổi class thành SimpleTabelCell trong thanh định danh – Identity Inspector. Sự liên kết giữa cell với class mà chúng ta vừa mới tạo ra.
Bây giờ chúng ta thiết lập các liên kết với các property. Click chuột phải vào “SimpleTableCell” nằm dưới mục “Objects” để hiển thị ra danh sách các Outlets. Nhấn chuột vào vòng tròn nằm ngay cạnh “nameLabel” và giữ chặt, rồi kéo nó sang đối tượng “Label – Name”. Xcode sẽ tự động thiết lập kết nối.
Lặp lại quá trình trên với “prepTimeLabel” và“thumbnailImageView”:
Sau khi bạn hoàn tất các liên kết, nó sẽ giống như sau:
6. Cập nhật SimpleTableViewController:
Chúng ta đã hoàn thành việc thiết kế vả code cho table cell tùy biến. Cuối cùng chúng ta sẽ thay đổi những thứ còn lại, để sử cell tùy biến trong SimpleTableViewController.
Hãy quay lại với file SimpleTableView.m mà đã từng tạo hàng cho bảng như sau:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *simpleTableIdentifier = @"SimpleTableItem";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];
}
cell.textLabel.text = [recipes objectAtIndex:indexPath.row];
cell.imageView.image = [UIImage imageNamed:[thumbnails objectAtIndex:indexPath.row]];
return cell;
}
Chúng ta đã sử dụng table view cell mặc định để hiện thị dữ liệu trong bảng. Để sử dụng cell tùy biến của chúng ta, chúng ta cần phải sử đổi một số code trong file SimpleTableView.m như sau:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *simpleTableIdentifier = @"SimpleTableCell";
SimpleTableCell *cell = (SimpleTableCell *)[tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
if (cell == nil)
{
NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"SimpleTableCell" owner:self options:nil];
cell = [nib objectAtIndex:0];
}
cell.nameLabel.text = [recipes objectAtIndex:indexPath.row];
cell.thumbnailImageView.image = [UIImage imageNamed:[thumbnails objectAtIndex:indexPath.row]];
cell.prepTimeLabel.text = [prepTime objectAtIndex:indexPath.row];
return cell;
}
Tuy nhiên, sau khi bạn sửa đổi code của bạn, Xcode phát hiện ra một vài lỗi được chỉ ra trong trình soạn code.
Liệu có gì sai chăng? Code mà chúng ta vừa thay đổi đã chỉ cho SimpleTableViewController sử dụng class SimpleTableCell như là cell của table. Tuy nhiên, “SimpleTableViewController“ dường như không nhận ra được. Đó là lý do tại sao Xcode báo lỗi.
Như đã giải thích từ bài hướng dẫn đầu tiên, file header định nghĩa ra interface của class. Để SimpleTableViewController hiểu được SimpleTableCell, chúng ta cần phải import (nhập) file SimpleTableCell.h vào trong file SimpleTableViewController.m
Bằng cách import file SimpleTableCell.h , file SimpleTableViewController biết đó là gì và có thể sử dụng nó được.
Cuối cùng, chiều cao của table cell thay đổi thành 78, thêm dòng code sau vào trước dòng “@end”
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
return 78;
}
Bây giờ hãy nhấn nút Run để chạy ứng dụng SimpleTable. Nó sẽ có dạng như sau:
7. Bài tập dành cho bạn:
Bạn nên lưu ý rằng ứng dụng hiện tại mới chỉ hiện thị được giá trị Time cho label Prep Time. Phần thay đổi giá trị thời gian của nhãn Prep Time cho từng món ăn khác nhau đó sẽ là bài tập của bạn. Hãy thử thay đổi một vài dòng code và cập nhập lại thời gian chuẩn bị cho từng món ăn. Sau khi làm xong, ứng dụng của bạn sẽ giống như sau:
8. Kết:
Sau khi kết thúc bài hướng dẫn này, mình hy vọng bạn đã có cái nhìn khái quát hơn về UITableView và biết cách tạo ra table cell cho riêng mình. Bạn có thể download mã nguồn code ứng dụng của bài này tại link sau: Tải về . Chúc các bạn học tốt 😀
Note: Bản gốc được viết từ website appcoda.com và được dịch bởi VietDevelopers.com. Mọi trích dẫn, hay copy vui lòng ghi rõ nguồn và được sự đồng ý của tác giả. Xin cảm ơn và chúc các bạn học tốt!
Khả Chương
[Bài viết được dẫn nguồn từ: http://VietDevelopers.com – Học viện lập trình Online]
Xây dựng ứng dụng đầu tay – Hello World thật thú vị phải không? Trong bài hướng dẫn này, chúng ta sẽ nghiên cứu những thứ phức tạp hơn và xây dựng một ứng dụng sử dụng Table View.
Trước tiên, Table View trong ứng dụng iPhone là gì? Table View là một thành phần của giao diện người dùng (User Interface – UI) thông dụng trong ứng dụng iOS. Phần lớn các ứng dụng sử dụng Table View để hiển thị danh sách dữ liệu (data). Ví dụ dễ hiểu nhất là 1 ứng dụng được xây dựng sẵn trong điện thoại. Danh sách liên lạc của bạn được hiển thị dưới dạng bảng (table). Một ví dụ khác nữa là ứng dụng Mail. Nó sử dụng Table View để hiển thị hòm thư của bạn, và danh sách các emails. Không chi được thiết kế để hiển thị chữ, Table View cho phép bạn hiển thị dữ liệu dưới dạng ảnh. Ứng dụng Youtube và Airnbnb là những ví dụ điển hình của cách sử dụng đó.
1. Tạo 1 project SimpleTable:
Với một ý tưởng về Table View, hãy khiến mình bận rộn bằng cách tạo môt ứng dụng đơn giản. Nếu bạn muốn thực sự học lập trình iOS bạn không nên chỉ đọc mình các bài viết hướng dẫn. Dừng đọc, mở Xcode và gõ code thôi. Đây là cách tốt nhất để học lập trình.
Khởi chạy Xcode và tạo project mới, chọn “Single View Application”.
Chọn next để tiếp tục. Vẫn như lần trước, điền các thông tin cơ bản cho Xcode project:
Chọn next để tiếp tục. Sau đó Xcode sẽ yêu cầu bạn chon nơi để lưu project SimpleTable. Bạn hãy chọn 1 thư mục ví dụ như là Desktop.Sau đó nhấn Create để tiếp tục. Sau khi bạn xác nhận (confirm) Xcode sẽ tự động tạo một project SimpleTable dựa trên những lựa chọn mà bạn đã chọn. Kết quả sẽ như sau:
2. Thiết kế (design) 1 View (khung nhìn):
Trước tiên, chúng ta sẽ tạo ra 1 giao diện người dùng (UI) và thêm Table View vào đó. Chọn Main.storyboard để chuyển sang chế độ giao diện Storyboard.
Trong phần Object Library ở bên phải góc trái phía dưới, chọn đối tượng (object) Table View và kéo nó vào View (khung nhìn).
Thay đổi kích thước chiều cao 1 chút, làm như vậy để nó sẽ không che đi thanh trạng thái ở phía trên cùng. Sau khi thêm table view, View của bạn sẽ như thế này:
3. Chạy ứng dụng SimpleTable lần đầu tiên:
Trước khi tiếp tục, hãy thử chạy ứng dụng của bạn sử dụng Simulator. Nhấn vào nút Run để build (xây dựng) ứng dụng của bạn và kiếm tra (test) thử.
Màn hình Simulator sẽ giống như thế này:
Quá dễ phải không? Bạn đã thiết kế xong Table View cho ứng dụng của bạn. Tuy nhiên nó chưa hề có dữ liệu (data). Tiếp theo chúng ta sẽ viết một vài dòng code để thêm dữ liệu vào bảng(table) đó.
4. Thêm dữ liệu vào Table:
Quay trở lại với Project Navigator (phía bên tay trái) và mở file “SimpleTableViewController.h”. Nối “<UITableViewDelegate, UITableViewDataSource>” ngay đằng sau “UIViewController”. Code của bạn sẽ giống như sau:
#import <UIKit/UIKit.h> @interface SimpleTableViewController : UIViewController <UITableViewDelegate, UITableViewDataSource> @end
“UITableViewDelegate” và“UITableViewDataSource” được biết đến như giao thức(protocol) trong Objective-C. Cơ bản thì, để hiển thị được dữ liệu trong Table View, chúng ta phải thực thi các phương thức cần thiết bắt buộc của giao thức đó.
UITableViewDelegate và UITableViewDataSource
Trước đó chúng ta đã thêm các giao thức “UITableViewDelegate” and “UITableViewDataSource” vào file header (.h). Có thể bạn sẽ cảm thấy khó hiểu một chút. Vậy chúng là gì?
UITableView, thực ra là class nằm phía dưới của Table View, được thiết kế một cách linh hoạt để quản lý được các loại dữ liệu khác nhau. Bạn có thể hiển thị một danh sách các quốc gia, hoặc danh sách điện thoại. Hoặc ở ví dụ này, chúng ta sẽ sử dụng Table View để hiển thị danh sách các công thức nấu ăn. Vậy làm thế nào để bạn truyền cho UITableView danh sách dữ liệu để hiển thị? UITableViewDataSource là câu trả lời. UITableViewDataSource là kết nối giữa dữ liệu của bạn với Table View. Giao thức (protocol) UITableViewDataSource khởi tạo 2 phương thức cần thiết, đó là tableView:cellForRowAtIndexPath và tableView:numberOfRowsInSection mà bạn cần phải thực thi (implement). Thông qua việc thực thi các phương thức này, bạn sẽ chỉ ra cho Table View số hàng (row) để hiển thị và dữ liệu cho từng hàng.
UITableViewDelegate lại khác, phụ trách giao diện của UITableView. Các phương thức tùy chọn của các giao thức cho phép bạn quản lý chiều cao của hàng trong bảng, tái trật tự các ô (cell) trong bảng…Chúng ta sẽ không thay đổi bất cứ thứ gì trong các phương thức này trong ví dụ này. Chúng ta sẽ thảo luận ở các bài sau.
OK, quay trở lại với code. Mở file “SimpleTableViewController.m” và định nghĩa một biến thể hiện (instance variable – viết tắt là iVar, biến trong tiếng anh là variable) để lưu trữ dữ liệu của bảng.
@implementation SimpleTableViewController
{
NSArray *recipes;
}
Trong phương thức viewDidLoad: , thêm dòng code sau để khai báo một mảng recipes. Chúng ta khởi tảo một mảng với danh sách các công thức nấu ăn.
- (void)viewDidLoad
{
[super viewDidLoad];
// Initialize table data
recipes = [NSArray arrayWithObjects:@"Egg Benedict", @"Mushroom Risotto", @"Full Breakfast", @"Hamburger", @"Ham and Egg Sandwich", @"Creme Brelee", @"White Chocolate Donut", @"Starbucks Coffee", @"Vegetable Curry", @"Instant Noodle with Egg", @"Noodle with BBQ Pork", @"Japanese Noodle with Pork", @"Green Tea", @"Thai Shrimp Cake", @"Angry Birds Cake", @"Ham and Cheese Panini", nil];
}
Mảng là gì?
Mảng là một cấu trúc dữ liệu cơ bản trong lập trình máy tính. Bạn có thể hiểu rằng mảng là tập hợp của các phần tử dữ liệu. Theo như mảng recipes ở dòng code trên, nó biểu diễn một danh sách các phần tử văn bản. Bạn có thể hình dung mảng như thế này:
Ở mảng recipes này có tổng cộng 16 phần tử (element). Mỗi phần tử của mảng được xác định hoặc truy cập thông qua chỉ số (index). Một mảng có 10 phần tử thì sẽ có chỉ số bắt đầu từ 0 đến 9. Điều đó có nghĩa rằng, recipes[0] sẽ trả về giá giá trị phần tử thứ nhất của mảng recipes.
Trong Objective C, NSArray là một lớp (class) để tạo và quản lý mảng. Bạn có thể sử dụng NSArray để tạo một mảng tĩnh với kích thước được đặt sẵn. Nếu bạn cần một mảng động bạn có thể dùng NSMutableArray.
NSArray cung cấp một tập hợp các phương thức để tạo nên đối tượng mảng. Trong code của chúng ta, chúng ta sử dụng “arrayWithObjects” để khởi tạo một đối tượng NSArray và nạp trước với các phần tử xác định (ví dụ như Hamburger).
Bạn có thể sử dụng các phương thức khác được xây dựng sẵn để truy vấn và quản lý mảng. Tí nữa chúng ta sẽ sử dụng phương thức “count” để truy vấn số lượng phần tử của mảng recipes. Để biết thêm về cách sử dụng của NSArray, bạn có thể đọc tài liệu tham khảo sau của Apple: Link.
Cuối cùng chúng ta phải thêm 2 phương thức datasource là: tableView:numberOfRowsInSection và tableView:cellForRowAtIndexPath. Hai phương thức này thuộc một phần của giao thức UITableViewDataSource .Đó là 2 phương thức cần thiết và bắt buộc phải thực thi để cấu hình nên một UITableView. Phương thức thứ nhất sử dụng cho việc thông báo cho bảng xem có bao nhiêu hàng từng phần(section), Vậy hãy thêm dòng code sau. Phương thức count đơn giản là trả về số lượng phần từ trong mảng recipes.
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return [recipes count];
}
Tiếp theo chúng ta cần thực thi các phương thức cần thiết khác
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *simpleTableIdentifier = @"SimpleTableCell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];
}
cell.textLabel.text = [recipes objectAtIndex:indexPath.row];
return cell;
}
Phương thức cellForRowAtIndexPath: được gọi mỗi khi một hàng của bàng xuất hiện. Hình minh họa sau sẽ cung cấp cho bạn cái nhìn cụ thể hơn về cách thức hoạt động UITableView và UITableDataSource:
Ok, thử nhấn nút Run và chạy thử ứng dụng của bạn. Vẫn là một ứng dụng trắng tinh đúng không? Chẳng có gì khác cả.
Tại sao nó vẫn rỗng? Chúng ta đã thực sự viết code để tạo dữ liệu cho bảng và thực thi các phương thức cần thiết. Vậy tại sao Table View vẫn không hiển thị dữ liệu ra?
Vẫn còn một vài thứ chưa hoàn thành….
5. Kết nối DataSource và Delegate:
Giống như nút Hello World ở bài hướng dẫn đầu tiên, chúng ta cần phải thành lập mối liên kết giữa Table View và 2 phương thức mà ta vừa tạo ra.
Quay trở lại với Main.storyboard. Chọn vào Table View. Nhấn vàn giữ phím Control (đối với Windows thì là phìm Ctrl), sau đó click vào table view và kéo đến biểu tượng icon “Simple Table View Controller” ở dưới thanh dock. Màn hình sẽ giống như sau:
Có một cửa sổ nhỏ hiện lên hiện thị dataSource và delegate. Chọn “dataSource” để tạo một liên kết giữa Table View và data source của nó. Lập lại quá trình trên để tạo một liên kết với delegate.
Vậy là được rồi. Để đảm bảo các liên kết đã được kết nối chính xác, bạn có thể chọn lại vào Table View. Ở phần phía trên của phần tiện ích – Utillity area, bạn có thể thấy các liên kết tồn tại trong phần “Connection Inspector” – tab ngoài cùng bên tay phải.
6. Chạy thử ứng dụng của bạn:
Cuối cùng thì đã đến lúc để chạy thử ứng dụng của bạn, nhấn nút Run và chờ cho Simulator nạp ứng dụng của bạn vào:
7. Thêm ảnh Thumbnail và Table View của bạn:
Có vẻ như Table View nhìn đơn giản quá phải không? Nếu thêm ảnh nhỏ cho từng hàng thì bạn nghĩ sao? iOS SDK giúp làm việc ấy cực dễ dàng. Bạn chỉ cần thêm 1 dòng code để chèn ảnh thumbnail cho từng hàng.
Trước tiên bạn hãy download thư mục ảnh mẫu tại đây . Tất nhiên là bạn có thể sử dụng ảnh riêng của bạn, nhưng hãy nhớ đổi tên ảnh của bạn thành “creme_brulee.jpg”. Trong phần Project Navigator phía bên tay trái, click chuột phải vào thư mục SimpleTable và chọn “Add Files to SimpleTable”….
Chọn bức ảnh mà bạn vừa tải về, sau đó đánh dấu tích vào ô checkbox “Copy items to destination group’s folder”. Với lựa chọn đó, ảnh của bạn sẽ được copy vào thư mục của project. Nhấn OK để thêm file.
Bây giờ hãy sửa file SimpleTableViewController.m. Thêm dòng code sau vào trong phương thức “tableView:cellForRowAtIndexPath” và đặt trước dòng lệnh “return cell;”
cell.imageView.image = [UIImage imageNamed:@"creme_brelee.jpg"];
Sau khi thêm xong, code của bạn sẽ có dạng như sau:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *simpleTableIdentifier = @"SimpleTableCell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];
}
cell.textLabel.text = [recipes objectAtIndex:indexPath.row];
cell.imageView.image = [UIImage imageNamed:@"creme_brelee.jpg"];
return cell;
}
Ô của bảng mặc định sẽ hiển thị ảnh. Dòng code đó đơn giản là nạp ảnh và hiển thị nó ra. Nó nằm trong khu vực ảnh của ô trong bảng. Bây giờ nhấn nút Run để chạy ứng dụng SimpleTable của bạn, ứng dụng của bạn chắc chắn sẽ hiển thị ảnh cho từng hàng như sau:
8. Kết:
Thật đơn giản để tạo một Table View phải không? Table view là một trong những phần phổ biến trong lập trình iOS. Nếu bạn theo dõi từ đầu tới cuối bài hướng dẫn và tự tay xây dựng ứng dụng, chắc hẳn bạn đã có được những kiến thức cơ bản về việc tạo một table view. Tôi cố gắng giữ mọi thứ đơn giản hết mức có thể trong bài ví dụ này. Thực tế thì dữ liệu của bảng sẽ không được lưu trực tiếp trong code Nó thường được nạp từ file, database(cơ sở dữ liệu) hay một nơi nào đó. Ở bài hướng dẫn sau, bạn sẽ được học cách nạp dữ liệu từ 1 file. Tuy nhiên trước khi nghiên cứu tiếp, hay chắc rằng bạn đã hiểu về cách hoạt động của table view. Nếu vẫn chưa hiểu thì hãy xem lại một lần nữa. Bạn có thể download source code tại đây.
Note: Bản gốc được viết từ website appcoda.com và được dịch bởi VietDevelopers.com. Mọi trích dẫn, hay copy vui lòng ghi rõ nguồn và được sự đồng ý của tác giả. Xin cảm ơn và chúc các bạn học tốt!
Khả Chương
[Bài viết được dẫn nguồn từ: http://VietDevelopers.com – Học viện lập trình Online]
Tôi hy vọng bạn sẽ thích thú với bài hướng dẫn đầu tiên và hoàn thành ứng dụng đầu tay của bạn. Trước khi chúng ta thảo luận về bài hướng dẫn tiếp theo và xây dựng một ứng dụng phức tạp hơn, hãy cùng nhau nhìn lại một cách kỹ càng hơn về ứng dụng Hello World. Điều đó sẽ giúp bạn hiểu hơn về cú pháp của ngôn ngữ Objective-C và cách thức hoạt động của ứng dụng.
Simon Sg – Appcoda.com
Ở bài trước chúng ta đã từng bước xây dựng nên ứng dụng Hello World. Tuy nhiên xuyên suốt bài hướng dẫn đó, chắc hẳn bạn sẽ thắc mắc một vài câu hỏi như:
Mình muốn bạn tập trung vào việc khám phá môi trường làm việc của Xcode, vì vậy mình đã không giải thích bất kỳ điều gì về Xcode ở bài trước. Tuy nhiên, điều đó là hết sức cơ bản đối với mọi developer để hiểu được chi tiết, cụ thể đẳng sau những dòng code, và nắm bắt được các khái niệm cơ bản của lập trình iOS. Đối với một số khái niệm kỹ thuật, có thể sẽ khó hiểu hơn một chút nếu bạn không có kiến thức cơ bản về lập trình. Tuy nhiên đừng lo lắng quá, đây mới là ởi đầu. Ở các bài viết tiếp theo bạn sẽ viết nhiều code hơn, và bạn sẽ hiểu hơn về lập trình iOS. Đơn giản là cố gắng hết mình 😀
1. Các file Interface Builder, Header và Implementation (thực thi):
Câu hỏi đầu tiên là: Các file .xib, .h và .m là gì? Đây là một câu hỏi khá hay. Dưới phần Project Navigator (Điều hướng project). bạn có thể nhận ra 3 loại file – .xib, .h, .m. (Nếu bạn mở rộng thư mục Supporting Files, bạn sẽ nhận ra các loại file khác nữa như là plist hay framework. Tuy nhiên hãy tạm quên mấy file này đi. Chúng ta sẽ thảo luận về chúng sau.
.xib – Đối với các file có đuôi mở rộng là .xib, chúng là các file về giao diện (hay còn gọi là Interface Builder), các file này chứa giao diện người dùng (UI – User Interface) Nếu bạn mở file .xib, Xcode sẽ tự động chuyển sang chế độ giao diện – Interface Builder để bạn có thể sửa đổi giao diện người dùng cho ứng dụng của bạn bằng cách kéo và thả (drag-and-drop).
Interface Builder trong Xcode.
.h và .m – Các file có đuôi mở rộng .h, chúng là các file header, trong khi các file có đuôi mở rộng là .m, chúng là các file thực thi – implementation. Giống như các ngôn ngữ lập trình khác, source code của Objective-C được chia thành 2 phần: Interface và Implementation.
Để giúp bạn hiểu rõ, chúng ta hãy đưa ra 1 ví dụ tương đồng, ví dụ là cái điều khiển TV. Thật thuận tiện để tăng giảm âm lượng của TV với một điều khiển từ xa không dây. Để tăng âm lượng, bạn nhấn nút “Volume +”. Để chuyển kênh, bạn đơn giản chỉ cần nhấn và số kênh trên điều khiển. Cho phép mình hỏi bạn 1 câu: Bạn có biết chuyện gì xảy ra khi bạn nhấn vào nút “Volume – Âm lượng” không? Thực ra là không, mình tin rằng phần lớn mọi người không hề biết cách thức điều khiển TV giao tiếp với TV và điều khiển âm lượng của chiếc TV đó. Đó là điều mà chúng ta biết, cái nút âm lượng mà chúng ta sử dụng để thay đổi âm lượng. Trong ví dụ này, cái nút mà bạn tương tác thì gọi là “Interface” và những việc được thực hiện đằng sau hành động nhấn vào nút đó thì gọi là “Implementation – thực thi”.
Chắc hẳn bây giờ bạn đã hình dung được Interface và Implementation rồi. Hãy quay lại với code. Trong Objective-C, các Interface của 1 class (lớp) được tổ chức trong file .h. Chúng ta thường sử dụng cú pháp “@interface“ để khởi tạo interface cho 1 class. Hãy xem trong file HelloWorldViewController.h, hay còn gọi là file header:
@interface HelloWorldViewController : UIViewController -(IBAction)showMessage; @end
Nó bắt đầu với @interface và theo sau là tên class HelloWorldViewController. Bên trong, ta khởi tạo một action “showMessage”, hay còn được biết đến với một phương thức gọi.
Giống như nút “Volume”, rõ ràng rằng chúng ta không hề biết hành động (action) showMessage làm gì. Chúng ta chỉ hiểu rằng nó dùng để hiển thị 1 thông báo lên màn hình. Còn việc thực thi thì được đặt trong file thực thi HelloWorldViewController.m:
@implementation HelloWorldViewController
// I've removed other methods for better reading. Focus on the showMessage method first.
- (IBAction)showMessage
{
UIAlertView *helloWorldAlert = [[UIAlertView alloc]
initWithTitle:@"My First App" message:@"Hello, World!" delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];
// Display the Hello World Message
[helloWorldAlert show];
}
@end
Như bạn thấy ở trên, bạn sử dụng việc khai báo “@implementation” để khai báo 1 sự thực thi. Bên trong phương thức “showMessage”, có dòng code để định nghĩa việc hiển thị thông báo tin nhắn trên màn hình. Bạn có thể không hiểu bất kỳ dòng code nào trong phương thức showMessage. Nói ngắn gọn, các dòng code đó tạo 1 UIAlertView với tiêu đề là “My First App”, và dòng thông báo với nội dung “Hello, World“. Sau đó nó sẽ được gọi với phương thức “show” và yêu cầu iOS hiển thị một pop-up (cửa số bật lên) để hiển thị thông báo Hello World trên màn hình.
2. Đằng sau việc nhấn(tap) và chạm (touch):
Việc gì đã xảy ra sau hành động nhấn vào nút Hello World? Làm thế nào mà nút Hello World có thể gọi (invoke) phương thức (method) showMessage để hiển thị thông báo “Hello, World”?
Hãy nhớ lại rằng bạn đã thiết lập 1 kết nối giữa button Hello World và hành động showMessage trong Interface Builder. Hãy mở lại file HelloWorldViewController.xib và chọn vào nút Hello World. Click vào button “Sent Events” ở trong phần tiện ích Utillity Area để mở Sent Events.
Khu vực Sent Events chỉ ra cho bạn tất cả kết nối (connection) giữa các sự kiện (event) và các hành động (action). Như bạn thấy ở hình trên thì sự kiện “Touch Up Inside” đã được kết nối tới hành động showMessage. Trong iOS. các ứng dụng đều là theo hướng sự kiện (event-driven). Các đối tượng (object) như UIButton thường lắng nghe các sự kiện (như chạm, nhấn). Khi bắt được 1 sự kiện, đối tượng sẽ gọi (call) đến hành động đã được cài đặt trước đó để kết nối với sự kiện này (event).
Trong ứng dụng Hello World của chúng ta, khi người dùng nhấn ngón tay vào button, thì sự kiện Touch Up Inside sẽ được bắt. Do đó, nó sẽ gọi đến hành động showMessage để hiện thị thông báo Hello World.
Hình minh họa dưới đấy sẽ khái quát lại những luồng sự kiện và những gì mình vừa mô tả.
3. Đằng sau việc nhấn nút “Run”:
Khi bạn click vào nút Run, Xcode sẽ tự động chạy Simulator và chạy ứng dụng của bạn. Tuy nhiên chuyện gì xảy ra đằng sau việc nhấn nút Run? Là một lập trình viên, bạn cần phải nhìn khái quát toàn bộ quá trình đó.
Toàn bộ quá trình có thể chia ra làm 3 giai đoạn: Biên dịch (compile), đóng gói (package) và chạy (run).
Biên dịch (Compile): Bạn có thể nghĩ rằng iOS có thể hiểu được code Objective-c. Trong thực tế, iOS chỉ đọc được ngôn ngữ máy (machine code). Code Objective-C là chỉ dành riêng cho bạn, cho người lập trình viên viết và đọc. Để khiến iOS hiểu được mã nguồn code (source code) ứng dụng của bạn, chung ta cần phải đi qua một quá trình dịch ngôn ngữ Objective-C sang ngôn ngữ máy. Quá trình này thường được xem là “biên dịch – compile”. Xcode đã được kèm theo 1 trình biên dịch được xây dựng sẵn để biên dịch mã nguồn code.
Đóng gói (Package): Khác với mã nguồn, một ứng dụng thường chứa đựng các file tài nguyên như ảnh (image), văn bản, file xib…Tất cả tài nguyên này được đóng gói lại để tạo nên ứng dụng cuối cùng.
Chúng ta gọi 2 tiến trình trên là tiến trình “xây dựng – build”.
Chạy (Run): Việc này sẽ khởi chạy Simulator và nạp ứng dụng của bạn vào.
Note: Bản gốc được viết từ website appcoda.com và được dịch bởi VietDevelopers.com. Mọi trích dẫn, hay copy vui lòng ghi rõ nguồn và được sự đồng ý của tác giả. Xin cảm ơn và chúc các bạn học tốt!
Khả Chương.
Chào các bạn,
Blog này được lập ra với mục đích cung cấp các bài viết hướng dẫn lập trình cơ bản cho những người mới bước chân vào nghề lập trình. Mở đầu là loạt bài về hướng dẫn lập trình iOS 7 cơ bản. Mong các bạn nhiệt tình ủng hộ và đóng góp các bài viết chất lượng để cộng đồng Việt Developers ngày càng phát triển nhé.
Sau đây chúng ta sẽ cùng khám phá về một mảng lập trình không hề mới nhưng cũng không hề hết “hot”, đó là mảng lập trình mobile. Và chúng ta sẽ cùng nhau nghiên cứu cụ thể một mảnh ghép không phải là nhỏ trong mảng mobile, đó là lập trình phát triển ứng dụng iOS. Để phát triển được ứng dụng iOS bạn phải cần:
– Máy Mac cài hệ điều hành Mac OS X 10.8 trở lên.
– Nếu bạn không có máy Mac thì bạn có thể cài hệ điều hành ảo trên Windows, bạn có thể vào đây và làm theo hướng dẫn: Link
– Sau khi có hệ điều hành Mac OS X 10.8 trở lên rồi, bạn cần phải có 1 tài khoản của Apple, để có thể truy cập vào iTunes để cài Xcode.
1. Giới thiệu qua về Xcode và cách cài đặt:
Để có thể phát triển được ứng dụng iOS, bạn chỉ cần cài đặt XCode. XCode là một môi trường phát triển tổng hợp ( Integrated development environment – IDE) do Apple cung cấp. XCode cung cấp hầu hết mọi thứ để bạn có thể bắt tay vào việc phát triển 1 ứng dụng, như là bộ phát triển phần mềm ( Software Development Kit – SDK), trình biên soạn giao diện người dùng (User Interface – UI)…Đồng thời XCode cũng cung cấp máy ảo (simulator) để bạn có thể test ứng dụng ngay trực tiếp được khi bạn không có 1 chiếc iPod, iPhone, hay iPad để test thử thì chạy trên máy ảo là 1 điều không thể tuyệt vời hơn. Như vậy việc học lập trình iOS không cần phải đầu tư quá nhiều về mặt tiền bạc phải không? Bạn chỉ cần chăm chỉ là Ok rồi.
Để download XCode thì bạn ứng dụng App Store trên hệ điều hành Mac của bạn, như sau:
Trong App Store, bạn chỉ cần gõ “Xcode” trên thanh tìm kiếm là bạn sẽ thấy và nhấn vào nút “Free” để cài đặt. Sau khi bạn download và cài đặt xong, thì icon của XCode sẽ xuất hiên trên Launchpad như thế này:
Như vậy là đã cài xong, giao diện của XCode sẽ như thế này:
Như vậy là đã xong rồi, cùng bắt tay vào code Hello World cổ điển nào 😀
2. Hello World – Chào mừng bạn đến với thế giới lập trình iOS
Ở bài hướng dẫn này chúng ta sẽ cùng nhau xây dựng 1 ứng dụng cơ bản, chạm vào nút Hello và sẽ thông báo ra dòng chữ “Hello, World!”. Hầu hết người học lập trình đều sẽ trải qua bài học đầu tiên này, nên các bạn không cần phải căng thẳng quá nhé. Cứ làm và làm rồi ắt sẽ hiểu. Hehe.
Giao diện sau khi đã xây dựng:
Mở XCode ra, ban đầu XCode sẽ hiển thị ra 1 bảng chào mừng có dạng như sau:
Bạn hãy chọn vào dòng “Create a new Xcode project” để tạo 1 project mới. Sau đó Xcode sẽ hiển thị ra các dạng template cho project của bạn (Chúng ta sẽ thảo luận sau về phần này). Với ứng dụng Hello World này, chúng ta sẽ chọn “Empty Application” rồi nhấn Next.
Bước tiếp theo là điền các thông tin cơ bản cho project của bạn như sau:
Bạn có thể điền như sau:
Bạn chọn Next để tiếp tục. Sau đó Xcode sẽ yêu cầu bạn chọn nơi để lưu project “Hello World”.Bạn hãy chọn 1 thư mục ví dụ như là Desktop.Sau đó nhấn Create để tiếp tục.
Sau khi tạo xong thư mục project, giao diện Xcode hiện giờ sẽ như thế này:
3. Làm quen với không gian làm việc của Xcode
Trước khi bắt tay vào việc code ứng dụng đầu tay của bạn, hãy dành một vài phút để xem qua môi trường làm việc của Xcode. Ở bên phía tay trái là thanh điều hướng project (Project Navigator). Bạn có thể tìm thấy tất cả các file trong project ở phần này.Phần ở giữa là khu vực biên soạn (Editor Area). Bạn có thể thiết lập cài đặt project, sửa các file class, giao diện người dùng…Phần này sẽ hiển thị phụ thuộc vào loại file mà bạn chọn.
Phần phía bên tay phải là phần tiện ích (Utility Area). Phần này hiển thị các thuộc tính của file và cho phép bạn truy cập đến phần Giúp đỡ nhanh – Quick Help. Nếu Xcode không hiển thị phần này, bạn có thể chọn vào nút hiển thị phía tay phải ở trên thanh toolbar để bật nó lên.
Cuối cùng là thanh toolbar. Nó cung cấp nhiều chức năng khác nhau để chạy ứng dụng của bạn, chuyển đổi trình soạn thảo, hiển thị không gian làm việc.
4. Chạy ứng dụng lần đầu tiên
Mặc dù bạn chưa hề viết 1 dòng code nào, nhưng bạn hãy cứ thử chạy ứng dụng của bạn trên Simulator 1 lần xem. Nó sẽ cung cấp 1 cái nhìn tổng thể để bạn có thể hình dung được cách thức xây dựng và test ứng dụng của bạn trên Xcode. Để chạy ứng dụng, bạn chỉ cần nhấn vào nút “Run” ở trên thanh công cụ – toolbar.
Xcode sẽ tự động build (xây dựng) ứng dụng và chạy ứng dụng đó trên Simulator. Giao diện của Simulator sẽ có dạng như sau:
Một màn hình màu xám và chẳng có gì sất cả. Bình thường thôi, vì ứng dụng của bạn chưa hề hoàn thành mà, đây chỉ là lần chạy đầu tiên. Để dừng chạy ứng dụng của bạn, hãy nhấn vào nút “Stop” ở trên thanh công cụ.
Mặc định, Xcode sẽ sử dụng iPhone Retina (3.5-inch) cho simulator. Bạn có thể chọn các simulator khác nhau để test ứng dụng của bạn.
5. Tiếp tục Code nào
Tiếp túc với viếc thêm 1 nút Hello World vào ứng dụng của bạn. Trước khi chúng ta thêm 1 nút – button, chúng ta cần tạo ra 1 View và 1 controller phản hồi cho nó. Bạn có thể tưởng tưởng 1 View là 1 ô chứ các item về giao diện UI như là button, textbox, Quay trở lại với phần điều hướng project – Project Navigator. Click chuột phải vào thư mục HelloWorld và chọn “New File”.
Trong mục Cocoa Touch, bạn chọn Objective-C class và nhấn Next.
Điền tên class là HelloWorldViewController và subclass chọn là UIViewController. Hãy chắc chắn là đánh dấu tích vào lựa chọn “With XIB for user interface” . Với lựa chọn này, Xcode sẽ tự động tạo ra 1 file trình tạo giao diện (interface builder) cho view controller.
Sau đó sẽ xuất hiện 1 hộp thoại, bạn chi cẩ nhấn vào nút Create để tạo class và file XIB. Khi hoàn thành, Xcode sẽ tạo ra 3 file bao gồm HelloWorldViewController.h ,HelloWorldViewController.m và HelloWorldViewController.xib. Nếu bạn chọn vào file HelloWorldViewController.xib bạn sẽ thấy 1 view rỗng như hình sau:
Ok, bây giờ ta thêm button Hello World vào trong view. Ở phần dưới cùng của phần tiện ích (utillity area) phía bên tay phải, nó hiển thị ra thư viện Object. Từ đây, bạn có thể chọn các thành phần của giao diện người dùng như là button, kéo thảo nó vào trong View. Với ứng dụng Hello World, hãy chọn 1 button và kéo thả vào trong view. Hãy căn chỉnh sao cho button nằm ở giữa view.
Ok. sau đó đổi tên của button, để thay đổi nhãn (label) của button đó, click đúp vào button đó và điền tên là “Hello World”.
Nếu bạn thử chạy ứng dụng của bạn, bạn vẫn nhận được là màn hình nâu và không có gì trong đó. Lý do là do chúng ta chưa chỉ cho ứng dụng load view mới. Chúng ta sẽ thêm vài dòng code nữa để load vào HelloWorldViewController.xib. Chọn file AppDelegate.m trong phần Project Navigator. Thêm dòng lệnh sau ở đầu file:
#import "HelloWorldViewController.h"
Trong phương thức (method) didFinishLaunchingWithOptions, thêm các dòng code sau câu dòng “self.window.backgroundColor = [UIColor whiteColor]“.
HelloWorldViewController *viewController = [[HelloWorldViewController alloc] initWithNibName:@"HelloWorldViewController" bundle:nil]; self.window.rootViewController = viewController;
Code của bạn sẽ có dạng như sau:
Những việc bạn vừa làm là load HelloWorldViewController.xib và gán cho nó là view controller gốc (root). Bây giờ thử chạy lại ứng dụng, nó sẽ ra như sau:
Tuy nhiên, nếu bạn nhấn hay còn gọi là tap vào button, nó sẽ chẳng hiển thị ra gì. Chúng ta sẽ thêm một số dòng code để hiển thị lời chào “Hello, World”.
6. Code cho Hello World button
Trong phần Project Navigator, mở file “HelloWorldViewController.h”. Trình biên soạn sẽ xuất hiện với các dòng code của file này. Thêm dòng code sau trước dòng “@end”.
-(IBAction)showMessage;
Đoạn code hoàn chỉnh sau khi thêm dòng trên là:
#import <UIKit/UIKit.h> @interface HelloWorldViewController : UIViewController -(IBAction)showMessage; @end
Sau đó mở file “HelloWorldViewController.m” và thêm dòng code sau trước dòng “@end”
- (IBAction)showMessage
{
UIAlertView *helloWorldAlert = [[UIAlertView alloc]
initWithTitle:@"My First App" message:@"Hello, World!" delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];
// Display the Hello World Message
[helloWorldAlert show];
}
Sau khi thêm code, code hoàn chỉnh của bạn sẽ như sau:
Hãy tạm quên đi ý nghĩa của những dòng code Objective-C. Mình sẽ giải thích sau. Tiếp theo, hãy nghĩ rằng “showMessage” là 1 hành động, và hành động đó chỉ ra cho iOS hiển thị thông báo “Hello, World” lên màn hình.
7. Kết nối button Hello World với 1 hành động (action)
Và đây là câu hỏi:
Làm sao để button (nút) Hello World lj có thể biết được rằng hành động nào sẽ được gọi khi tap vào button đó?
Tiếp theo, bạn cần phải thiết lập 1 kết nối giữa button Hello World và hành động(action) showMessage mà bạn vừa mới thêm vào. Mở file “HelloWorldViewController.xib” , nhấn giữ phím Control (đối với máy Mac), còn đối với máy ảo chạy trên Windows thì giữ phím Ctrl và click vào button Hello World, sau đs kéo vào File’s Owner. Bạn có thể xem hình sau:
Thả tay ra và sẽ hiển thị ra 1 pop-up, chọn showMessage để thiết lập kết nối giữa button Hello World và action showMessage:
8. Chạy thử chương trình
Ok, như vậy là đã hoàn thành. Hãy nhấn nút Run. Nếu mọi thứ đúng thì chắc chắn ứng dụng của bạn sẽ chạy tốt trên simulator:
Chúc mừng bạn, như vậy là bạn đã xây dựng thành công 1 ứng dụng iOS đầu tay rằng. Mình tin rằng bạn đã hiểu rõ hơn về Xcode cũng như làm thề nào để phát triển 1 ứng dụng iOS. Blog sẽ tiếp tục các bài hướng dẫn tiếp theo, hãy theo dõi nhé. Source code bài này bạn có thể download tại đây: Download
Note: Bản gốc được viết từ website appcoda.com và được dịch bởi VietDevelopers.com. Mọi trích dẫn, hay copy vui lòng ghi rõ nguồn và được sự đồng ý của tác giả. Xin cảm ơn và chúc các bạn học tốt!
Khả Chương
Lập trình iOS Cơ bản 