Self-sizing Table View Cells (tự động điều chỉnh chiều cao của Cells)

Self-sizing Table View Cells (tự động điều chỉnh chiều cao của Cells)

Đây là một kỹ thuật trong iOS, sử dụng auto layout để các Table View Cell tự động điều chỉnh kích thước của chính mình phù hợp với nội dung bên trong nó. Lúc này mỗi cell sẽ có chiều cao khác nhau tùy theo nội dung bên trong nó.

1. Tạo UITableView

Đầu tiên mình sẽ tạo một UTableView trong Main.storyboard:

tạo uitableview
Hình 1.1 tạo UITableView

Và một CustomTableViewCell with XIB:

Tạo CustomTableViewCell
Hình 1.2 Tạo CustomTableViewCell

Tiến hành cấu hình UITableView:

2. Thiết kế CustomTableViewCell

Trong CustomTableViewCell mình sẽ thêm một Label để hiển thị nội dung và ánh xạ Label vào CustomTableViewCell:

Thiết kế CustomTableViewCell
Hình 2.1 Thiết kế CustomTableViewCell

Chúng ta sửa lại hàm tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) một chút để hiển thị nộ dung cho TableView:

Bây giờ tableview đã hiển thị nội dung nhưng do chưa cấu hình Self-sizing nên cell sẽ có chiều cao bằng nhau và nội dung không hiển thị hết do quá dài:

Chưa cấu hình Self-sizing
Hình 2.2 Chưa cấu hình Self-sizing

3. Cấu hình Self-sizing

Để cấu hình Self-sizing chúng ta quay lại hàm setupTb() và thêm 2 dòng code sau:

Quay lại CustomTableViewCell.xib và auto layout cho label. Đây là bước quan trọng nhất vì làm không đúng cell sẽ không hiển thị.

Chúng ta cần thêm leading, top, trailing và bottom constraint cho UILabel, từ các constraint này, cộng với kích thước nội tại của subview, iOS sẽ tính được ra kích thước cần thiết của Table View Cell.

Ở đây Cell của mình chỉ có một Label nếu Cell phức tạp có nhiều Subview các bạn cần auto layout cho đúng để hệ thống có thể tính ra height của Cell, đặc biệt lúc nào cũng phải có constraint top và bottom.

Auto layout UILabel
Hình 3.1 Auto layout UILabel

Để UILabel có thể tự động xuống dòng mình cần set Lines number Line break cho nó:

Tự động xuống dòng UILabel
Hình 3.2 Tự động xuống dòng UILabel

Và đây là kết quả:

Kết quả Self-sizing cell
Hình 3.3 Kết quả Self-sizing cell

Bây giờ mỗi Cell đã có chiều cao khác nhau tùy thuộc vào nội dung của cell.

Cám ơn các bạn đã theo dõi bài viết. Các bạn có thể tham khảo Source code ở đây: https://github.com/laptrinh0kho/SelfSizingTableViewCells