[iOS/Swift] SnapKit height(높이), width(너비) 적용

 매우 간단한 높이와 너비를 적용하는 방법을 알아보도록 하겠습니다. 지난번에는 equalTo를 사용해서 컴포넌트를 적용했습니다. 상/하/좌/우를 적용하면서 높이와 너비는 자동적으로 적용되게 하였습니다. 아주 간단한 높이, 너비 설정 코드 2줄로 빠르게 보고 넘어가겠습니다. 

 

결과 사진

// SnapKit 적용
self.myView.snp.makeConstraints { make in
    make.height.equalTo(200)
    make.width.equalTo(200)
}

 

 equalTo를 사용해서 바로 높이와 너비를 지정해 줍니다. 이러면 코드가 적용되게 되는데, 사진과 코드를 비교하면 200이 제대로 적용된 것을 알 수 있습니다. 조심해야 할 점은 상수로 적용을 하고 오토레이아웃을 적용하는 것입니다.

 

실패

// SnapKit 적용
self.myView.snp.makeConstraints { make in
    // 상단과 하단 제약조건 적용
    make.top.equalToSuperview()
    make.bottom.equalToSuperview()

    // 높이 지정
    make.height.equalTo(200)

    // 너비 지정
    make.width.equalTo(200)
}

 이번에 보시면 상단과 하단을 상위 View에 맞춰주었습니다. 그리고 높이를 적용해보니 200이 아닌 그 이상이 되는 모습을 볼 수 있습니다. 이렇게 겹칠 수 있는 조건을 중복해서 사용한다면 원하는 결과를 알 수 없으니 조심하도록 합니다. 

 

제대로 사용

// SnapKit 적용
self.myView.snp.makeConstraints { make in
    // 상단과 하단 제약조건 적용
    make.top.equalToSuperview()

    // 높이 지정
    make.height.equalTo(200)

    // 너비 지정
    make.width.equalTo(200)
}

  하지만 top 혹은 bottom 중에서 둘 중 하나만 제거 해줘도 원하는 부분에 붙어서 높이를 200으로 표현하게 됩니다. Storyboard로 작업하다가 코드로만 보면 실수도하고 그러지만 천천히 작성해나가다 보면 좋은 결과를 얻으실 수 있습니다.