[iOS] CustomView 사용하기

CustomView를 다 만들고 나면 UIViewController에 추가해서 화면에 보이게 해야한다.

 

 

두가지 방법이 있는데,

 

Storyboard에서 UIViewController에 View를 만든 후 CustomView로 Custom Class를 지정하거나

 

소스로 View에 addSubview() 하는 방법이 있다.

 

 

우선 UIViewController에 자신이 만든 CustomView를 보여줄 UIView를 하나 만든다.

 

CustomView를 추가할 ViewController

 

나는 ViewController의 흰 부분에 CustomView를 추가하려고 한다.

 

1) Custom Class 지정

 

CustomView를 추가할 View를 클릭한 후

 

Identity Inspector에서 Custom Class의 Class를 CustomView로 지정한다.

 

이 방법은 화면비율만 잘 맞으면 왠만하면 별 문제없이 잘 동작한다.

 

Custom Class로 CustomView 지정

 

2) view.addSubview()

 

CustomView가 들어갈 View에 IBOutlet을 추가한다.

 

View의 IBOutlet 추가

 

해당 뷰에 addSubview() 하고 실행해보자.

class ViewController: UIViewController {
 
    @IBOutlet weak var contentsView: UIView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        let customView = CustomView()
        self.contentsView.addSubview(customView)
    }
 
}
 

 

 

실행

 

잘 된 것 같다.

 

 

 

하지만 로그를 보니 뭔가 후루룩 올라가 있다.

 

레이아웃이 깨졌어요.

 

이 로그의 의미는 constraints를 다시 확인하라는 뜻이다.

(이에 대한 자세한 내용은 여기서 확인해보자.)

 

CustomView는 UIView를 상속받고 있기 때문에 override init() 함수에 인자값으로 CGRect타입의 frame가 지정돼있다.

(무슨 말이지 싶으면 얼른 여기로)

 

그래서 CustomView을 생성할 때 frame까지 지정해주는게 좋겠다.

 

 

 

View에 frame을 지정해주려면 CGRect에 대해 대충이라도 알아야 한다.

 

CustomView(frame: CGRect(

 

나는 x, y, width, height를 각각 따로 지정해주는걸 선호한다. 눈에 잘 보이기 때문이다.

 

각 값에 대한 대략적으로 설명이다.

 

x: 왼쪽이 0, 오른쪽으로 갈수록 +

y: 위가 0, 아래로 갈수록 +

width: 가로 길이

height: 세로 길이

 

customView는 UIViewController에 IBOutlet으로 추가했던 contentsView에 addSubview() 할 것이다.

 

때문에 contentsView를 기준으로 x, y, width, height를 지정해줘야한다.

 

x, y 값은 0, 0으로 지정하면 왼쪽 위부터 딱맞게 들어갈 것 같다.

 

width, height는 어차피 contentsView에 넣을거니까 contentsView.frame.width, height 하면 되는거 아냐?

 

라고 생각할 수 있지만 그렇게 생각하면 안된다.

 

왜냐하면 나의 경우, Storyboard에서 보여지는 화면은 iPhone 11 기준이지만

 

시뮬레이터로 테스트할 때는 iPhone SE2로 한다.

 

아래 이미지처럼 Storyboard(iPhone 11기준)에서 만든 constentsView의 width는 414.0인데

 

테스트할 iPhone SE2의 width는 375.0이다.

 

ContentsView의 width와 테스트 기기의 width

 

두 기종의 화면 비율이 다르기 때문에 Storyboard에서 딱 맞게 작업을 했다고 해도

 

테스트하는 기기의 화면 비율이 다르기 때문에 레이아웃이 깨지게 된다.

 

 

 

가장 간단한 방법은 contentsView의 가로, 세로 비율을 구해서 현재 UIScreen의 width 값에 곱하는 것이다.

 

contentsView의 width 대비 height의 비율을 구한 다음 UIScreen의 width 값에 곱한다.

 

class ViewController: UIViewController {
 
    @IBOutlet weak var contentsView: UIView!
 
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
 
        let screenRatio = self.contentsView.frame.height / self.contentsView.frame.width
        let customView = CustomView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.width * screenRatio))
        self.contentsView.addSubview(customView)
    }
 
}
 

 

 

 

1번은 적용하기 간편하지만 2번은 화면에 반복적으로 배치해야할 상황에 좋다.

 

CustomView 끝