[iOS] SnapKit으로 오토레이아웃 적용하기

안녕하세요 스벅보안관입니다.

이번 시간에는 SnapKit으로 오토레이아웃 적용하는 법에 대해 알아보겠습니다.

 

https://github.com/SnapKit/SnapKit

 

왜 SnapKit을 써야 할까?

SnapKit을 사용하면 다음과 같은 장점이 있습니다:

1. 가독성: 코드가 간결하고 읽기 쉽습니다.
2. 유연성: 다양한 레이아웃을 손쉽게 작성할 수 있습니다.
3. 유지보수: 스토리보드 없이 코드로만 작성하므로 버전 관리가 용이합니다.

 

SnapKit 설치 방법

SnapKit을 프로젝트에 추가하는 방법은 여러 가지가 있지만, 저는 CocoaPods를 사용하는 방법을 소개하겠습니다.

 

 

1. CocoaPods 설치: 프로젝트 루트 디렉토리에서 Podfile을 열고 다음 내용을 추가합니다.

pod 'SnapKit'

 

2. Pod 설치: 터미널에서 다음 명령어를 실행합니다.

pod install

 

3. 프로젝트 열기: .xcworkspace 파일을 열어 프로젝트를 엽니다.

 

 

SnapKit 기본 사용법

SnapKit을 사용하여 뷰를 추가하고 제약조건을 설정하는 기본적인 방법을 알아보겠습니다.

 

import UIKit
import SnapKit

class ViewController: UIViewController {

    let redView = UIView()

    override func viewDidLoad() {
        super.viewDidLoad()

        redView.backgroundColor = .red
        self.view.addSubview(redView) // view에 redView 추가

        redView.snp.makeConstraints { make in
            make.center.equalTo(self.view) // view의 중앙에 위치
            make.width.height.equalTo(100) // 가로와 세로 크기를 각각 100으로 설정
        }
    }
}

 

 

SnapKit의 주요 기능

1. Edges (엣지)

뷰의 엣지를 다른 뷰의 엣지에 맞추는 기능입니다.

redView.snp.makeConstraints { make in
    make.edges.equalTo(self.view).inset(20) // view의 엣지에 20포인트 간격을 둠
}

blueView.snp.makeConstraints { make in
    make.edges.equalTo(redView).inset(20) // redView의 엣지에 20포인트 간격을 두고 맞춤
}

 

2. Center (중앙)

뷰를 다른 뷰의 중앙에 배치하는 기능입니다.

redView.snp.makeConstraints { make in //view의 중앙에 배치하고, 크기를 100x100으로 설정
    make.center.equalTo(self.view)
    make.width.height.equalTo(100)
}

 

3. Aspect Ratio (비율)

뷰의 가로와 세로 비율을 지정하는 기능입니다.

redView.snp.makeConstraints { make in
    make.center.equalTo(self.view)
    make.width.equalTo(200)
    make.height.equalTo(redView.snp.width).multipliedBy(0.5)
}

 

 

---

오늘의 결론

사실 여러 프로젝트를 진행하면서 약간 무지성에 가까운 snapkit사용을 했던거 같습니다. snapkit에 대해 알아보니, PureLayout, Cartography 등 다른 레이아웃 관련 서드파티들을 알 수 있었습니다. 근데 아직까지는 Snapkit을 쓸듯,,,,

다른 기업에서 많이들 사용한다는 FlexLayout도 한번 써보고싶다 라는 생각도 들어서, 조만간 docs보고 공부하고 적용해보려고 합니다. 프로젝트 적용을 통해 어느정도 이해도가 높아졌다고 생각하면 FlexLayout에 대해서도 블로그에 작성하겠슴다...!!!