XIB 를 이용해서 Custom View 만들기

굿데이 여러분

 

오늘은 XIB 를 이용해서 뷰를 만들어보는 법을 알아보도록 하게씁니다

 

기본적으로 UIViewController, UITableViewCell 과 UICollectionViewCell 의 경우에는 xib 를 지원하는데여

 

UIView 는 자동으로 xib 를 만들어주지 않습니다...! 이게 나라냐

 

하지만 UIView 로도 만들어야겠져?

 

일단은 UIView 클래스만 빼서 만들어봅니다

 

그 다음에는 User Interface 에서 View 를 선택해서 빈 껍데기인 xib 파일을 만들어봅시다

 

파일명은 아무래도 똑같이 하는게 서로에게 편하겠죠?

 

CustomView.xib 로 만들어줍니다.

 

요친구임

이제 빈 뷰에 들어가서 Placeholders 부분에 있는 File's Owner 를 선택한 후에

 

Identify Inspector 부분에서 Custom Class 를 기존에 만들어놨던 CustomView 로 지정해봅시다

 

그리고 뷰 자체에서도 동일하게 해주셔야 해여

 

이 두군데의 Custom Class 를 아래와 같이...!

 

 

자 참 쉽죠?

 

하지만 끝날때까지 끝난게 아닙니다

 

바로 xib 파일과 CustomView 를 연결해주어야 하는데욤

 

CustomView.swift 파일로 가서 아래와 같이 코드를 짜줍시다

 

class CustomView: UIView {
    
    override init(frame: CGRect) {
        super.init(frame: frame)

        let nib = UINib(nibName: "CustomView", bundle: Bundle.main)
        
        guard let xibView = nib.instantiate(withOwner: self, options: nil).first as? UIView else { return }
        
        xibView.frame = self.bounds
        xibView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        self.addSubview(xibView)

    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

 

이후에 ViewController 에서 CustomView 를 불러오게 되면?

 

아주 깔끔하게 Xib에서 그린 UI 를 볼 수 있게 됨미다

 

하지만 xib 를 만들때마다 계속 nibName 을 하드코딩하면 객체지향적이지 않죠?

 

공통 클래스로 한번 빼주겠읍니다

 

XibView 라는 클래스로 만들어볼게여

 

class XibView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        let className = String(describing: type(of: self))
        let nib = UINib(nibName: className, bundle: Bundle.main)
        
        guard let xibView = nib.instantiate(withOwner: self, options: nil).first as? UIView else { return }
        xibView.frame = self.bounds
        xibView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        self.addSubview(xibView)
        
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

 

달라진건 className 부분입니다

 

방금 만들때처럼 class 명과 xib 파일의 이름이 동일하게 맞췄기 때문에 쓸 수 있습니다

 

두개의 이름을 다르게 쓰시면 크래시가 나니 주의하시구여

 

이제 CustomView 가 XibView 를 상속받게 되면

 

평온하게 UIView 도 Xib 로 UI 를 뚝딱뚝딱 그릴 수 있게 되겠슴니다

 

사실 저는 코드로 그리는걸 더 선호하긴 하는데,,,

 

Xib로 간단하게 그릴 수 있는게 있으면 같이 쓰는것도 나쁘지는 않을것 같습니다

 

해당 코드는 제 깃헙에 올려두도록 하겠슴니당

 

github.com/FlowSc/CustomXibView

 

그러면 다음 시간에 또 만나여 안녕~~~