[iOS] Custom View 만들기 (with .xib)

안녕하세요 :)

오늘은 Custom View를 만드는 방법에 대해 알아보겠습니다!

 

Custom View를 만드는 방법에는 크게 두 가지가 있는데요.

1. Xib로 View 만들기
2. 코드로 View 만들기

 

오늘은 Xib로 Custom View를 만들어보겠습니다!

 

Xib로 Custom View 만들기

프로젝트를 하나 만들어주시고 Xib 파일을 만들기 위한 View를 선택해서 파일을 만들어줄게요!

 

그다음엔 Xib와 연결할 Swift 파일을 생성합니다.

 

이렇게 만들어 놓은 Xib에 들어간 후에 위쪽 File's Owner에 방금 만든 CustomView.swift 파일을 연결해주겠습니다.

 

그 후에 열심히 커스텀 뷰를 만듭니다! 뚝딱뚝딱~

 

저는 이런 식으로 만들고 View Controller에서 Show 버튼을 누르면 제가 만든 Custom View가 보이도록 하겠습니다.

 

이렇게 Xib로 Custom View를 만드는 방법에서 가장 중요한 부분은 초기화인데요.

Xib와 연결해놓은 CustomView.swift 파일에서 초기화를 진행합니다.

 

import UIKit

class CustomView: UIView {
    @IBOutlet var customView: UIView!
    @IBOutlet var customLabel: UILabel!
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        initialize()
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        initialize()
    }
    
    private func initialize() {
        Bundle.main.loadNibNamed("CustomView", owner: self, options: nil)
        customView.frame = self.bounds
        customView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        
        addSubview(customView)
    }
    
    @IBAction func buttonTapped(_ sender: Any) {
        customView.backgroundColor = .lightGray
        customLabel.textColor = .white
    }
}

저는 이런 식으로 작성해주었습니다.

우선 initialize()라는 함수는 제가 정의한 초기화 함수입니다.

 

initialize()

번들의 이름이 "CustomView'라는 Nib를 load 하고, 뷰의 Frame과 오토리사이징을 정해줍니다.

그 후에 뷰를 추가합니다.

 

그리고 required init?(coder:) 함수는 스토리보드로 초기화할 때 필요한 함수이고,

override init(frame:) 함수는 코드로 초기화시킬 때 필요한 함수입니다.

 

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
    
    @IBAction func show(_ sender: Any) {
        let customView = CustomView(frame: CGRect(x: 105, y: 200, width: 200, height: 350))
        view.addSubview(customView)
    }
}

그리고 위의 코드는 스토리보드와 연결된 ViewController 코드입니다.

버튼을 누르면 커스텀 뷰가 나오도록 frame을 정의해서 생성해주었습니다.

 

결과물

요런 식으로 동작하는 커스텀 뷰를 만들어 보았습니다!