diff --git a/LEVEL 1/03-AutoLayout b/LEVEL 1/03-AutoLayout new file mode 100644 index 0000000..194e488 --- /dev/null +++ b/LEVEL 1/03-AutoLayout @@ -0,0 +1,94 @@ +issue #3 + +## 03. Auto Layout +### Auto Layout을 사용하는 이유와 장점은 무엇인가요? +Auto Layout은 iOS와 macOS에서 사용되는 적응형 인터페이스를 구축하기 위한 핵심 기술입니다. + +#### UI 레이아웃방식의 변천사 +1. 수동 프로그래밍 (Frame-based Layout) +- 모든 뷰의 위치와 크기를 CGRect frame으로 직접 계산하고 지정 +- 화면 회전이나 크기 변경 시 모든 프레임을 수동으로 재계산 + ```swift + view.frame = CGRect(x: 10, y: 10, width: 100, height: 100) + ``` +2. Autoresizing Masks (iOS 2.0) +- 상위 뷰가 리사이즈될 때 하위 뷰들이 어떻게 변할지 규칙을 지정 +- flexible width, height, margins 등의 옵션으로 간단한 반응형 레이아웃 구현 +- 하지만, 복잡한 레이아웃이나 뷰 간의 관계 표현이 어려움 + ```swift + view.autoresizingMask = [.flexibleWidth, .flexibleHeight] + ``` +3. Auto Layout (iOS 6.0) +- 제약 조건(Constraints)을 기반으로 한 선언적 레이아웃 시스템 +- 뷰 간의 관계를 수학적 방정식으로 표현 +- Interface Builder를 통한 시각적 편집 지원 + +####Auto Layout의 장점 + - 다양한 화면 크기와 방향에 대응 가능 + - 국제화(다국어) 지원 용이(지역화된 콘텐츠의 크기 변화에 유연하게 대응) + - 동적 콘텐츠(텍스트 크기) 대응 가능(Dynamic Type) + - 런타임에 콘텐츠 크기가 변하는 경우 자동 조정 + - 유지보수 용이성 + +*** +### 제약 조건(Constraints)의 우선순위(Priority)는 어떻게 동작하나요? +우선순위는 0부터 1000 사이의 값을 가지며, Auto Layout 엔진이 제약 조건을 해결할 때 어떤 제약 조건을 우선적으로 적용할지 결정하는 기준이 됩니다. +제약 조건의 우선순위: + - 1000 (Required): 반드시 만족해야 함**(필수 제약)** + - 750 (High): 높은 우선순위 + - 500 (Medium): 중간 우선순위 + - 250 (Low): 낮은 우선순위 + +####필수제약 +- 우선순위가 1000으로 설정된 제약입니다. += 이는 반드시 만족되어야 하며, 만족되지 못할 경우 **런타임 에러**가 발생합니다. + +####선호제약 +- 우선순위가 1~999 사이인 제약입니다. +- 시스템에서 가능한 만족시키려고 하지만, 필요 시 위반합니다. +- 충돌 발생 시, 우선순위가 높은 제약 우선적으로 만족시킵니다. + +*** +### Intrinsic Content Size란 무엇이며, 어떻게 활용되나요? +Intrinsic Content Size는 별도로 명시하지 않아도 자동으로 적용되는 개념이며, 뷰가 자신의 콘텐츠를 기반으로 계산된 자연스러운 크기를 의미합니다. +이는 개발자가 명시적으로 크기를 지정하지 않아도 뷰가 자동으로 적절한 크기를 동적으로 결정할 수 있게 해줍니다. +다만, Intrinsic Content Size만으로는 뷰의 위치를 결정할 수 없기 때문에, 추가적인 제약 조건을 통해 뷰의 위치를 지정해줘야 합니다. + +#### 구체적인 예시 +- UILabel: 텍스트의 폰트, 길이에 따라 자동으로 너비와 높이 결정 +- UIImageView: 이미지의 원본 크기를 기본 크기로 사용 +- UIButton: 타이틀 텍스트와 이미지의 크기에 맞춰 자동 조정 +- UISwitch: 시스템에서 정의된 고정된 크기 사용 +- UITextField: 폰트 크기, 패딩, 보더 스타일 등을 고려하여 높이 자동계산됨, placeholder 문구나 입력된 텍스트의 길이에 따라 너비도 자동조정되나, 일반적으로 별도 제약을 통해 너비 추가 + +#### Content Hugging과 Compression Resistance 심화 +각 뷰의 Content Hugging과 Compression Resistance는 1-1000 사이의 우선순위 값을 가지며, 기본값은 보통 250입니다. + +##### Content Hugging (줄어듦 방지) +우선순위가 높을수록 뷰는 고유 크기를 유지하려 함 +기본값보다 높은 우선순위를 설정하여 뷰가 늘어나는 것을 방지 +```swift +label.setContentHuggingPriority(.defaultHigh, for: .horizontal) +``` + 높은 우선순위: 뷰가 자신의 고유 크기를 최대한 유지하려 함 + 낮은 우선순위: 다른 뷰에 의해 확장될 가능성이 높아짐 + +##### Compression Resistance (잘림 방지) +뷰가 최소 크기 이하로 줄어드는 것을 막음 +텍스트의 일부가 생략되거나 잘리는 것을 방지 +```swift +textField.setContentCompressionResistancePriority(.defaultHigh, for: .horizontal) +``` + 높은 우선순위: 뷰가 최소 크기 이하로 줄어드는 것을 방지 + 낮은 우선순위: 다른 뷰를 위해 크기가 조정될 수 있음 + +*** +### Ambiguous Layout과 Unsatisfiable Constraints는 무엇이며, 어떻게 해결하나요? + Ambiguous Layout은 뷰의 크기 또는 위치가 명확하게 정의되지 않은 상황과 같이 제약 조건이 모호한 경우입니다. 설령, 너비와 높이만 설정하고, x,y 좌표에 대한 제약을 설정하지 않았을 경우 수평위치가 모호한 레이아웃이 됩니다. + View Debug Hierarchy에서 보라색 에러 표시로 확인할 수 있습니다. + Unsatisfiable Constraints는 서로 상충되는 제약조건이 존재하여 동시에 만족시킬 수 없는 상황을 의미합니다. 이는 너비 제약 2개가 서로 다른 값으로 설정되어 있는 상황을 예시로 들 수 있습니다. +해결방법 + 1. 우선순위를 조정하는 방법이 있습니다. 이의 경우, 우선순위가 높은 제약조건만 수행합니다. + 2. 레이아웃 문제를 시각적으로 분석할 수 있는 Debug View Hierarchy 기능을 사용해 충돌하는 제약 조건을 식별하고 우선순위 조정하거나 변경해 해결이 가능합니다. + 3. 충분한 제약 조건 추가로 해결합니다. +Debug View Hierarchy: 제약조건 시각화, 뷰 계층 구조 탐색, 런타임에서의 프레임과 바운드까지 확인이 가능함.