[iOS/Swift] xib를 이용한 Custom UIView 만들기

UIViewController, UITableViewCell, UICollectionViewCell, UICollectionReusableView 등을 

상속 받는 subclass 파일을 생성할 때  xib를 함께 만들 수 있지만 

아쉽게도 UIView는 파일 생성시 함께 xib를 만들어 줄 수 없습니당 

 

우선은 UIView의 Subclass인 CommonTextField를 생성해 주겠습니다

새 파일을 추가하고 Class 명을 입력한 후 

Subclass는 UIView로 상속 받으면 됩니다

Next를 눌러서 진행해 줍니다.

 

이제 xib 파일을 생성해 줍니다

새로운 파일을 추가하고 User Interface 섹션에서 보이는 View를 선택해 주면

xib 파일을 추가할 수 있습니다

저는 이전에 생성한 UIView 를 상속받은

CommonTextField와 동일하게

CommonTextField.xib로 지정해 주었습니다.

 

대부분 커스텀 뷰는 VC에서 일부분을 당당하게 되기 때문에

xib에서 기본적으로 보이는 view의 사이즈를 자유자재로 변경 가능하도록 만들어 주겠습니다

Attributes Inspector에서 Size > Freeform을 눌러 줍니다

그러면 이렇게 원하는 사이즈로 변경 가능합니다

모서리나 가장자리를 잡고 조절해 주세요!

반드시 File's Owner를 한번 클릭해 주시고

이제 이미지에 나와 있는 Help inspector가 아니라(ㅠㅠ) 

Identity inspector(네번째 탭)로 가셔서 class의 명을

이전에 생성했던 swift 파일로 지정해주세요~

만약에 xib이름은 CommonView.xib 이고,

class 의 이름은 CommonTextField.swift라면

저기에는 CommonTextField가 들어가면 되는 거죠!

 

이러면 끝이냐 하기 전에 

File's owner을 이해해 보겠습니다

 

인터페이스 빌더인 .xib 파일을 컴파일하여 nib 파일을 생성합니다.

nib 파일은 UI 관련 객체와 속성, 객체간 연결 정보가 포함되어 있어요

 

여기서 중요한 것

File's owner는 

loadNibNamed: 혹은 initWithNibName: 을 이용하여 nib를 로드합니다

런타임 동안 xib 파일이 nib 파일로 컴파일 되어 로드 되면

file's owner에서 설정한 outlet을 사용하여 오브젝트를 변경하거나 

서브뷰를 생성할 수 있습니다.

 

현재 File's owner로만 연결되어 있습니다

File's owner로 CommonTextField를 설정해 주었기 때문에

CommonTextField에서  IBAction이나 IBOutlet을 연결하여 사용 가능하나

loadNibNamed로 로드해 주어야 합니다

 

Extension을 생성해 주겠습니다

 

extension UIView {
    func loadXib() {
        // 1
        let identifier = String(describing: type(of: self))
        // 2
        let nibs = Bundle.main.loadNibNamed(identifier, owner: self, options: nil)
        // 3
        guard let customView = nibs?.first as? UIView else { return }
        // 4
        customView.frame = self.bounds
        // 5
        self.addSubview(customView)
    }
}

출처 : https://dongminyoon.tistory.com/50

[iOS] 커스텀 UIView - xib이용하기 (2가지 방법)

1.

현재 loadXib를 호출한 클래스의 이름을 identifier 변수로 받습니다

2. 

loadNibNamed로 nib를 로드해 줍니다 owner는

현재 해당 함수를 호출하는 File's owner인 CommonTextField 이고 self로 지정해 주면 됩니다

3.

xib 인터페이스 빌더 안에는 여러개의 뷰를 추가 할 수 있습니다

따라서 loadNibNamed를 해줄 때 하나의 뷰만 가지고 오는게 아니라

최상위에 추가해 준 뷰들을 array로 가지고 오기 때문에

그 중 첫 번째 (지금은 하나의 view 밖에 없지만)를 가지고 오는거에요

4. 

뷰 크기에 맞춰서 customView의 사이즈와 위치를지정해 줍니다.

5. 

현재 UIView에 nib를 통해 로드한 customView 를 추가 해 줍니다. 

class CommonTextField: UIView {
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.loadXib()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        self.loadXib()
    }
}

이제 커스텀 뷰로 돌아와서 이니셜라이저에

extension 에서 지정한 함수를 호출합니다

마지막으로 사용하고자 하는 VC에 

view를 추가해 주시고

Custom class를 지정해 주시면 성공적으로 로드 되는 것을 확인할 수 있어요

 

 

이 방법을 사용하게 되면 UIView 가 File's owner를 가지고 있기 때문에

이 custom view를 생성할 UIViewController의 File's owner를 지정해 주는 방법을 사용할 수 있습니다

원래 지정해 주었던 File's Owner에서 커스텀 클래스를 지워 줍니다

지우고 엔터 누르기!

뷰를 누르고 인스펙터로 돌아가서

커스텀 클래스를 지정해 줍니다

class CommonTextField: UIView {
    
    override init(frame: CGRect) {
        super.init(frame: frame)
//        self.loadXib()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
//        self.loadXib()
    }
}

이니셜라이저에서 호출했던 익스텐션 함수를 주석 처리해 주세요

VC와 연결되어 있는 인터페이스 빌더에 추가해 준 뷰의 

Custom class 도 지워줍니다

그리고 이 뷰를 VC에 IBOutlet으로 연결해 주세요

@IBOutlet weak var customView: UIView!

class RegisterFirstViewController: UIViewController {

    @IBOutlet weak var customView: UIView!
    
    override func viewDidLoad() {
        super.viewDidLoad()

        let nibs = Bundle.main.loadNibNamed("CommonTextField", owner: self)
        guard let commonTextField = nibs?.first as? CommonTextField else {
            return
        }
        
        commonTextField.frame = customView.bounds
        customView.addSubview(commonTextField)
    }
}

이제 이 custom UIView를 필요로 하는 VC에서 

필요한 곳에 로드해 주는 방식을 사용합니다

이렇게 하면 File's Owner를 VC가 가져갈 수 있습니다

 

custom class 를 생성한다 -> xib 파일을 생성한다 -> nib 파일로 로드한다 

이렇게 정리하시면 될거 같아요

 

혹시 문제가 있거나 틀린 부분이 있다면 언제든지 알려주시면 감사하겠습니다!

---

참고 도서 및 사이트

---

 

https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/LoadingResources/CocoaNibs/CocoaNibs.html

 

https://velog.io/@lena_/UINib

 

https://stackoverflow.com/questions/15251370/what-is-the-files-owner-in-interface-builder