[iOS] xib에서 Custom View 생성하는 방법

1. CustomView를 File's owner로 지정해서 쓰는 방법

---

• CustomView 안에 contentView라고 하는 IBOutlet 뷰를 넣고 해당 뷰안에 원하는 화면을 구현하는 방법
• 장점
  • 커스텀 뷰의 생성자 함수들을 온전히 사용할 수 있다.
• 단점
  • CustomView 안의 contentView라고 하는, 일종의 View Hierarchy에서 Super view 역할을 하는 뷰에 내용이 들어가있어서, subView를 추가할 때 CustomView가 아닌 CustomView.contentView에 추가해야 Hierarchy가 엉키지 않는다.

 

CustomRedView

import UIKit

class CustomRedView: UIView {
    @IBOutlet weak var contentView: UIView!
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        initialize()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        initialize()
    }
    
    private func initialize() {
        Bundle(for: CustomRedView.self).loadNibNamed("CustomRedView", owner: self) //Nib 파일을 불러와 세팅
        
        self.addSubview(contentView)
        contentView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            contentView.topAnchor.constraint(equalTo: self.topAnchor),
            contentView.bottomAnchor.constraint(equalTo: self.bottomAnchor),
            contentView.leadingAnchor.constraint(equalTo: self.leadingAnchor),
            contentView.trailingAnchor.constraint(equalTo: self.trailingAnchor)
        ])
    }
}

 

CustomRedView 생성 및 사용

import UIKit

class ViewController: UIViewController {
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let customRedView = CustomRedView()
        customRedView.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(customRedView)
        NSLayoutConstraint.activate([
            customRedView.widthAnchor.constraint(equalToConstant: 200),
            customRedView.heightAnchor.constraint(equalToConstant: 200),
            customRedView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
            customRedView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor)
        ])
    }
    
}

 

 

2. CustomView를 직접 Custom class로 지정하는 법

---

• 1번과 달리 CustomView를 직접 xib의 View의 CustomClass로 지정하는 방법이다.
• 장점
  • contentView와 같은 super view역할을 하는 뷰가 따로 필요가 없다
• 단점
  • CustomView의 생성자를 사용 못한다.

 

CustomBlueView

import UIKit

class CustomBlueView: UIView {
    
}

 

CustomBlueView 생성 및 사용

import UIKit

class ViewController: UIViewController {
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        guard let customBlueView = Bundle(for: CustomBlueView.self).loadNibNamed("CustomBlueView", owner: nil)?.first as? CustomBlueView else { return }
        //불러온 nib파일의 first를 CustomBlueView로 타입 캐스팅
        
        customBlueView.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(customBlueView)
        NSLayoutConstraint.activate([
            customBlueView.widthAnchor.constraint(equalToConstant: 200),
            customBlueView.heightAnchor.constraint(equalToConstant: 200),
            customBlueView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
            customBlueView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor)
        ])
    }
    
}

 

Bundle.loadNibNamed

• Bundle의 Nib파일에 있는 UI를 불러와서 object들을 만들 수 있다.
• Loading Process
  • 각 Object들을 unarchiving, 초기화, 다른 Obect들과의 connection을 만든다.
  • setValue(:for:key)메서드를 이용하여 Outlet 커넥션을 만든다. 
• Parameter
  • name: 불러오고자 하는 nib파일의 이름 ex) CustomView.xib에서 'CustomView'
  • owner: nib의 File's owner로 지정될 object
    • owner 지정 후 호출 시, 해당 클래스와의 Outlet connection 생성
  • options: Nib파일 불러올 때의 지정할 수 있는 옵션들
• Return 값
  • nib파일 최상위에 있는 object들의 array를 반환한다.
    • xib파일에 추가되어 있는 View들을 의미 
    • File's Owner에 대한 reference를 반환하지는 않는다.
    • 오직 nib파일이 언아키이빙 될 때, 초기화되는 object들만 반환한다.

CustomView.xib

import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        if let customBlueView: CustomBlueView = Bundle(for: CustomBlueView.self).loadNibNamed("CustomView", owner: nil)?[0] as? CustomBlueView {
            self.view.addSubview(customBlueView)
            customBlueView.translatesAutoresizingMaskIntoConstraints = false
            
            NSLayoutConstraint.activate([
                customBlueView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
                customBlueView.topAnchor.constraint(equalTo: self.view.topAnchor),
                customBlueView.heightAnchor.constraint(equalToConstant: 300),
                customBlueView.widthAnchor.constraint(equalToConstant: 300)
            ])
        }
        
        if let customGreenView: CustomGreenView = Bundle(for: CustomGreenView.self).loadNibNamed("CustomView", owner: nil)?[1] as? CustomGreenView {
            self.view.addSubview(customGreenView)
            customGreenView.translatesAutoresizingMaskIntoConstraints = false
            
            NSLayoutConstraint.activate([
                customGreenView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
                customGreenView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
                customGreenView.heightAnchor.constraint(equalToConstant: 300),
                customGreenView.widthAnchor.constraint(equalToConstant: 300)
            ])
        }
    }
}