Trang chủ > Lập trình iPhone cơ bản > Lập trình iPhone – Hiển thị một NSArray trên UITableView

Lập trình iPhone – Hiển thị một NSArray trên UITableView


Mục đích của bài này là hướng dẫn các bạn cách hiển thị một mảng các objects trên một UITableView. Đây cũng là nền tảng cho việc hiển thị dữ liệu từ một file với định dạng XML hay SQL.

Chúng ta sẽ tạo một mảng Fruits với một vài thông tin liên quan đến từng loại fruit bên cạnh tên của chúng. Ta sẽ hiển thị tên các loại fruit trên UITableView. Khi người dùng bấm vào tên của mỗi loại, một màn hình tương ứng sẽ được hiển thị với thông tin liên quan đến loại fruit mà người dùng vừa chọn.

Mình sẽ cố gắng giải thích một cách chi tiết nhất có thể, tuy nhiên sẽ là rất thuận tiện nếu các bạn đã đọc xong các bài mà mình đã viết trước đây vì mình sẽ sử dụng những khái niệm trong các bài viết đó:

Trong bài viết này, các bạn sẽ học cách:

  • Tạo một ứng dụng kiểu Navigation-Based
  • Tạo một Fruit Class Object
  • Tạo và đưa dữ liệu vào một NSArray
  • Thêm một view mới vào ứng dụng
  • Liên kiết view tới code
  • Hiển thị dữ liệu từ mảng các objects trên UITableView
  • Chuyển màn hình đến view mới và hiển thị dữ liệu liên quan đến row được chọn

Mở X-Code và chọn File->New Project… Chọn Navigation-Based Application và bấm Choose…


Đặt tên cho ứng dụng của bạn Fruit

Chúng ta sẽ tạo một đối tượng fruit để sử dụng trong ứng dụng này. Nếu bạn không quen với khái niệm lập trình hướng đối tượng… Google luôn. Khái niệm này là khá rộng và quá dài để có thể viết trong bài này.

Bấm vào File->New File… đối tượng mà ta sẽ  tạo ra được kế thừa từ NSObject, vì thế chọn NSObject Subclass và bấm Next.

Màn hình kế tiếp sẽ yêu cầu bạn đặt tên cho ứng dụng của bạn. Gõ vào “Fruit” và chú ý đánh dấu vào hộp checkbox “Also create Fruit.h”. Mọi thứ giống như màn hình bên dưới. Bấm Finish.

Bây giờ chúng ta sẽ định nghĩa các thuộc tính cho đối tượng “Fruit”. Trong ứng dụng này mỗi fruit sẽ có namedescription. Mở file Fruit.h và viết đoạn code dưới đây:

Chúng ta đã định nghĩa xong các thuộc tính cần thiết để biểu diễn đối tượng Fruit. Có một dòng code mà có thể các bạn thấy hơi xa lạ: -(id)initWithName:(NSString*)n description:(NSString *)desc; đây là định nghĩa một hàm. Hàm này sẽ được gọi để khởi tạo đối tượng Fruit. Mọi đối tượng(NSObject) đều có một hàm init, nhưng chúng ta tạo ra hàm init của riêng mình để có thể truyền vào tên và môt tả chi tiết cho đối tượng khi ta tạo ra.

Mở file Fruit.m và viết đoạn code sau:

Ở đây chúng ta thực thi(implement) hàm initWithName. Đoạn code này có vẻ như đã khá rõ ràng. Cơ bản là ta chỉ gán giá trị của các đối số cho thuộc tính namedescription của đối tượng Fruit. Điều đáng lưu ý ở đây là dòng code return self. Yếu tố quan trọng là ta sử dụng hàm này với tư cách là hàm khởi tạo(constructor). Nó cho phép hàm này trả về một thực thể(instance) mới của đối tượng Fruit.

Tiếp theo, chúng ta sẽ đặt tiêu đề cho màn hình chính của ứng dụng. Đây là việc làm cần thiết để sau khi ta chuyển đổi từ màn hình chính sang màn hình khác(ở đây là khi ta chuyển sang màn hình hiển thị mô tả chi tiết fruit) thì ứng dụng của ta sẽ tự động có một nút “Back” được hiển thị để quay lại màn hình chính. Mở file RootViewController.m… Bên trong hàm viewDidLoad, thêm vào đoạn code sau:


Chúng ta đặt thuộc tính title trong RootViewController với chuỗi “Fruits”. Chú ý thêm dòng code #import “Fruit.h” vào đầu file để include đối tượng Fruit, cũng như @synthesize fruitView để được hàm “getter” và “setter”.

