Tạo CustomView từ file XIB giúp việc dựng UI được thuận tiện và trực quan hơn, chúng ta có thể thấy được những gì chúng ta đang làm như trong storyboard.
Các bạn làm theo nhưng bước sau để có thể tạo CustomView từ file XIB
1. Tạo một New Single View Application Project
2. Tạo và design file XIB
- Chuột phải vào thư mục project New File, chọn View, đặt tên cho file XIB và nhấn Create:
- Design file XIB theo ý bạn muốn:
Lưu ý: chọn vào Freeform để có thể điều chỉnh size file XIB
3. Tạo UIView file để quản lý XIB
- Chuột phải New File, chọn Cocoa Touch Class:
Lưu ý: tên phải giống tên của file XIB để dễ quản lý và bấm Next, Create:
- Chọn vào file XIB, chọn class là CustomView:
- Chọn vào View của file XIB, nhấn control+option+cmd+enter để ánh xạ View của XIB và class CustomView. Ánh xạ các outlet hoặc action khác nếu cần sử dụng.
- Trong file CustomView.swift chúng ta thêm các hàm init để có thể sử dụng được file XIB:
4. Sử dụng file XIB
Bây giờ các bạn có thể sử dụng file XIB vừa tạo được rồi.
- Trong Storyboard: thêm vào một View set class cho view đó là CustomView, ánh xạ vào để sử dụng các thuộc tính trong CustomView nếu cần.
Ở trên mình set background color là màu đỏ cho các bạn dễ thấy, nhưng khi hiện thị CustomView sẽ có màu xanh do chúng ta đã khởi tạo nó như vậy:
- Ngoài sử dụng trong Storyboard, chúng ta cũng có thể sử dụng CustomView bằng cách code thuần. Các bạn tham khảo đoạn code tạo CustomView sau: sau:
Kết quả đoạn code trên mình đã tạo ra CustomView màu xanh dương do mình có set lại background color:
Các bạn có thể tham khảo source code ở đây: https://github.com/laptrinh0kho/CustomView
