💅

2. [No StoryBoard] snapKit 활용하기

부제

카테고리

UIKit

세부 카테고리

스토리보드 없이 개발하기

Combine 카테고리

최종편집일

2022/09/20 08:14

작성중

관련된 포스팅

생성 일시

2022/07/16 14:26

태그

How To Use SnapKit in Your iOS Apps

SnapKit is a powerful auto layout library with a minimal amount of code to minimize developer work in managing constraints. It is type safe by design and hence helps in reducing errors in building robust applications.

https://betterprogramming.pub/how-to-use-snapkit-in-your-ios-apps-cbe38c893b23

안녕하세요 iOS 개발자 루크입니다!

오늘은 스토리보드없이 개발하기 제 4탄 SnapKit 라이브러리를 들고 와봤습니다.

스토리보드 없이 개발을 하다보니

요녀석... 은근 코드 길이를 많이 잡아 먹거든요 가독성도 안좋고 중복도 많고

이번엔 이러한 오토레이아웃 코드를 깔끔하게 바꿔줄 수 있는 라이브러리를 들고 와봤습니다.

SnapKit

사용전

let label = UILabel()
view.backgroundColor = .white // 배경색
view.addSubview(label)
label.text = "스토리보드가 없어요!" // test를 위해서 출력할 라벨
label.font = .boldSystemFont(ofSize: 30)

label.translatesAutoresizingMaskIntoConstraints = false
label.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: 0).isActive = true
label.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
Swift
복사

사용후

let label = UILabel()
view.backgroundColor = .white // 배경색
view.addSubview(label)
label.text = "스토리보드가 없어요!" // test를 위해서 출력할 라벨
label.font = .boldSystemFont(ofSize: 30)

label.snp.makeConstraints { make in
    make.center.equalToSuperview()
}
Swift
복사

어떤가요? 훨씬 깔끔하죠?

이제 사용법을 알아봅시다.

SnapKit 구문의 해석

make.top.equalTo(viewProgress.snp.bottom).offset(32)
Swift
복사

만들다 → 상단을 → viewProgress 의 하단과 동일하게 → offset 은 32

SnapKit 의 구문은 왼쪽부터 순차적으로 그 의미를 갖습니다.

Anchor

SnapKit 을 사용하면

모든 앵커와 제약 조건 자체를 한꺼번에 연결하는 것이 가능합니다!

child.snp.makeConstraints { make in
  make.lead.top.trailing.bottom.equalToSuperview()
}
Swift
복사

위 코드처럼 한번에 연결하고자 하는 앵커들을 프로퍼티를 호출하듯이 연달아 나열해주면 돼요!

물론 위 코드는 edges 프로퍼티를 사용하면 더 간단하게 표현이 가능합니다

child.snp.makeConstraints { make in
  make.edges.equalToSuperview()
}
Swift
복사

view 에 inset 을 주고 싶은경우 inset() 을 사용하면 됩니다

child.snp.makeConstraints { make in
  make.edges.equalToSuperview().inset(16)
}
Swift
복사

Constraint

•

 multipliedBy()

// superview의 너비와 같게 만들고 0.45를 곱한 형태
make.width.equalToSuperview().multipliedBy(0.45)
Swift
복사

•

offset()

// 상단을 viewProgress의 하단으로 제한하고, 32만큼 offset
make.top.equalTo(viewProgress.snp.bottom).offset(32)
Swift
복사

•

offset() vs inset()

◦

offset: element와의 간격에 사용

myView.snp.makeConstraints { make in
    make.top.equalToSuperview().offset(50)
    make.left.equalToSuperview().offset(50)
    make.right.equalToSuperview().offset(-50)
    make.bottom.equalToSuperview().offset(-50)
}
Swift
복사

◦

inset: superview와의 간격에 사용

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

// 동일 코드: make.edges.equalToSuperview().inset(50)
Swift
복사

SnapKit 은 암묵적으로 동일한 constraint 를 따라갑니다

// 원본
view.snp.makeConstraints { make in
  make.width.equalTo(otherView.snp.width)
  make.centerX.equalTo(otherView.snp.centerX)
}

// 동일1
view.snp.makeConstraints { make in
  make.width.equalTo(otherView)
  make.centerX.equalTo(otherView)
}
Swift
복사

빨간색 줄이 쳐진 부분이 생략이 가능합니다.

Update Constraint

constraint 의 기준이 되는 view 가아니라 constant 값만 업데이트 하고자 하는 경우

button.snp.updateConstraints { make in
    make.height.equalTo(100)
}
Swift
복사

RemakeContraint

Constant 값 뿐만아니라 기준이 되는 view 를 변경하고자 할 때, >> 기존의 contraint 는 삭제됨

func updateProgress(to progress: Double) {
  viewProgress.snp.remakeConstraints { make in
    make.top.equalTo(view.safeAreaLayoutGuide)
    make.width.equalToSuperview().multipliedBy(progress)
    make.height.equalTo(32)
    make.leading.equalToSuperview()
  }
}
Swift
복사

lessThanOreEqualTo, Priority

override func updateConstraints() {
    self.growingButton.snp.updateConstraints { (make) -> Void in
        make.center.equalTo(self);
        make.width.height.equalTo(buttonSize).priority(250)
        make.width.height.lessThanOrEqualTo(self)
    }
    
    super.updateConstraints()
}
Swift
복사