Chúng ta sẽ tạo một mảng các đối tượng fruits. Mở file FruitAppDelegate.h và thêm vào đoạn code sau:

Ở đây ta thêm vào một thuộc tính kiểu NSMutableArray. Mình sử dụng NSMutableArray thay vì NSArray vì nó có thêm một vài hàm khiến cho đối tương này linh hoạt hơn.

Bây giờ mở file FruitAppDelegate.m và thêm vào @synthesize vào đầu file giúp cho các đối tượng khác có thể truy cập được vào mảng fruits. Lưu ý câu lênh import đối với file Fruit.h.

Bây giờ thêm đoạn code sau vào phương thức applicationDidFinishLaunching.

Những gì ta làm ở đây trong 3 dòng code đầu là tạo mới một thực thể của đối tượng Fruit. Chú ý rằng thay vì gọi  hàm init, ta gọi initWithName mà ta đã viết trước đó. Vì hàm này cho phép ta truyền vào tên và mô tả chi tiết cho mỗi đối tượng fruit.

Dòng tiếp theo self.fruits = [[NSMutableArray alloc]initWithObjects:apple,orange,watermelon,nil]; tạo một mảng mới từ các đối tượng kiểu Fruit mà ta vừa tạo ra ở  3 dòng code trên. Lưu ý việc truyền nil vào với tư cách là đối số cuối cùng trong một NSMutableArray là hết sức quan trọng. Ứng dụng của chúng ta sẽ không hoạt động nếu bạn không nhớ điều này.Nhắc lại một lần nữa, bất cứ khi nào các bạn thực thể hóa một NSMutableArray bằng cách gọi [[NSMutableArray alloc] initWithObjects:object1,object2,…..,nil] ở bất kỳ ứng dụng nào thì đối số cuối cùng mà bạn truyền vào phải là nil, nếu không bạn sẽ gặp những sự cố không mong đợi. Không tin các bạn cứ thử thì biết😀.

Bây giờ ta sẽ tạo view để hiển thị chi tiết mô tả cho từng loại fruit khi người dùng chọn loại fruit đó. Nháy đúp chuột lên bất cứ file .xib nào trong ứng dụng để mở Interface Builder.

Chọn File->New và chọn view rồi Choose.

Bây giờ bạn sẽ thấy một view mới(trống rỗng) và các đối tượng liên quan đến nó. Chúng ta cần một cái gì đó để hiển thị thuộc tính description của đối tượng Fruit. Trong ứng dụng này, mình chọn UITextView mà không phải là UITextField. Bởi vì UITextView cho phép ta hiển thị text trên nhiều dòng. Kéo thả một UITextView vào trong view của bạn. Bây giờ view mới tạo của ta trông như sau:

Bấm File->Save. Một điều cần chú ý nữa là bạn nhớ lưu nó vào thư mục của ứng dụng hiện tại. Mỗi lần mình thêm một view vào và bấm save thì có vẻ như thư mục mặc định mà view được lưu lại không phải là thư mục của ứng dụng hiện tại. Đặt tên file này là FruitViewController và bấm Save.

Một cửa sổ khác sẽ xuất hiện sau khi bạn bấm save. Cửa sổ này hỏi xem bạn có muốn thêm view này vào ứng dụng của bạn không. Đánh dấu vào checkbox cạnh Fruit, bấm Add, và đóng Interface Builder lại.

Ta cần tạo một ViewController để điều khiển View của ta. Bấm File->New File… Chọn UIViewController subclass và bấm Next.

Đặt tên cho file này là FruitViewController.m và đánh dấu vào hộp checkbox “Also create FruitViewController.h”, bấm Finish.

Bây giờ ta sẽ khai báo một Interface Builder Outlet cho UITextView mà ta đã thêm vào view. Mở file FruitViewController.h và thêm vào đoạn code sau:

Dòng code trên cho phép ta liên kết thuộc tính fruitDescription với UITextView mà ta đã tạo. Mở file FruitViewController.m và thêm dòng code sau ngay bên dưới từ khóa @implement. Nó sẽ tạo cho ta phương thức “getter” và “setter” của thuộc tính fruitDescription.

Nháy đúp chuột vào FruitViewController.xib để mở nó trong Interface Builder. Ta cần liên kết view tới class FruitViewCotroller vừa tạo. Bấm vào File’s Owner.

Bấm Tools->Identity Inspector. Chọn FruitViewController từ dropdown bên cạnh class. Lưu ý, dưới khu vực Class Outlets bạn sẽ thấy thuộc tính của UITextView mà ta đã tạo.

