관리 메뉴

김종권의 iOS 앱 개발 알아가기

[iOS - swift] Snapkit 프레임워크 기본 (autolayout을 쉽게) 본문

iOS 응용 (swift)

[iOS - swift] Snapkit 프레임워크 기본 (autolayout을 쉽게)

jake-kim 2020. 5. 13. 14:39

autolayout이란?

 

[iOS - UI Custom] 11. Auto layout (programmatically)

*storyboard적인 오토레이아웃 및 개념은 밑 링크 참고 https://ios-development.tistory.com/30?category=889410 [iOS - swift] 12. 오토 레이아웃(auto layout) 1. 오토 레이아웃 이란? - 어떤 디바이스에서라도..

ios-development.tistory.com

 

* SnapKit이란?

짧은 코드로 autolayout을 표현할 수 있도록 도와주는 프레임워크

 

1. pod SnapKit

 

2. 사용

1) equalTo()사용 방법

view.topAnchor와 같이 방향을 정해주지 않고 view그대로 삽입

   "make.top.equalTo(self.view.topAnchor)"  : 이것의 의미는 make의 top을 self.view의 top과 동일하게 설정한다는 의미

- SnapKit 임포트, 10번라인

- UIView객체.snp.makeContraints( 트레일링클로저 )로 접근, 25번~29번라인

 

결과

2) 한꺼번에 레이아웃 배치하기

- m.top.bottom.equalTo(self.mapView)와 같이 연속적으로 쓴다면 m객체의 top과 bottom을 동시에 지정

 

top과 bottom을 동시에 지정해줬으므로 위와같이 표현됨("검색"버튼)

cf) m.top.bottom.left.right.equalTo(self.mapView)로 한다면 수퍼뷰를 덮는 autolayout 

 

3) m.top의 위치를 self.view의 bottom위치와 동일하게 조절해 줘야 한다면?

m.top.equalTo(self.view.snp.bottom)

3. SnapKit을 안쓴 경우와 비교

SnapKit을 안 쓴 경우

 

SnapKit을 쓴 경우

4. superview와의 auto layout 설정

.equalToSuperview() 속성 사용

stackView.snp.makeConstraints { (make) in
    make.left.top.right.equalToSuperview()
    make.height.equalTo(30)
}

 

* SnapKit 사용할때 필수로 알아야 하는 것: https://ios-development.tistory.com/609

 

* Full Source Code

Comments