[iOS인강] 1. AutoLayout/Constraint

학습 목표

1. Frame 기반 레이아웃과 AutoLayout의 차이점에 대해 이해한다.
2. Autolayout의 주요 속성에 대해 이해한다.
3. Autolayout으로 비율코딩을 하는 방법에 대해 이해한다.

---

Constraint 

iOS Constraint의 요소는 크게 크기 속성(size attributes)과 위치 속성(position attributes)으로 나눌 수 있습니다. 

 

크기 속성은 뷰의 너비(width), 높이(height), 너비와 높이의 비율(aspect ratio)을 제한하는 속성입니다. 

• width : 뷰의 너비를 제한합니다. 
• height : 뷰의 높이를 제한합니다. 
• aspect ratio : 뷰의 너비와 높이의 비율을 제한합니다.

위치 속성은 뷰의 상단(top), 왼쪽(leading), 하단(bottom), 오른쪽(trailing) 위치를 제한하는 속성입니다.

• top : 뷰의 상단 위치를 제한합니다.
• leading : 뷰의 왼쪽 위치를 제한합니다.
• bottom : 뷰의 하단 위치를 제한합니다.
• trailing : 뷰의 오른쪽 위치를 제한합니다.

오프셋 속성(offset attributes)은 뷰의 위치를 기준으로 다른 뷰와의 거리를 제한하는 속성입니다.

• leadingAnchor : 뷰의 왼쪽 위치를 기준으로 다른 뷰와의 거리를 제한합니다.
• trailingAnchor : 뷰의 오른쪽 위치를 기준으로 다른 뷰와의 거리를 제한합니다.
• topAnchor : 뷰의 상단 위치를 기준으로 다른 뷰와의 거리를 제한합니다.
• bottomAnchor : 뷰의 하단 위치를 기준으로 다른 뷰와의 거리를 제한합니다.

center X/Y alignment constraint

• 뷰를 해당 수퍼뷰 또는 다른 뷰의 중심에 정렬하는 데 사용할 수 있는 제약조건입니다.
• 뷰의 수평/수직 중심을 수퍼뷰 또는 다른 뷰의 중심에 정렬합니다.
• Center X/Y 또는 Center XAnchor/YAnchor 특성을 사용하여 수행할 수 있습니다.

let view = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
view.backgroundColor = .red

// 정중앙의 multiplier를 기준으로, 0~2 사이로 값을 조정해 위치를 변경할 수 있다.
let centerXConstraint = NSLayoutConstraint(item: view, attribute: .centerX, relatedBy: .equal, toItem: superview, attribute: .centerX, multiplier: 1, constant: 0)
let centerYConstraint = NSLayoutConstraint(item: view, attribute: .centerY, relatedBy: .equal, toItem: superview, attribute: .centerY, multiplier: 1, constant: 0)

// superview.addConstraint(centerXConstraint)
// superview.addConstraint(centerYConstraint)
superview.addConstraints([centerXConstraint, centerYConstraint])

superview.addSubview(view)

---

Frame 기반 레이아웃

iOS Frame 기반 레이아웃은 뷰 계층 구조의 각 뷰에 대해 프레임을 프로그래밍 방식으로 설정하여 사용자 인터페이스를 배치하는 방식입니다. 프레임은 슈퍼 뷰의 좌표계에서 뷰의 원점, 높이 및 너비를 정의합니다.

장점

• 가장 유연한 레이아웃 방식입니다. 뷰의 위치와 크기를 원하는 대로 자유롭게 제어할 수 있습니다.
• 가장 빠른 성능을 제공합니다. Constraints를 사용하지 않기 때문에 레이아웃 계산이 필요하지 않습니다.

단점

• 설계 및 디버그가 어렵습니다. 뷰의 위치와 크기를 직접 제어해야 하기 때문에, 레이아웃이 제대로 작동하지 않는 경우 디버깅이 어려울 수 있습니다.
• 유지 관리가 어렵습니다. 뷰의 위치와 크기가 변경되는 경우, 레이아웃을 수정해야 할 수 있습니다.

---

AutoLayout

iOS에서 Autolayout은 뷰 계층 구조의 각 뷰에 대해 제약 조건(constraints)을 사용하여 사용자 인터페이스를 배치하는 방식입니다. 제약 조건은 뷰의 위치와 크기를 정의하고, 뷰가 다른 뷰와의 관계를 정의합니다.

• 유연성: Autolayout을 사용하면 뷰의 위치와 크기를 원하는 대로 자유롭게 제어할 수 있습니다.
• 반응성: 화면 크기나 기기 방향이 변경되어도 레이아웃이 자동으로 조정됩니다.
• 유지 관리: 레이아웃을 변경하기 쉽습니다.

사용법

1. 뷰 계층 구조를 정의합니다.

뷰 계층 구조는 뷰를 부모 뷰에 추가하여 생성됩니다. 부모 뷰는 자식 뷰의 위치와 크기를 제어합니다.

 

2. 뷰에 제약 조건을 추가합니다.

제약 조건은 NSLayoutConstraint 클래스를 사용하여 생성됩니다.

• item: 제약 조건이 적용되는 뷰
• attribute: 제약 조건이 적용되는 뷰의 속성 예) .top, .leading, .width, .height
• relatedBy: 제약 조건의 관계 유형 예) .equal, .greaterThanOrEqual, .lessThanOrEqual
• toItem: 제약 조건이 적용되는 다른 뷰 (nil은 superView를 비교)
• attribute: 제약 조건이 적용되는 다른 뷰의 속성 (nil은 item과 attribute를 동일시)
• multiplier: 관계의 배수. 예) 0.5, 1.0, 2.0
• constant: 관계의 상수. 예) 10, 20, 30

3. 레이아웃을 활성화합니다.

let constraints = [
  NSLayoutConstraint(item: view1, attribute: .leading, relatedBy: .equal, toItem: view2, attribute: .trailing, multiplier: 1.0, constant: 0),
  NSLayoutConstraint(item: view2, attribute: .leading, relatedBy: .equal, toItem: view3, attribute: .trailing, multiplier: 1.0, constant: 0)
]
constraints.activate()

제약조건 방법에는 3가지가 존재합니다.

• NSLayoutConstraint
• Visual Format Language(VFL)
• NSLayoutAnchor

방법은 너무 길어질 것 같아 따로 정리해야겠습니다.

---

회고 🤔

내용을 알고있는 것과 정리하는건 전혀 다르다는 것을 알게되었습니다.

강의 내용 자체는 스토리보드 기반이었지만 같은 내용을 코드로 구현해보면 어떨까라는 생각을 하며 공부했습니다. 

 

또한, 블로그만 너무 의존하는 것도 안좋다는 것을 느꼈습니다.

기존에는 블로그에 나와있는대로 NSLayoutConstraint 방식만 사용했는데, 다른 방식으로도 Autolayout을 잡아봐야겠습니다.

궁극적으로 SwiftUI의 방식이 나오게 된 것도, Autolayout의 역사가 있어서 가능했다라는 것도 느꼈습니다.

 

강의를 통해 이런 레퍼런스의 존재를 알게되었습니다.

처음 오토레이아웃을 접했을 때 봤다면 너무 좋았을 것 같습니다.

https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/LayoutUsingStackViews.html#//apple_ref/doc/uid/TP40010853-CH11-SW1

Auto Layout Guide: Stack Views