Bước cuối cùng thao tác với Interface Buider là liên kết tới UITextView. Bấm vào Tools->Connection Inspector. Bạn sẽ thấy một Outlet với tên gọi fruitDescription. Bấm vào vòng tròn tương ứng và kéo thả nó lên UITextView.

Bây giờ, bấm lên vòng tròn cạnh chữ View dưới outlets và kéo thả nó vào đối tượng View bên trong cửa sổ có tiêu đề FruitViewController. Sau thực hiện xong, bạn sẽ thấy một màn hình như sau:

Đóng Interface Builder.

Đầu tiên chúng ta sẽ tạo một thuộc tính cho view mới để khi người dùng bấm vào từng loại fruit sẽ được chuyển tới view mới này. Mở file  RootViewController.h và thêm đoạn code sau:

Ta tạo một thuộc tính cho fruitViewController. Chú ý #import ”FruitViewController.h”. Điều này cho phép ta thực thể hóa một đối tượng kiểu FruitViewController.

Bây giờ mở file RootViewController.m và tìm phương thức numberOfRowsInSection. Phương thức này cho UITableView biết nó sẽ phải hiển thị bao nhiêu dòng. Trong ứng dụng của ta số dòng sẽ tương ứng với số đối tượng có trong mảng fruits. Thêm đoạn code sau vào phương thức trên:

Dòng code đầu cho phép ta truy cập tới appDelegate của ứng dụng. Đây là nơi mà ta định nghĩa mảng fruit. Sau khi truy cập vào delegate, ta lấy và trả về thuộc tính count của mảng đối tượng fruit.

Bây giờ tìm phương thức cellForRowAtIndexPath và thêm vào đoạn code:

Dòng đầu tiên ta thêm vào là “FruitAppDelegate *appDelegate..”. Vẫn là để truy cập vào appDelegate nơi mà ta khai báo mảng fruit. Dòng kế tiếp gọi phương thức objectAtIndex của mảng các đối tượng fruits.  Tham số index mà ta truyền vào bằng cách sử dụng indexPath.row. Tham số này là một giá trị integer biểu thị cho mỗi dòng của UITeableView. Cuối cùng, ta gọi phương thức setText của đối tượng UITableViewCell để hiển thị tên của mỗi loại fruit trên mỗi cell tại một index xác định.

Bây giờ là bước cuối cùng. Chúng ta sẽ nhận dạng xem row nào trên UITableView được người dùng chọn. Tìm phương thức didSelectRow và thêm vào đoạn code sau:

Phương thức này được gọi mỗi khi người dùng chạm lên một cell trong UITableView. Tham số indexPath có một thuộc tính là row với giá trị là một số nguyên đại diện cho cell mà người dùng chạm vào. Để truy cập vào thuộc tính này ta gọi indexPath.row.

Dòng code đầu cho phép ta truy cập vào appDelegate. Dòng tiếp theo trỏ vào từng index của mảng fruits và tạo một bản copy của đối tượng fruit được chọn.

Phần kế tiếp bắt đầu với “if(self.fruitView == nil)”, khởi tạo viewController nếu đối tượng này chưa được khởi tạo(xem bài trước nếu các bạn cần giải thích rõ hơn về vấn đề này). Một điều cần lưu ý: Đảm bảo rằng tham số bạn truyền vào initWithNibName phải trùng với tên của file .xib mà bạn sử dụng trong view. Ở đây ta đã đặt tên cho nó là FruitViewController.

Tiếp theo dòng code này là dòng code đẩy viewController lên navigationController stack. Điều này khiến cho một view khác được đẩy lên màn hình.

Hai dòng code cuối truyền thông tin mô tả chi tiết về fruit cho view mới. Bản thân nó cũng đã nói lên điều này. Trước hết, ta đặt tiêu đề cho view là tên của loại fruit mà người dùng chọn và gán mô tả chi tiết của loại fruit này cho outlet fruitDescription của UITextView để hiển thị cho người dùng.

Bây giờ bấm Build and Go để chạy ứng dụng. Dưới đây là một  vài hình ảnh về ứng dụng chúng ta vừa xây dựng.

Và sau khi người dùng bấm vào một loại fruit cụ thể…

Mình hi vọng rằng các bạn sẽ thấy thích thú với bài đọc này. Các bạn có câu hỏi hoặc ý kiến gì muốn chia sẻ, xin đừng ngần ngại gửi lại trong phần phản hồi của bài viết này. Chúng ta sẽ cùng nhau thảo luận. Các bạn cũng có thể download mã nguồn của ứng dụng trong bài viết này tại đây để chạy thử. Chúc các bạn lập trình iPhone vui vẻ!

  1. Chưa có phản hồi.
  1. No trackbacks yet.

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: