Tạo CustomView từ file XIB

Tạo CustomView từ file XIB

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

Single Application

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:
Tạo file XIB
Hình 2.1 Tạo file XIB
  • Design file XIB theo ý bạn muốn:
Design file XIB
Hình 2.2 Design file XIB

Lưu ý: chọn vào Freeform để có thể điều chỉnh size file XIB

Set Freeform
Hình 2.3 Set Freeform

3. Tạo UIView file để quản lý XIB

  • Chuột phải New File, chọn Cocoa Touch Class:
Tạo UIView file
Hình 3.1 Tạo UIView file

Lưu ý: tên phải giống tên của file XIB để dễ quản lý và bấm Next, Create:

Đặt tên file UIView
Hình 3.2 Đặt tên file UIView
  • Chọn vào file XIB, chọn class là CustomView:
Set class
Hình 3.3 Set class cho file XIB
  • 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.
ContentView
Hình 3.4 ContentView
  • 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.
Sử dụng trong Storyboard
Hình 4.1 Sử dụng trong Storyboard

Ở 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:

Kết quả
Hình 4.2 Kết quả
  • 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:

Tạo CustomView bằng code
Hình 4.3 Tạo CustomView bằng code

Các bạn có thể tham khảo source code ở đây: https://github.com/laptrinh0kho/CustomView