[SnapKit] offset vs inset 정리

 

 

오늘은 SnapKit의 메서드인 offset과 inset에 대해 정리해봤다.

 

SnapKit이란 간단히 말해, UIKit의 오토 레이아웃을 더 간결하고 직관적으로 작성할 수 있도록 해주는 라이브러리다.

 

iOS 좌표계 기본

---

iOS의 좌표계를 알면 이해하는데 도움이 된다.

 

iOS 좌표계는 왼쪽 상단이 (0,0)이고, x축은 오른쪽으로 증가, y축은 아래쪽으로 증가한다.

 

따라서 top과 leading 방향은 작을수록 화면의 시작점에 가깝고, bottom과 trailing은 클수록 화면의 바깥으로 향한다.

좌표계

 

 

offset이란?

---

offset()은 특정 방향에 대해서 기준점으로부터 얼마나 떨어질지를 지정하는 메서드이다.

 

기준점이 top이나 leading처럼 뷰의 시작 지점일 경우, offset에 양수(+)를 주면 안쪽으로 들어간다.

// top 기준으로 30만큼 아래로
top.equalToSuperview().offset(30)

 

반대로 trailing, bottom처럼 뷰의 끝 위치를 기준으로 할 경우, offset에 음수(-)를 줘야 안쪽으로 들어간다.

// bottom 기준으로 30만큼 위로
bottom.equalToSuperview().offset(-30) 

 

예시

 

위의 이미지를 예시로 superview에서 top, leading, trailing, bottom에 각각 30만큼 값을 주려면 아래와 같이 사용한다.

box.snp.makeConstraints {
    $0.top.equalToSuperview().offset(30)       // 위에서 30만큼 아래로
    $0.leading.equalToSuperview().offset(30)   // 왼쪽에서 30만큼 오른쪽으로
    $0.trailing.equalToSuperview().offset(-30) // 오른쪽에서 30만큼 왼쪽으로
    $0.bottom.equalToSuperview().offset(-30)   // 아래에서 30만큼 위로
}

 

💡 offset 정리 요약

• 기준이 시작점(top, leading): 양수(+)값 사용
• 기준이 끝점(bottom, trailing): 음수(-)값 사용

 

 

inset이란?

---

inset은 뷰의 네 방향(상하좌우)에 동일한 여백을 줄 때 사용하는 메서드이다.

 

offset은 방향마다 값을 따로 지정하지만, inset은 전체 방향에 대해 공통으로 안쪽(padding처럼) 값을 적용할 때 사용한다.

 

기본 사용

box.snp.makeConstraints {
    $0.edges.equalToSuperview().inset(30)
}

→ superview의 top, leading, trailing, bottom 네 방향 모두에서 30만큼 안쪽으로 들어가게 제약이 잡힌다.

 

즉, 위에서 봤던 offset 코드와 동일한 효과이다.

box.snp.makeConstraints {
    $0.top.equalToSuperview().offset(30)
    $0.leading.equalToSuperview().offset(30)
    $0.trailing.equalToSuperview().offset(-30)
    $0.bottom.equalToSuperview().offset(-30)
}

 

 

offset vs inset

---

• offset
  • 한 방향씩 따로 세밀하게 조절할 때 사용
  • 시작점(top/leading)은 양수(+), 끝점(bottom/trailing)은 음수(-)
• inset
  • 네 방향 공통으로 간결 줄 때 사용
  • 항상 양수(+)로 안쪽 여백 적용