인기 있던 글이라도 티스토리로 옮기고 브런치는 좀 더 단순하게 운영하려고 한다.
UI 기초, SnapKit
0.01
byHAJUNHOOct 16. 2018
Android에서 Androidmanifest.xml이 설계도 이 듯, iOS에서는 info.plist 가 비슷한 역할을 한다.
info.plist의 Launch screen interface file base name은 런치 스크린을
Main storyboard file base name은 처음 실행할 스토리 보드 이름을 지정한다.
스토리 보드도 xml 파일이다.
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14313.18" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
처음 실행되는 스토리 보드는 initialViewController 체크박스에 체크를 해야 한다. 물론, GUI로 보여주지만 결국, 다음과 같이 XML이 바뀌는 것이다.
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14313.18" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="QfJ-J6-o4q">
스토리 보드에서는 ViewController를 지정할 수 있다. 이제 어떻게 코드가 흐르는지 알 수 있다.
autolayout을 위해 스토리 보드에서 constraints를 지정할 수 있지만, 왜 굳이 코드로 해야 하는지는 깊게 설명하지 않고 싶지만 굳이 말하자면, 큰 프로그램이 되는 환경 속에서 UI 작업을 지속적으로 경험해보면 코드로 할 필요성을 느낄 수밖에 없다. 애플이 편하게 MVC로 만들어주긴 했지만 말이다.(안드로이드는 무조건 xml이지...)
개발자는 항상 플랫폼 테스터도 되기 때문에 (본디 디버깅은 재미있지만) 이후 재미없는 디버깅을 하게 될 가능성이 크다. 서버와의 싱크를 맞추려니 콜백 지옥에 빠지고 그 지옥에서 나로려니 MVC를 MVVM으로 바꿔야 한다. 결론은 코드라는 이야기.
초유의 관심사 AutoLayout, 1편에서 snapkit을 쓰자고 했다.
snapkit은 pod으로 설치하고
pod 'SnapKit', '~> 4.0.0'
import SnapKit 만 하면 UIView와 그 하위 친구들에게 바로 쓸 수 있다.
var firstGroup : UIView 던
var btnVarious : UIButton이던
var iqr : UILabel이던
쉽게 constraints를 지정할 수 있다.
firstGroup.snp.makeConstraints { (make) in
make.width.equalToSuperview()
make.height.equalTo(29)
make.left.equalTo(0)
}
btnVarious.snp.makeConstraints { (make) in
make.width.equalTo(29)
make.height.equalTo(29)
make.right.equalTo(btnQuestionMark.snp.left).offset(-1)
}
iqr.snp.makeConstraints { (make) in
make.width.equalTo(110)
make.height.equalTo(28)
make.left.equalToSuperview().offset(22)
}
storyboard에서 만드는 것처럼 원하는 view에 add를 먼저 하고 제약사항을 만든다. 붙인 view가 바로 superview다. offset은 + 값과 -값이 있고 둘은 서로 반대 방향이다. 좌표계를 바꿀 수 있지만 보통은 좌측 상단이 0,0이니 어디가 + 방향 인지는 쉽게 알 수 있다.
labelAmount.snp.makeConstraints { (make) in
make.width.equalTo(52)
make.height.equalTo(17)
make.left.equalTo(amount.snp.left)
make.top.equalTo(amount.snp.bottom)
}
값을 직접 지정할 수동 있고, 다른 view의 snp를 얻어와서 맞춰줄 수도 있다.
그럼 어떤 값 지정이 가능할까? public class ConstraintMaker를 보면
public var left: ConstraintMakerExtendable {
public var top: ConstraintMakerExtendable {
public var bottom: ConstraintMakerExtendable {
public var right: ConstraintMakerExtendable {
public var leading: ConstraintMakerExtendable {
public var trailing: ConstraintMakerExtendable {
public var width: ConstraintMakerExtendable {
public var height: ConstraintMakerExtendable {
public var centerX: ConstraintMakerExtendable {
public var centerY: ConstraintMakerExtendable {
public var baseline: ConstraintMakerExtendable {
public var lastBaseline: ConstraintMakerExtendable {
public var firstBaseline: ConstraintMakerExtendable {
public var leftMargin: ConstraintMakerExtendable {
public var rightMargin: ConstraintMakerExtendable {
public var topMargin: ConstraintMakerExtendable {
public var bottomMargin: ConstraintMakerExtendable {
public var leadingMargin: ConstraintMakerExtendable {
public var trailingMargin: ConstraintMakerExtendable {
public var centerXWithinMargins: ConstraintMakerExtendable {
public var centerYWithinMargins: ConstraintMakerExtendable {
public var edges: ConstraintMakerExtendable {
public var size: ConstraintMakerExtendable {
public var center: ConstraintMakerExtendable {
public var margins: ConstraintMakerExtendable {
public var centerWithinMargins: ConstraintMakerExtendable {
이런 값들이 있고 스토리 보드를 쓰다 보면 거의 대부분 알 수 있는 것들이다. 주의할 점은 제약 사항 충돌이다. left와 right 제약 사항을 동시 지정해보면 쉽게 알 수 있을 것이다.
SnapKit의 원리는 간단하다. 다음과 같이 Int Values를 array에 넣고 나중에 for 문을 돌면서 UIKit의 API를 이용(1편 참조)하여 제약 사항을 지정하는 것이다.
internal static var none: ConstraintAttributes { return 0 }
internal static var left: ConstraintAttributes { return 1 }
internal static var top: ConstraintAttributes { return 2 }
internal static var right: ConstraintAttributes { return 4 }
internal static var bottom: ConstraintAttributes { return 8 }
10진수로 더해도 되지만, 본디 2진수의 각 자릿수가 더 편하다.
1, 2, 4, 8 이 각각 2진수에서 1, 10, 100, 1000이다. 그래서 2진수로 1111인 15의 값은
internal static var edges: ConstraintAttributes { return 15 }
에 대입되어 있다.
size는 width, height다.
internal static var size: ConstraintAttributes { return 192 }
internal static var width: ConstraintAttributes { return 64 }
internal static var height: ConstraintAttributes { return 128 }
최고수는
internal static var centerWithinMargins: ConstraintAttributes { return 786432 }
라서 UInt(32비트에서만 2,147,483,647 64비트에서는 18,446,744,073,709,551,615... 믓튼 충분)에 담겨있다. 모든 수를 보려면(internal struct ConstraintAttributes : OptionSet... 참조)
이런 속성들을
internal static func makeConstraints...
internal static func remakeConstraints...
internal static func updateConstraints...
internal static func removeConstraints(item: LayoutConstraintItem) {
let constraints = item.constraints
for constraint in constraints {
constraint.deactivateIfNeeded()
}
}
를 이용하여 적용한다.
internal func activateIfNeeded(updatingExisting: Bool = false) {
guard let item = self.from.layoutConstraintItem else {
print("WARNING: SnapKit failed to get from item from constraint. Activate will be a no-op.")
return
}
let layoutConstraints = self.layoutConstraints
if updatingExisting {
var existingLayoutConstraints: [LayoutConstraint] = []
for constraint in item.constraints {
existingLayoutConstraints += constraint.layoutConstraints
}
for layoutConstraint in layoutConstraints {
let existingLayoutConstraint = existingLayoutConstraints.first { $0 == layoutConstraint }
guard let updateLayoutConstraint = existingLayoutConstraint else {
fatalError("Updated constraint could not find existing matching constraint to update: \(layoutConstraint)")
}
let updateLayoutAttribute = (updateLayoutConstraint.secondAttribute == .notAnAttribute) ? updateLayoutConstraint.firstAttribute : updateLayoutConstraint.secondAttribute
updateLayoutConstraint.constant = self.constant.constraintConstantTargetValueFor(layoutAttribute: updateLayoutAttribute)
}
} else {
NSLayoutConstraint.activate(layoutConstraints)
item.add(constraints: [self])
}
}
UI기초 전편의 링크를 보면 constratins를 적용하는 것이 번거로웠다.
contentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-[image(10)]", options: [], metrics: nil, views: viewsDict))
contentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:[labTime]-|", options: [], metrics: nil, views: viewsDict))
contentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-[username]-[message]-|", options: [], metrics: nil, views: viewsDict))
contentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-[username]-[image(10)]-|", options: [], metrics: nil, views: viewsDict))
contentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-[message]-[labTime]-|", options: [], metrics: nil, views: viewsDict))
혹은,
NSLayoutConstraint.deactivate([self])
let newConstraint = NSLayoutConstraint(
item: firstItem,
attribute: firstAttribute,
relatedBy: relation,
toItem: secondItem,
attribute: secondAttribute,
multiplier: multiplier,
constant: constant)
.
.
.
이런 식의...
그래서 쉬운 문법으로 AutoLayout을 위한 constraints를 쓸 수 있다는 점이 참 매력적인 SnapKit이다. , .snp.makeConstraints { (make) in ...