Bài 31: CustomUITableViewCell

UITableViewDelegate

Ở bài trươc chúng ta đã tạo được một UITableView hiển thị danh sách các món ăn, nhưng UI mặc định của UITableCell không được đẹp mắt. Hôm nay mình sẽ hưỡng dẫn các bạn tạo một CustomUITableViewCell để có một giao diện cho cell đẹp hơn.

1. Thiết kế CustomUITableViewCell

Chúng ta sẽ sử dụng lại project ở bài UITableView, các bạn có thể download source code bài UITableView ở đây: https://bit.ly/32QAP8m

Để custom UITableViewCell các bạn vào Main.storyboard và thực hiện như sau:

Thay đổi UITableViewCell
Hình 1.1 Thay đổi UITableViewCell

Để có thể thay đổi Cell Height các bạn vào menu Show the Size inspector:

Thay đổi Cell Height
Hình 1.2 Thay đổi Cell Height

2. Thêm class điều khiển CustomUITableViewCell

Chúng ta đã thiết kế giao diện của Cell xong do chúng ta custom lại nên cũng phải cần thêm một class để có thể control Cell chúng ta vừa thiết kế.

Các bạn thực hiện như sau:

  • Chọn vào thư mục gốc của project → New File → Cocoa Touch Class → Next :
New File
Hình 2.1 New File
  • Chọn Subclass of là UITableViewCell, đặt tên cho custom cell → Next:
Tạo class cho custom cell
Hình 2.3 Tạo class cho custom cell
  • Chỉ định class control cho custom cell:
Chỉ định class điều khiển cho cell
Hình 2.4 Chỉ định class điều khiển cho cell
  • Ánh xạ Outlet cho UILabel và UIImage trong custom cell. Chọn vào Content View của custom cell → Adjust Editor Options → AssiAsistant (control + option + cmd + enter) và tiến hành ánh xạ như bình thường:
Ánh xạ Outlet cho custom cell
Hình 2.5 Ánh xạ Outlet cho custom cell

3. Sử dụng custom cell

Trong MyTableViewCell, class điều khiển custom cell chúng ta thêm function:

Chỉnh sửa function “tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath)” trong ViewController.swift một chút để sử dụng custom cell mà chúng ta vừa thêm:

Chạy project chúng ta sẽ thấy list món ăn với giao diện mới đẹp hơn trước khi chúng ta custom:

Kết qủa sử dụng custom cell
Hình 3.1 Kết qủa sử dụng custom cell

Cảm ơn bạn đã theo dõi bài viết, nếu có thắc mắc gì vui lòng để lại bình luận bên dưới.

Bạn có thể tham khảo khoá học lập trình iOS tại laptrinh0kho.com. Các khoá học từ cơ bản đến nâng cao, được thực tập doanh nghiệp. Bạn sẽ được cung cấp kiến thức có hệ thống với đội ngũ giảng viên giàu kinh thực tế và am hiểu sư phạm. Hãy liên hệ ngay để được tư vấn miễn phí theo thông tin bên dưới:

LAPTRINH0KHO.COM

  • 138/36 Nguyễn Xí, P. 26, Q. Bình Thạnh, TP.HCM
  • Hotline: 0347.750.760 (Kết bạn Zalo để tư vấn)
  • Email: laptrinh0kho@gmail.com
  • Website: www.laptrinh0kho.com
  • FanPage : laptrinh0kho.com

Leave a Reply

Your email address will not be published. Required fields are marked *