Tạo custome view từ file xib một cách chuẩn xác nhất
This post hasn't been updated for 3 years
Việc vẽ view trên storyboard bao giờ cũng trực quan hơn, nhanh hơn so với việc code frame bằng tay. Hôm nay mình sẽ hướng dẫn các bạn cách tạo một view có thể tái sử dụng từ file xib theo cách đơn giản và chính xác nhất. Hãy follow theo các bước sau
Bước 1
Tạo một "Persion View" là UIView
Bước 2
Tạo file xib đặt tên giống class đã tạo ở bước 1
Hãy vẽ thêm 2 label lastname, first name để test
Bước 3
Mở PersonView.xib và chọn File Owner, mở tab Custom Class và nhập PersonView. Bây giờ file quản lý PersonView.xib là class PersonView.
Bước 4
Kéo outlet view từ file xib vào file quản lý, đặt tên tuỳ ý Ở đây, bạn cũng sẽ kéo toàn bộ ui muốn chỉnh sửa vào file quản lý để sử dụng trong đó, tuy nhiên view cha là bắt buộc phải kéo outlet
Bước 5
Sử dụng đoạn code sau để init view
import UIKit
class PersonView: UIView {
let kCONTENT_XIB_NAME = "PersonView"
@IBOutlet var contentView: UIView!
@IBOutlet var lblFirstName: UILabel!
@IBOutlet var lblLastName: UILabel!
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
commonInit()
}
func commonInit() {
Bundle.main.loadNibNamed(kCONTENT_XIB_NAME, owner: self, options: nil)
contentView.fixInView(self)
}
}
extension UIView
{
func fixInView(_ container: UIView!) -> Void{
self.translatesAutoresizingMaskIntoConstraints = false;
self.frame = container.frame;
container.addSubview(self);
NSLayoutConstraint(item: self, attribute: .leading, relatedBy: .equal, toItem: container, attribute: .leading, multiplier: 1.0, constant: 0).isActive = true
NSLayoutConstraint(item: self, attribute: .trailing, relatedBy: .equal, toItem: container, attribute: .trailing, multiplier: 1.0, constant: 0).isActive = true
NSLayoutConstraint(item: self, attribute: .top, relatedBy: .equal, toItem: container, attribute: .top, multiplier: 1.0, constant: 0).isActive = true
NSLayoutConstraint(item: self, attribute: .bottom, relatedBy: .equal, toItem: container, attribute: .bottom, multiplier: 1.0, constant: 0).isActive = true
}
}
Bước 6
Đến đây thì là bước sử dụng bình thường ở những view khác, chúng ta có thể khởi tạo bằng tay hoặc trong storyboard đều được
Bước 7
Done, kết quả là chúng ta có một view custom có thể tái sử dụng từ file xib. Cám ơn các bạn đã follow bài viết. Hi vọng sẽ tiết kiệm được thời gian cho các bạn. Chúc các bạn thành công!
All Rights Reserved