[iOS][UiKit] SnapKit 정리 ( inset/offset , translates~ )

 

SnapKit

SnapKit을 사용해보면서 헷갈렸던 부분 정리

 

- offset/inset

- translateAutoresizingMaskIntoContraints

 

 

 

📌 offset / inset

💡offset 사용시

'현재 뷰 constraint = 슈퍼뷰 constraint + offset 값'을 생각하고 설정한다.

 

label.snp.makeConstraints { make in 
     make.top.equalToSuperview().offset(50)
     make.left.equalToSuperview().offset(50)
     make.right.equalToSuperview().offset(-50)
     make.bottom.equalToSuperview().offset(-50)
}

 

기준이 되는 View에 맞춰서 레이아웃 제약을 설정한다. 

offset 사용시 bottom과 right은 마이너스 (-) 부호를 갖게 되는게 맞다.

 

 

💡inset 사용시

label.snp.makeConstraints { make in 
     make.edges.equalToSuperview().inset(UIEdgeInsets(top: 50, left: 50, bottom: 50, right:50))
                             $0.edges.equalToSuperview().inset(50)
}

과 동일한 코드는

make.edges.equalToSuperview().inset(50)

 

위의 offset으로 사용했을 때와 동일한 코드이다.

 

bottom과 right은 양수값으로 사용한다.

 

edges: 가장자리를 일괄적으로 제약 조건 생성 ( top, left, right, bottom )

 

offset은 다른 요소와의 간격에 사용하고 inset은 superView와 간격에 사용한다.

모든 값이 같은 값이라면 inset을 사용하는것이 더 깔끔한 코드를 만들 수 있는 방법이다.

 

 

📌 translatesAutoresizingMaskIntoContraints

snapKit을 사용하지 않을때 코드로 오토레이아웃 contraints를 설정한다면,

보통 translatesAutoresizingMaskIntoConstraints = false를 작성해야한다.

 

하지만 snapKit을 사용 할 경우 작성해주지 않아도 된다.

왜냐하면 translateAutoresizingMaskIntoConstraints = false를 내부에서 알아서 처리해주기 때문이다.

 

translatesAutoresizingMaskIntoConstraints = false 란 ?

부모뷰가 커지거나 줄어듦에 따라 서브 뷰의 크기나 위치를 조정하는 방식을 결정하는 Autoresizing이라는 개념이 존재한다. 이 개념은 여러 속성을 부여하여 슈퍼뷰의 크기 변화에 따라 서브 뷰의 width, height 혹은 leading, top, trailing, bottom 영역을 유연하게 고정하거나 확장할 수 있다.
 
이러한 Autosizing은 AutoresizingMask를 통해 적용할 수 있는데, 슈퍼 뷰의 bounds가 변경 될 때 자신의 크기를 조정하는 방법을 결정하는 비트마스크이다.
 
다만 Autoresizing과 AutoLayout을 동시에 사용하고자 할 경우 주의해야한다. View의 AutoresizingMask도 결국 Auto Layout의 constraints로 변환되면서 기존의 constraints와 레이아웃 충돌이 일어날 수 있기 때문이다.
 
따라서 우리는 AutoLayout을 사용하고자 할 때 translatesAutoresizingMaskIntoConstraints라는 옵션을 false로 설정해 AutoresizingMask를 사용한 Constraints 변환을 막는 것이다. 아울러 스토리보드에서는 오토 레이아웃이 적용된 View의 translatesAutoresizingMaskIntoConstraints를 자동으로 false 설정해준다. 그래서 코드로 오토 레이아웃을 조정할때만 해당 옵션을 설정해주었던 것이다.