Hướng dẫn sử dụng Table View trong iOS

Hướng dẫn sử dụng table view trong ios. Table View trong ios được sử dụng để hiển thị dữ liệu theo dòng và cột. Điều đó có nghĩa là trên mỗi dòng, chúng ta có thể hiển thị nhiều cột. Nếu bạn nào đã từng sử dụng ListView trong Android thì Table View trong iOS là tương tự. Hình bên dưới là một ví dụ về table view trong ios.

huong dan su dung table trong ios 1

Trong bài hướng dẫn này, chúng tôi sẽ hướng dẫn bạn cách tạo và sử dụng Table View dạng custom cell. Nghĩa là Table View được chỉnh sửa theo ý của người dùng như trong hình trên, chúng tôi đã custom lại table view để hiển thị dữ liệu trên 2 cột. Các bạn cũng có thể custom để table view hiển thị thêm hình ảnh, ….

Hướng dẫn sử dụng table view trong ios – Các bước thực hiện

Bước 1: Sử dụng project hiện tại và bổ sung View Controller hoặc tạo mới project như bên dưới

Trong Xcode, chọn File -> New -> Project -> chọn Single View Application -> chọn Next

huong dan su dung table trong ios 2

Nhập Product Name, chọn Language, chọn Devices -> chọn Next

huong dan su dung table trong ios 3

Bước 2: Thiết kế giao diện

2.1 Chọn Main.storyboard -> chọn Table View và đưa vào khu vực thiết kế

huong dan su dung table trong ios 4

2.2 Thiết kế cell cho Table View

huong dan su dung table trong ios 5

2.3 Nhập tên cho cell mà chúng ta đang thiết kế

huong dan su dung table trong ios 6

2.4 Thiết kế các thành phần trên một dòng mà chúng ta muốn hiển thị. Trong hình chúng tôi đã sử dụng 2 Lable tương ứng cho 2 cột trên một dòng.

huong dan su dung table trong ios 7

Bước 3: Tạo lớp kế thừa lớp UITableViewCell

Chuột phải project -> chọn New File

hướng dẫn sử dụng table view trong ios

Chọn iOS -> chọn Source -> chọn Cocoa Touch Class -> chọn Next

huong dan su dung table trong ios 9

Nhập tên Class, chọn Subclass of, chon Language -> chọn Next -> chọn Create

huong dan su dung table trong ios 10

Bước 4: Tham chiếu các thành phần trong lớp CustomTableViewCell (Lớp này được tạo ở bước 3)

4.1 Chỉ định CustomTableViewCell được sử dụng để viết code (chọn Show the Identity inspector để hiển thị Custom Class)huong dan su dung table trong ios 21

huong dan su dung table trong ios 12

4.2 Tham chiếu

huong dan su dung table trong ios 13

Sau khi tham chiếu 2 thành phần Label

Bước 5: Viết xử lý hiển thị dữ liệu cho Table View tại lớp ViewController

5.1 Cài đặt 2 interface UITableViewDataSourceUITableViewDelegate và cài đăt xử lý cho 2 phương thức tableView

huong dan su dung table trong ios 15

5.2 Khai báo dữ liệu dùng để hiển thị lên Table View

var names = ["Xuan", "Ha", "Thu", "Dong"]
var ages = [19, 20, 21, 22]

5.3 Tham chiếu Table View (Giữ phím Ctrl và chọn Table View và rê chuột vào vị trí thích hợp trong lớp ViewController)

huong dan su dung table trong ios 16

@IBOutlet weak var tv: UITableView!

5.4 Viết xử lý cho 2 phương thức tableView

// Thiết lập số dòng được hiển thị
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
  return self.names.count
}

// Hiển thị dữ liệu lên Table View
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
 // Tham chiếu cell được thiết kế tại Prototype Cells
 let cell = self.tv.dequeueReusableCellWithIdentifier("myCell", forIndexPath: indexPath) as! CustomTableViewCell

 // Hiển thị dữ liệu
 cell.lblName.text = self.names[indexPath.row]
 cell.lblAge.text = String.init(self.ages[indexPath.row])

 return cell;
}

Bước 6: Đăng ký data Source và delegate

6.1 Đăng ký data Source

huong dan su dung table trong ios 18

6.2 Đăng ký delegate

huong dan su dung table trong ios 19

Sau khi đăng ký thành công

huong dan su dung table trong ios 20

Như vậy chúng ta đã hoàn tất các bước thực hiện hướng dẫn sử dụng table view trong ios. Chúc các bạn thành công.