SnapKit 사용하기

sanghee·2021년 9월 25일
0

👏iOS 스터디

목록 보기
5/10
post-thumbnail

SnapKit이란?

스냅킷이란 오토레이아웃을 도와주는 프레임워크이다. 스냅킷을 설치하고 불러온다.

import SnapKit

스냅킷 사용하기

우선 view에 subView를 추가한다.

view.addSubview(subView)

equalTo()

subView의 width를 100으로 정한다. top, left, bottom, right를 subView의 상위뷰인 view와 일치시킨다. edges를 사용해 한번에 작성할 수도 있다.

subView.snp.makeConstraints { make in
    make.width.equalTo(100)
    make.top.equalTo(UIEdgeInsets(top: 10))
    make.left.equalTo(UIEdgeInsets(top: 50))
    make.bottom.equalTo(UIEdgeInsets(top: 10))
    make.right.equalTo(UIEdgeInsets(top: 50))
}
subView.snp.makeConstraints { make in
    make.edges.equalTo(UIEdgeInsets(top: 10, left: 10, bottom: 50, right: 50))
}

equalToSuperview()

view에 subView를 추가한다. 그리고 스냅킷을 이용해 subView의 위치를 잡는다.

subView.snp.makeConstraints { make in
    make.top.equalToSuperview()
    make.left.equalToSuperview()
    make.bottom.equalToSuperview()
    make.right.equalToSuperview()
}
view.addSubview(subView)
subView.snp.makeConstraints { make in
    make.edges.equalToSuperview()
}

offset vs inset

subView에 spacing을 주고 싶을 때 offset과 inset을 써서 다음과 같이 구현할 수 있다.

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

left, right vs leading, trailing

left, right와 leading, trailing의 차이는 다음과 같다. left와 right는 항상 같은 반면에 leading과 trailing은 오른쪽에서 왼쪽으로 읽는 지역에서는 방향이 반대이므로, flip되어서 나온다.

make.left.right.equalToSuperview()
make.leading.trailing.equalToSuperview()

updateConstraints

기존 constraints을 변경하고 싶다면, constraints가 중첩될 수 있기에 updateConstraints를 사용한다.

subView.snp.updateConstraints { make in
    ...
}

참고사이트

https://eunjin3786.tistory.com/202

profile
👩‍💻

0개의 댓글