오토 레이아웃이란?
뷰의 크기와 위치를 동적으로 계산하여 크기나 위치를 고정시키는 것입니다.
디바이스가 회전하거나, 다양한 기기에서 실행되기 원할 때 등 사용합니다.
UI를 배치하는 방법에는 크게 3 가지가 있습니다.
- 프로그래밍 방식으로 배치
- 자동 크기 조정 마스크 사용
- 오토 레이아웃
프로그래밍 방식을 채택할 경우 유연성과 성능을 극대화가 가능합니다.
또한 변경이 발생할 시 원하는대로 변경도 가능합니다.
그러나 모든 변경을 사용자가 관리해야해서 설계, 유지보수에 노력이 필요합니다.
자동 크키 조정 마스크를 사용하면 슈퍼 뷰의 프로엠이 변경 될떄 뷰의 프레임이 어떻게 변경되는지 정의합니다.
이렇게 되면 되부 변경에 맞게 레이아웃을 쉽게 조정할 수 있습니다.
그러나 가능한 레이아웃의 비교적 작은 부분 집합을 지원합니다.
복잡한 UI일 경우 자체 프로그램 변경으로 자동 크기 조정 마스크를 증강해야 합니다.
또한 외부 변경에만 적용됩니다. 내부 변경은 지원되지 않습니다.
오토 레이아웃은 뷰의 프레임이 아닌 뷰의 관계에 대해 생각합니다.
두 뷰 간의 제약 조건을 기반으로 각 뷰의 크기와 위치를 계산합니다.
| 뷰 | 고유 크기 |
| UIView, NSView | 고유 크기가 없음 |
| Slider | ios 경우 폭 만 정의, 다른 os 슬라이더 유형에 따라 높이, 너비 정의 |
| Labels, buttons, switches, and text fields | 높이와 폭 모두 정의 |
| Text views and image views | 고유 크기가 다를 수 있음 |
고유 내용 크기는 내용을 기반으로 합니다. (텍스트 크기, 글꼴, 스크롤 등에 따라 제약조건이 달라짐)
고유 콘텐츠 크기 처리 할 때는 모호하지 않고 충돌하지 않는 레이아웃을 만들고 필요한 제약 조건의 수는 줄어들지만 뷰의 CHCR (Content-Hugging and Compression-Resistance) 우선순위를 관리해야 합니다.
오토 레이아웃에서 값은 항상 points 값을 줍니다.
그러나 속성과 뷰의 레이아웃 방향에 따라 정확한 의미가 달라질 수 있습니다.
Interface Builder 에서의 제약조건 조작
- 제어 드래그 제약
두 뷰 사이에 구속 조건을 작성하려면 control + 드래그로 연결 해줍니다.
수직 간견을 설정하는 옵션과 수평으로 정렬할 수 있는 옵션 등이 있습니다.
Interface Builder는 뷰의 현재 프레임을 기반으로 구속조건을 작성합니다. 따라서 뷰를 신중하게 배치한 후 제스쳐로 연결해야합니다.
제스쳐로 조건을 달기는 쉽지만 보다 세밀하게 제어하기 위해서는 제약조건을 작성 후 편집을 하거나( 코드로 )
고정 및 정렬 도구를 사용해야 합니다.
- 스택, 정렬, 핀 및 도구 사용
에디터 창 오른쪽 하단에 자동 레이아웃 도구를 제공합니다.
한 번에 여러 구속조건을 설정할 때 Pint 혹은 Align을 사용합니다.
Stack을 사용하면 VStack, HStack과 같은 기능을 사용할 수 있습니다.
Align을 사용하면 정렬을 사용할 수 있는 조건들을 표시해 줍니다.
Pin은 인접 뷰에 상대적인 뷰의 위치를 정의하거나 크기를 정할 수 있습니다.
캔버스에 표시 되는 선 설명
실선 : 필수 제약 조건을 나타냄 (우선순위 = 1000)
점선 : 옵션의 제약을 나타냄 (우선순위 < 1000)
빨간선 : 제약 조건의 영향을 받는 항목 중 오류가 있습니다. 항목의 레이아웃이 애매하거나 만족스럽지 않음.
주황선 : 영향을 받는 항목 중 하나의 프레임이 현재 제약 조건에 따라 올바른 위치에 있지 않음을 나타냄.
파랑선 : 명확하고 만족스러운 레이아웃을 가짐
배지 : ( <= , = , => )기호가 있는 뱃지. 관계의 제약 조건을 표시
이렇게 생성된 레이아웃은 씬의 루트 뷰에 포함되어 보여집니다.
Size inspector 에서 제약조건 검색
제약 조건 검사 및 편집
관계, 항목, 우선순위, 식별자가 표시 됨
CHCR 우선순위를 설정하려면
Interface Buider에서 고유한 크기를 설정할 수 있습니다.
'iOS > UIKit' 카테고리의 다른 글
| MapKit을 구현해 보자 (0) | 2022.07.20 |
|---|---|
| Collection View를 만들어보자! (0) | 2022.07.16 |
| 테이블 뷰 (0) | 2022.07.11 |
| 스크롤 뷰 (0) | 2022.07.11 |
| UIkit 모달 띄우기 (0) | 2022.07.10 |
