코드로 Constraints 짜보기!!
코드로 Constraints를 짜는 방법에는 크게 세 가지 방법이 있다고 한다.
But,
Visual Format Language 로 Constraints를 짜는 것은 어렵고 효율적이지 않다고 하니
오늘은 NSLayoutConstraint class
와 Layout Anchors
를 활용해서 공부해보자!!
가장 효율적이고 좋은 방법이라고 한다. Anchor는 영어로 닻
이라는 뜻인데, 쉽게 View에 닻을 내려서 고정시킨다고 생각하면 좋을 것 같다
AutoLayout 기본개념(1) 에서 본 그림이다
굉장히 중요하다고 그 때 코멘트를 남겼는데, 위 식을 그대로 코드로 옮길 수 있기 때문이다
위 그림의 RedView와 BlueView 를 코드로 나타내면
RedView.leadingAnchor.constraint(equalTo: BuleView.trailingAnchor, constant: 8).isActive = true
와 같다
Layout Anchor 을 활용해서 AutoLayout Constraint를 줄 때 아주 큰 장점이 있는데
컴파일러가 바로 에러를 잡는다는 것이다
button.bottomAnchor.constraint(equal.To: safeArea.leadingAnchor)
//에러 발생
해당 구문을 잘 보면 button의 vertical 속성과 horizontal을 뒤섞어 constraint를 만들려고 하였는데,
이럴 경우 컴파일러가 바로 눈치 채고 에러를 일으켜 준다
이번에는 그럼 NSLayoutConstraint 객체를 활용해서 AutoLayout Constraint를 구현해보자!!
이건 Anchor 보다 더 간단한데,
let button = UIButton()
button.setTitle("Button", for: .normal)
button.setTitleColor(.white, for: .normal)
button.backgroundColor = .systemPink
view.addSubview(button)
button.translatesAutoresizingMaskIntoConstraints = false
let safeArea = view.safeAreaLayoutGuide
let leading = NSLayoutConstraint(item: button,
attribute: .leading,
relatedBy: .equal,
toItem: safeArea,
attribute: .leading,
multiplier: 1,
constant: 16)
let trailing = NSLayoutConstraint(item: button,
attribute: .trailing,
relatedBy: .equal,
toItem: safeArea,
attribute: .trailing,
multiplier: 1,
constant: -16)
let bottomSafeArea = NSLayoutConstraint(item: button,
attribute: .bottom,
relatedBy: .equal,
toItem: safeArea,
attribute: .bottom,
multiplier: 1,
constant: -16)
let bottomView = NSLayoutConstraint(item: button,
attribute: .bottom,
relatedBy: .lessThanOrEqual,
toItem: view,
attribute: .bottom,
multiplier: 1,
constant: -20)
NSLayoutConstraint.activate([leading, trailing, bottomSafeArea, bottomView])
와 같이 활용할 수 있다! 중요한 점은 마지막에 꼭 activate 메서드를 활용해서 Cosntraint를 활성화시켜야 한다는 것이다!!
근데 NSLayoutConstraint의 아주 큰 단점이 있는데,
이 객체는 잘못된 Constraint를 지정하여도 컴파일러의 오류가 검출되지 않는다는 것이다!!
그러니 될 수 있으면 Layout Anchor
개념을 활용하는 것이 좋아보인다