[iOS/Swift] SnapKit equalToSuperview() 기본 사용법 설명

예시 코드

equalToSuperview()

 자신의 상위뷰와 똑같게 하겠다는 것, 위에 예시 코드를 보면 top, bottom, leading, trailing을 나의 SuperView와 똑같이 하겠다는 말입니다. (사용하다 보면, 개인적인 생각으로는 "똑같다~"라는 말도 맞지만, "기준으로 하겠다~"라는 말도 되는 것 같아요)

 

 예시를 보면 최상위 View에 myView를 추가해서 부모 -자식 관계가 형성되었습니다. 이로서 myView는 부모 View를 기준으로 옵션들이 설정될 것입니다. 만약 저기에 View를 하나 더 추가하면 어떻게 될까요? 

---

두개의 View

// UI
private func setUI() {
    // 슈퍼 View에 파랑색 View 추가
    self.view.addSubview(self.myView)
    self.myView.addSubview(self.secondView)

    // SnapKit 적용
    self.myView.snp.makeConstraints { make in
        make.top.equalToSuperview()
        make.bottom.equalToSuperview()
        make.leading.equalToSuperview()
        make.trailing.equalToSuperview()
    }

    // SnapKit 적용
    self.secondView.snp.makeConstraints { make in
        make.top.equalToSuperview()
        make.bottom.equalToSuperview()
        make.leading.equalToSuperview()
        make.trailing.equalToSuperview()
    }
}

 코드를 보시면 self.view -> myView -> secondView 순서대로 부모 - 자식 관계가 되어있습니다. secondView는 최상위 부모 View를 모르지만 myView를 상대로 equalToSuperview() 하기 때문에 모두 같은 크기의 View가 생성됩니다.

---

// SnapKit 적용
self.myView.snp.makeConstraints { make in
    make.centerY.equalToSuperview()
    make.height.equalTo(200)
    make.leading.equalToSuperview()
    make.trailing.equalToSuperview()
}

 더 알아보기 위해서 myView의 SnapKit 옵션을 변경하여 직사각형으로 만들었습니다. Y좌표는 부모 View를 기준으로 중앙에 위치하게 합니다. 이렇게 하면 secondView는 어떻게 보일까요??

 

결과

 사진을 보시면 바로 알 수 있습니다. secondView는 myView의 자식이기 때문에 똑같이 작아진 것을 확인할 수 있습니다. 만약 개발하는 과정에서 equalToSuperview()를 사용했는데 제대로 addSubview를 해주지 않으면 에러가 발생할 수 있습니다.

 

 이번 글을 통해서 equalToSuperview()를 사용하면 자신의 super view을 기준으로 반응한다는 것을 사진과 예시 코드와 함께 알아보았습니다.

 

 

 

전체 코드

//
//  ViewController.swift
//  SnapkitEx
//
//  Created by 김지태 on 11/20/23.
//

import UIKit
import SnapKit

class ViewController: UIViewController {
    // 파랑색 View
    lazy var myView: UIView = {
        let view: UIView = UIView()
        view.backgroundColor = .blue
        return view
    }()
    
    // 빨간색 View
    lazy var secondView: UIView = {
        let view: UIView = UIView()
        view.backgroundColor = .red
        return view
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // ViewController 배경색
        self.view.backgroundColor = .white
        
        // UI
        self.setUI()
    }
    
    // UI
    private func setUI() {
        // 슈퍼 View에 파랑색 View 추가
        self.view.addSubview(self.myView)
        self.myView.addSubview(self.secondView)
        
        // SnapKit 적용
        self.myView.snp.makeConstraints { make in
            make.centerY.equalToSuperview()
            make.height.equalTo(30)
            make.leading.equalToSuperview()
            make.trailing.equalToSuperview()
        }
        
        // SnapKit 적용
        self.secondView.snp.makeConstraints { make in
            make.top.equalToSuperview()
            make.bottom.equalToSuperview()
            make.leading.equalToSuperview()
            make.trailing.equalToSuperview()
        }
    }
}