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

예시 이미지

equalTo()

 이번에는 equalToSuperview 다음으로 equalTo를 배워 보도록 하겠습니다. 지난번에 알아본 equalToSuperview는 상위 뷰를 기준으로 레이아웃을 적용했다면 equalTo는 원하는 대상을 기준으로 적용하게 됩니다. 

 

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

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

 우선 위의 코드는 equalToSuperview를 사용해서 myView를 상위 View와 같은 크기로 만들어주었습니다. 이를 equalTo로 변경해본다면 아래 코드와 같이 작성해 주면 됩니다. equalToSuperview는 상위 View를 기준으로 제약조건을 걸어준다면, equalTo는 원하는 대상을 기준으로 제약조건을 걸게 됩니다.

 

결과 사진

 위 equalTo를 적용하고 실행 시킨 결과입니다. 다음은 응용을 해보도록 하겠습니다. 

 

원하는 모습

 이번에는 위와 같은 모습을 구현해보려고합니다. 약간의 간격들이 있지만, 보기 쉽게 하기 위한 것이며 간격 없이 구현하도록 하겠습니다. 

 

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

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

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

 우선 View가 두개 필요해서 하나 더 추가했습니다. 그리고 위에 위치할 myView는 height를 200으로 주었습니다. 그리고 아래 위치할 secondView는 top을 myView의 bottom에 붙게 했습니다. 이해하기 전이 어렵지 코드를 통해서 보면 간단하다는 것을 알 수 있습니다. 

 

결과

 실행 시킨 결과는 코드가 제대로 적용되었다는 것을 알 수 있습니다. 두 View는 같은 Depth에 위치하고 서로 bottom과 top을 붙인 상태로 제약조건이 걸려있습니다. 

 

 위 방법을 사용하여 컴포넌트들을 원하는 위치에 자리하게 할 수 있습니다. 물론 많아지면 복잡하겠지만 몇 번 반복하다 보면 금방 익숙해질 것입니다.