Ở 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:
Để có thể thay đổi Cell Height các bạn vào menu Show the Size inspector:
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 :
- Chọn Subclass of là UITableViewCell, đặt tên cho custom cell → Next:
- Chỉ định class control cho custom 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:
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:
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
