[iOS_OpenSource] AutoLayout 쉽게 하기 (SnapKit) _ 1

안녕하세요~ 개발하는 윤기사입니다!

 

오늘 새로운 카테고리를 만들어봤어요! iOS 앱 개발을 하다 보면 오픈소스 라이브러리를 많이 사용하게 되는데(너무 편해요..!) 

 

오픈소스에 대한 정리를 여러분들께 알려드리면 어떨까!? 하는 생각에 카테고리를 만들었습니다!

 

첫 번째 글인데요. 제가 자주 사용하는 오픈소스 라이브러리 SnapKit을 추천드릴까 합니다!

 

앞으로도 이 카테고리에 오픈소스 라이브러리에 대한 설명글을 하나하나 올려드릴 테니!

 

잘 봐주셨으면 좋겠습니다!

 

 

시작해보겠습니다.

 

- SnapKit  -

 

가장 처음으로 설명드릴 오픈소스는 SnapKit입니다!

 

SnapKit은 iOS Xcode에서 코드 기반으로 View를 제작할 때, 쉽게 Auto Layout을 만드는 라이브러리입니다.

 

 

1) 버튼을 하나 코드 기반으로 만들어줍니다. 

확인 버튼을 만들어줍니다!

 

2) SnapKit 라이브러리 없이 Auto Layout을 잡으려면 아래와 같이 해야 합니다. 

 

• translatesAutoresizingMaskIntoConstraints을 false로 선언해줍니다.
• CenterXAnchor를 view의 가운데로 설정해줍니다. 그리곤 isActive를 true 선언을 해줘야 합니다.
• leftAnchor, rightAnchor, heightAnchor도 마찬가지입니다. 다 일일이 정해주고 isActive = true를 해줍니다.

코드로 제약조건 걸기

 

• 만든 버튼의 bottomAnchor를 Margin을 이용해서 제약 조건을 걸어주려면 아래와 같이 긴~ 코드가 나오게 됩니다.

 

3) SnapKit 라이브러리를 사용하기 위해 SPM(Swift Package Manager)을 이용해 Up to Next Major Version으로 추가해줍니다. SnapKit, SnapKit-Dynamic이 나올 텐데 SnapKit만 추가해줍니다!

라이브러리 추가!

 

4) SnapKit을 import 해줍니다! (가장 최고로 중요🔥)

import 까먹으시면 안됩니다!

 

5) button.snp.makeConstraints 하고 괄호를 여시면 아래와 같이 클로저 구문이 나오는데 Enter를 눌러줍니다!

엔터 클릭!

 

6) 그러면 아래와 같이 클로저 구문이 { make in ~ } 이 나오는데,

<make. 제약조건 걸고 싶은 부분. equalTo(얼마나 걸 건지)>를 선언해주면 됩니다.

SnapKit은 translatesAutoresizingMaskIntoConstraints가 라이브러리 내에서 false로 선언되어 있기 때문에

따로 해줄 필요가 없습니다. isActive도 마찬가지입니다!

 

SnapKit을 사용해 줄인 모습

 

7) 시뮬레이터를 통해 아래와 같이 확인!

아래와 같은 "확인" 버튼을 볼 수 있습니다!

 

 

이상 오늘 포스팅은 여기서 마치도록 하겠습니다! 

 

다음에는 코드 기반으로 View를 설정할 때 쉽게 사용할 수 있게 해주는 Then 라이브러리에 관한 내용을 가져오도록 하겠습니다!

 

더욱 자세한 건 Github 링크를 남겨드릴 테니 읽어보시는 것도 좋을 것 같습니다!

 

그럼 개발하는 윤기사는 빡코딩 하고 있도록 하겠습니다!!

 

 

 

 

 

 

 

https://github.com/SnapKit/SnapKit

GitHub - SnapKit/SnapKit: A Swift Autolayout DSL for iOS & OS X