[Swift] Custom View 만들기

자신만의 뷰를 만드는 방법엔 2가지가 있어요

만들어놓고 가져다 쓰기 좋기 위함이죠!

 

 

1. Xib를 이용

2. 오로지 코드로만 작성

 

 

Xib이용

Xib이란 Xcode Interface Builder의 약자로

Nib 파일을 XML형식으로 변환한 파일이에요

XML로 이루어져있어서 소스코드를 좀 더 알아보기 편하겠죠

Nib를 사용하다가 추후에 나오게된 형식이죠

 

Nib이란 NeXTSTEP Interface Builder의 약자로

바이너리 형식의 파일이에요

유저 인터페이스를 저장하고 처리속도가 빨라요

Xib파일을 빌드하면 Nib으로 컴파일되고 그 파일을 배포하는 식이에요

 

 

Tableview나 CollectionView의 Cell을 Xib파일로 만드는 예시가 제일 쉬운 예시가 되겠네요

같은이름으로 Xib, Swift파일을 만들고(구분하기쉽도록)

스토리보드에서 뷰를 만들듯 드래그와 클릭을통해서 뷰를 디자인하고 Class를 지정해주는것까지는 똑같아요

커스텀뷰니까

safe area는 필요없겠죠!

체크박스 꺼줄게요

 

끄고 안끄고 차이가 뭐냐구요??

 

요로케 사라져요 ㅎㅎ

 

 

대충 뷰를 만들어주고~~

 

Owner설정을 해주고

이건 이벤트를 받는 주최를 설정하는거라

이 작업을 안해줘도 뷰가 나오는거랑은 상관이 없어요

 

이제 불러와야겠죠??

 

 

스토리보드에서 사용하는건 쉬워요

UIView를 끌어다가 놓고

UIView에 클래스이름을 지정해주면 끝이구요

 

그전에 Swift파일에

기본적인 생성코드를 만들어야해요

class CustomView: UIView {
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        loadView()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        loadView()
    }
    
    private func loadView() {
        let view = Bundle.main.loadNibNamed("CustomView",
                                       owner: self,
                                       options: nil)?.first as! UIView
        view.frame = bounds
        addSubview(view)
    }
}

 

인스턴스 생성이아니라서

스토리보드에서 생성할땐

required 함수가 실행되요!! 꼭 알아두시구요

 

뷰 구조는

CustomView(빈 뷰)위에 제가만든 Xib를 불러와서 위에 쌓인 원리에요

스토리보드에서 보고싶으면 @IBDesignable을 이용하면되구요

 

밑에서 설명할 Code로만 구현했을때도

@IBDesignable을 이용해서 스토리보드에서 볼 수 있어요

 

 

 

Only Code 구현

Xib파일이 필요가없고 Swift파일만 만들고

 

말그대로 코드로만 노가다(?)로 구현하는거에요 ㅎㅎ

init(frame:)함수가 실행되구요!

 

뷰 컨트롤러에서 불러올때는

해당 클래스의 인스턴스를 만들고

addSubview를 통해서 추가해줘요

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let customView2 = CustomView2(frame: CGRect(x: 0, y: 300, width: UIScreen.main.bounds.width, height: 200))
        
        view.addSubview(customView2)
    }
}

class CustomView2: UIView {

    override init(frame: CGRect) {
        super.init(frame: frame)
        print(#function)
        loadView()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        print(#function)
        loadView()
    }
    
    private func loadView() {
        let purpleView = makeView()
        purpleView.frame = CGRect(x: 0, y: 0, width: bounds.width, height: 30)
        addSubview(purpleView)
        
        let label = makeLabel()
        label.frame = CGRect(x: 0, y: 50, width: bounds.width, height: 20)
        addSubview(label)
    }
    
    private func makeView() -> UIView {
        let view = UIView()
        view.backgroundColor = .purple
        return view
    }
    
    private func makeLabel() -> UILabel {
        let label = UILabel()
        label.text = "커스텀2"
        label.textAlignment = .center
        return label
    }
}

 

뷰의 구조를 같이 비교했을 때

Xib으로 불러올땐(위 뷰)

뷰위에 제가만든 Xib뷰가 올라가는형식이였지만

 

코드로 만들땐(아래 뷰)

바로 만들어지는게 보이시나요

 

큰 차이는아닌거같구요..

 

 

 

Xib 사용과 코드사용을 비교해봤어요

장단점	Xib사용	코드사용
장점	눈으로 쉽게 보면서 레이아웃 작업가능 뷰 컨트롤러에 추가적인 코드작업 필요없음 레이아웃 에러찾기쉬움 재사용성	어떤 일이 일어나는지 알 수 있음 개발자 마음대로 제어가 가능(동적인 레이아웃) 충돌시 해결쉬움 재사용성
단점	충돌시 골치아픔 코드로 작성한 UI에 비해서 오버헤드가 큼 (필요시 메모리로드->파싱과정..)	개발기간이 Xib에비해서 오래걸림 에러찾기 어려움 오래된 코드 리팩토링 어려움

 

상황에 맞게 잘 쓰면 될거같구요!

둘 다 쓰는법을 알아두면 좋아요

섞어서도 많이쓰거든요