[ UIView ] SnapKit 사용하기 ( 공부하면서 연습 중..)

 

---

👉 스냅킷 사용 전에 알아두면 좋을 것들! 

NSLayoutContraint 

The relationship between two user interface objects that must be satisfied by the constraint-based layout system.

두 ui 객체 사이 관계를 제약 기반 layout 시스템에 의해 충족시켜줘야 함 

기본 포맷 

item1.attribute1 = multiplier × item2.attribute2 + constant

// positive values move to the right in left-to-right languages like English.
// 왼쪽에서 오른쪽으로 
button2.leading = 1.0 × button1.trailing + 8.0

// These equations produce identical constraints
button2.leading = 1.0 × button1.trailing + 8.0
button1.trailing = 1.0 × button2.leading - 8.0

---

🛠 SnapKit 설치하기! 

cocoaPod 또는 swift package Manager 를 통해 설치 후 

swift package manage 사용법

1. 프로젝트명을 클릭해서 Target 에 있는 프로젝트 클릭!
2. Frameworks, Libraries, Embedded Content 부분에 + 버튼 누르고 
3. Add other Dependency 눌러서 Github 에서 검색한 snapKit github 코드를 copy 에서 스위프트 패키지 Apple Package 검색창에 쳐서 추가함 
4.  import SnapKit 까지 추가하면 사용준비 완료! 

CocoaPods 로 설치

1. podfile 에 pod 'SnapKit', '~> 4.0' 추가

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '10.0'
use_frameworks!

target '<Your Target Name>' do
    pod 'SnapKit', '~> 4.0'
end

2. pod install 후 사용 > .xcworkspace 파일을 열어야 함! 

 $ pod install

나는 project 파일을 생성해 viewController 에서 열어서 했지만, playground 에서도 스냅킷 테스트를 해볼 수 있다고 한다.

단, playground 에서 사용시 파일명.xcworkspace 를 열라고 한다.  그리고 build Snapkit.framework 

[ Usage ] 

import SnapKit

class MyViewController: UIViewController {

    lazy var box = UIView()

    override func viewDidLoad() {
        super.viewDidLoad()

        self.view.addSubview(box)
        box.backgroundColor = .green
        box.snp.makeConstraints { make in
           make.width.height.equalTo(50)
           make.center.equalTo(self.view)
        }
    }

}

 

1. 위에 클래스 UIView() 생성 후 

변수명.snp.makeContraints 쓰고 클로저 문법으로 사용해 준다.

2. 클로저 안에서 너비, 높이 조정하고 싶은것들 

3. . 찍고 equalTo -> 높이를 이와 같이 한다. 너비를 이와 같이 한다는 의미인듯 

 

* 사이즈 조절시 make.size.equalTo(superview) - 최상위 부모와 같이 맞춘다라는 의미 

// make width and height greater than or equal to titleLabel
make.size.greaterThanOrEqualTo(titleLabel)

// make width = superview.width + 100, height = superview.height + 100
make.size.equalTo(superview).offset(100)



그 외 updateContraints, remakeContraint, safeAreaLayoutGuide ( 애플에서 기본적으로 사용자가 폰을 사용할 때 각각의 디바이스별 부분의 영역을 가늠하여 최소 이 정도까지의 시스템 마진을 알아서 잡아서 view 를 잡아 준다함.) 등을 사용해 

storyboard 없이 오브젝트들을 직접 코드로 얹히고 위치와 간격 길이도 조절할 수 있다 한다!

 

 

[ 참고 ]

https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/index.html#//apple_ref/doc/uid/TP40010853

Auto Layout Guide: Understanding Auto Layout

snapKit 공식문서 

http://snapkit.io/docs/

Requirements

https://devmjun.github.io/archive/SafeArea_1

Swift, Safe Area에 대해서 알아봅니다.

https://www.raywenderlich.com/3225401-snapkit-for-ios-constraints-in-a-snap

SnapKit for iOS: Constraints in a Snap

 

 

계속 연습하고 코드 정리해서 올려봐야겠다!