처음 Xcode로 앱을 만들기 시작했을 때 저는 스토리보드가 마법이라고 생각했습니다. 하위 뷰를 원하는 위치에 끌어다 놓는 것은 너무 간단해서 사람들이 하위 뷰 없이 뷰를 구축하는 방법을 이해할 수 없었습니다.
결국 저는 "마스터 프로그래머"가 되기로 결정했고, 프로그래밍 방식으로 뷰를 구성하는 방법을 배워야 했습니다. 한 가지 문제는 코드에 제약 조건을 작성하는 것이 고통스럽습니다.
let horizontalConstraint = NSLayoutConstraint( item: newView, attribute: NSLayoutAttribute.centerX, relatedBy: NSLayoutRelation.equal, toItem: view, attribute: NSLayoutAttribute.centerX, multiplier: 1, constant: 0)그것은 슈퍼뷰의 X축에 서브뷰를 중앙에 배치하는 수평 제약입니다. 모든 제약 조건에 대해 빠르게 낡아진다는 것은 말할 것도 없고 읽기도 쉽지 않습니다. 그래도 스토리보드는 버리고 싶어서 대안을 찾았습니다. 그때 SnapKit을 찾았습니다.
SnapKit에는 코드에 제약 조건을 쉽게 작성할 수 있는 명확하고 간결한 API가 있습니다. SnapKit에서 수행할 수 있는 작업에 대한 몇 가지 정말 기본적인 예를 살펴보겠습니다.
계속하겠습니다:
- 상위 보기에서 하위 보기 레이아웃
- 서로 관련된 하위 보기 배치
- 제약조건 업데이트 및 애니메이션
시작하기
프로젝트에서 SnapKit을 다운로드했는지 확인하십시오. 타사 라이브러리에 Cocoapods를 사용합니다.
pod 'SnapKit' 추가 Podfile로 이동하고 pod install 실행 . 이제 import SnapKit을 작성하세요. 사용하려는 파일의 상단에.
수퍼뷰에서 하위 뷰 레이아웃
먼저 상위 뷰의 가장자리에 하위 뷰를 고정합니다.
let subview = UIView()view.addSubview(subview)subview.snp.makeConstraints { (make) in make.top.equalTo(view) make.bottom.equalTo(view) make.left.equalTo(view) make.right.equalTo(view)}이렇게 하면 하위 보기의 위쪽, 아래쪽, 왼쪽 및 오른쪽 가장자리에 대한 제약 조건이 상수가 0인 상위 보기의 해당 가장자리로 설정됩니다.
하위 뷰의 제약 조건을 설정하기 전에 하위 뷰를 상위 뷰에 추가합니다. 슈퍼뷰에 아직 추가되지 않은 뷰에 대한 제약 조건을 작성하면 뷰가 로드될 때 치명적인 런타임 오류가 발생합니다.
SnapKit 구문은 이미 표준 라이브러리보다 훨씬 읽기 쉽지만 단축할 수 있습니다. SnapKit은 보기를 상위 보기의 가장자리로 제한하는 훨씬 더 간결한 방법을 제공합니다.
let subview = UIView()view.addSubview(subview)subview.snp.makeConstraints { (make) in make.top.bottom.left.right.equalTo(view)}이렇게 하면 위의 코드와 같은 방식으로 내 하위 보기가 레이아웃되지만 4줄이 아닌 한 줄이 있습니다.
내 하위 보기의 크기를 제한할 수도 있습니다. 아래에서 하위 뷰의 높이와 너비를 설정하고 이를 상위 뷰의 중앙으로 설정하겠습니다.
subview.snp.makeConstraints { (make) in make.width.equalTo(200) make.height.equalTo(200) make.centerX.equalTo(view) make.centerY.equalTo(view)}
그 예는 매우 간단하지만 스스로를 많이 반복했습니다. 동일한 값을 가진 제약 조건을 설정할 때 SnapKit을 사용하면 다음과 같이 제약 조건을 연결할 수 있습니다.
subview.snp.makeConstraints { (make) in make.width.height.equalTo(200) make.centerX.centerY.equalTo(view)}이 블록은 위와 동일한 제약 조건을 생성합니다. SnapKit이 더 깔끔한 코드를 작성하는 데 도움이 되는 또 다른 방법입니다.
서로에 대한 하위 보기 레이아웃
단일 보기에 많은 하위 보기를 추가할 때 서로 관련하여 하위 보기를 배치하려는 경우가 많습니다. 이 예에서 나는:
subview1추가 그리고 그것을 왼쪽 가장자리로 제한합니다.subview2추가subview1의 오른쪽 가장자리로 제한합니다.
let subview1 = UIView()let subview2 = UIView()view.addSubview(subview1)view.addSubview(subview2)subview1.snp.makeConstraints { (make) in make.width.height.equalTo(100) make.left.equalTo(view)}subview2.snp.makeConstraints { (make) in make.width.height.equalTo(subview1) make.left.equalTo(subview1.snp.right)}
지금까지는 내 제약 조건이 상대 보기에 대한 해당 제약 조건과 동일하기를 원했습니다. 예를 들어 make.left.equalTo(view)에서 SnapKit은 left을 설정합니다. subview1 중 left로 view . 별도로 지정하지 않으면 SnapKit은 내가 설정한 제약 조건과 자동으로 일치합니다.
left의 경우 subview2 제약 조건 , right로 설정하고 싶습니다. subview1 가장자리 . make.left.equalTo(subview1)를 작성했다면 SnapKit은 left을 설정합니다. subview2 가장자리 left로 subview1의 가장자리 . 대신 right를 사용합니다. subview1 가장자리 subview1.snp.right을 작성하여 가져옵니다. .
snp을 추가하여 보기 레이아웃의 모든 제약 조건에 액세스할 수 있습니다. 위에서 본 바와 같습니다.
이제 subview2이 있습니다. subview1 오른쪽 , 오프셋을 추가하여 둘 사이에 공간을 만듭니다. subview2로 .
subview2.snp.makeConstraints { (make) in make.width.height.equalTo(subview1) make.left.equalTo(subview1.snp.right).offset(50)}
오프셋은 모든 equalTo() 끝에 추가될 수 있습니다. 그 제약의 상수를 변경합니다. 이제 subview2 left의 상수는 50입니다. 제약.
제약조건 업데이트 및 애니메이션
여러분의 앱이 #NextBigThing이 되기를 원한다면 약간의 감각을 더해야 할 것입니다! SnapKit은 제약 조건을 쉽게 업데이트하여 동적 보기를 생성하는 방법을 제공합니다.
SnapKit으로 제약 조건을 업데이트하는 것은 새 제약 조건을 추가하는 것과 거의 동일합니다. 여기에서 subview1에 대한 제약 조건을 업데이트하겠습니다. left를 변경하여 이전 예에서 가장자리 제약 조건의 상수는 0에서 50 사이입니다.
subview1.snp.updateConstraints { (make) in make.left.equalTo(50)}그리고 그게 다야! 내 하위 보기는 코드 블록이 실행될 때 새 제약 조건으로 업데이트됩니다.
subview2 subview1 업데이트 시 이동됨 제약 조건을 업데이트하지 않았음에도 불구하고.subview2 subview1의 오른쪽 가장자리로 제한됩니다. . subview1일 때 이동됨, subview2 subview1에 있는 왼쪽 제약 조건을 계속 준수합니다. .
이제 부드러운 전환을 위해 애니메이션을 추가하겠습니다. 이전에 보기에 애니메이션을 적용한 적이 있다면 이 구문이 익숙할 것입니다.
UIView.animate(withDuration: 0.3) { subview1.snp.updateConstraints { (make) in make.left.equalTo(50) } self.view.layoutIfNeeded()}
내 제약 조건에 대한 업데이트를 애니메이션할 때 layoutIfNeeded()를 호출해야 합니다. 하위 뷰의 부모에서. 한 번에 둘 이상의 보기에 애니메이션을 적용하는 경우 layoutIfNeeded()을 호출해야 합니다. 하위 보기의 가장 가까운 공통 상위 보기에서.
updateConstraints() 기존 제약 조건만 업데이트할 수 있습니다. 아직 적용되지 않은 제약 조건을 업데이트하려고 하면 치명적인 런타임 오류가 발생합니다.
하위 보기에 새 제약 조건을 추가하려면 remakeConstraints()를 사용하세요. . remakeConstraints() 해당 하위 보기에 설정한 기존 제약 조건을 제거합니다. 새 항목을 추가할 수 있습니다.
deactivate()를 사용할 수도 있습니다. 제약을 제거합니다. 아래에서 deactivate()를 사용하여 제약 조건을 생성, 설정 및 제거합니다. :
var constraint: Constraint!let subview = UIView()subview.snp.makeConstraints { (make) in constraint = make.height.equalTo(100).constraint}constraint.deactivate()애니메이션 블록 내에서 비활성화하여 제약 조건 제거를 애니메이션으로 만들 수도 있습니다.
이제 프로그래밍 방식으로 제약 조건을 작성하는 데 마스터가 되었습니다. 스토리보드는 이제 농담처럼 느껴지고 다시 돌아갈 이유가 없겠죠?
설마. 스토리보드와 펜촉은 여전히 뷰 컨트롤러를 구성하는 가장 빠른 방법이며, 개발자가 아닌 사람과 함께 작업하는 경우 베타 버전을 보내지 않고도 앱이 어떻게 보일지 보여주는 가장 좋은 방법입니다.
개인적으로 둘 다 사용합니다. 내가 빌드한 마지막 앱에서 SnapKit을 사용하여 코드에 제약 조건을 추가하고 스토리보드와 펜촉에 Auto Layout을 사용하여 때로는 동일한 보기에서 제약 조건을 추가했습니다. 결국, 여러분이 만들고 있는 뷰에 가장 적합한 것을 결정해야 합니다.
읽어주셔서 감사합니다! 이 이야기가 마음에 든다면 제품 관리, 엔지니어링 및 디자인에 대한 기사를 게시하는 Twitter에서 저를 팔로우하세요.