Giới thiệu về TableView trong iOS

TableView 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ì TableView trong iOS là tương tự. Hình bên dưới là một ví dụ về TableView trong iOS.

Trong bài hướng dẫn này, mình sẽ hướng dẫn bạn cách tạo và sử dụng TableView dạng custom cell. Nghĩa là TableView đượ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 TableView để hiển thị dữ liệu trên 2 cột. Các bạn cũng có thể custom để TableView hiển thị thêm hình ảnh, ….

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

Bước 1: Tạo project

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


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

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

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

2.2 Chọn số lượng Cell cho TableView

2.3 Nhập tên cho cell (Identifier) mà chúng ta đang làm, ví dụ: Cell

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.

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

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

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

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

Bước 4: Ánh xạ các thành phần trong lớp CustomTableViewCell

4.1 Chọn CustomTableViewCell làm file quản trị cho Cell
4.2 Ánh xạ: Nhấn Ctrl và chọn thành phần muốn ánh xạ và đặt tên tương ứng![](/assets/ok3.png)
Sau khi ánh xạ 2 thành phần Label ta sẽ được như hình![](/assets/4.3.jpg)

Bước 5: Hiển thị dữ liệu cho TableView tại lớp ViewController

5.1 Cài đặt 2 interface UITableViewDataSourceUITableViewDelegate, như hình:5.2 Ánh xạ TableView (Giữ phím Ctrl và chọn TableView và rê chuột vào vị trí thích hợp trong lớp ViewController, đặt tên và nhấn Connect)![](/assets/5.2.jpg)5.3 Khai báo dữ liệu dùng để hiển thị lên TableView, như hình:![](/assets/5.3.jpg)5.4 Viết xử lý cho 2 phương thức TableView, như hình:![](/assets/5.4.jpg)

Bước 6: Khai báo dataSourcedelegate trong viewDidLoad()

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 TableView cơ bản trong iOS. Chúc các bạn thành công.

Phương Duy

results matching ""

    No results matching ""