1. 씬의 변화
씬이 변화되는 경우
- 기기의 회전
- 다른 화면 크기/배율의 기기에서 동작
- 동적인 씬 레이아웃 변화
기기의 회전
시뮬레이터 -> 하드웨어 -> 로테이트 메뉴 에서 기기를 회전시킬 수 있다.
프로젝트 내 회전 방향을 설정하여 해당 방향으로 회전됐을 때 화면이 자동으로 돌아가게 할 수 있다.
프레임 기반의 레이아웃
뷰의 프레임은 뷰의 좌표(x,y), 뷰의 크기(width, height)로 나타낸다. 이는 씬의 변화에 관계없이 고정된 값이다. 따라서 씬에 변화가 발생했을 때 적절히 대처하지 못한다.
2. 제약조건 기반의 레이아웃
제약조건은 뷰의 위치와 크기에 대한 제약조건이다. 동적으로 해석되서 프레임에 반영된다. 씬에 변화가 발생했을 때 제약조건에 의해 다시 새로운 좌표와 크기를 잡아서 적용된다. 씬 변화에 대응하는 레이아웃이다.
1) 제약조건
제약조건은 코드나 인터페이스 빌더(IB)를 통해서 작성할 수 있다. 제약조건의 경우 자동으로 제약조건이 생성되게 할 수 있다.
IB 메뉴
- Update frame
- Stackview
- Align
- Add new Constraints
- Resolve Auto Layout Issues
다른 뷰와 정렬
- 모서리 일치
- 중앙 일치
- 부모의 중앙
- 프레임에 반영(Update Frames)
- 제약조건 추가(Sdd Constraints)
위치와 크기
- 인근 뷰와의 거리
- 마진 제약조건
- 크기
- 비율
2) 제약조건과 프레임
제약조건과 씬 레이아웃
- 앱이 동작중에(런타임) 뷰에 동작하고 있는 제약조건을 해석한다.
- 이를 통해 뷰의 위치와 크기를 결정한다.
- 결과적으로 프레임과 제약조건은 같은 곳에 위치하게 된다.
제약조건과 프레임이 다를 때
앱 UI 작성시 제약조건과 프레임이 다르면 이동된 프레임은 무시되고 제약조건에 맞춰서 다시 프레임이 작성된다. 이를 보면 제약조건의 우선순위가 더 높다는 것을 알 수 있다.
- 프레임 업데이트
- 제약조건에 맞는 위치로 변경(이전 위치)
- 제약조건 업데이트
- 뷰의 프레임에 맞도록 제약조건 업데이트
제약조건 적용 시점
뷰 컨트롤러의 레이아웃 적용 라이프 사이클은 viewWillLayouSubviews와 viewDidLayoutSubviews 사이
가 된다. 따라서 특정 뷰의 좌표가 viewWillLayouSubviews에서와 viewDidLayoutSubviews에서 달라질 수 있다.
3) 레이아웃 가이드
위치
를 나타내는 제약조건을 작성할 때 고려해야할 사항이 있다. 씬의 크기가 항상 똑같은 것은 아니다. 씬에 네비게이션 바나 탭 바가 생길 경우에서 처럼 씬의 구조에 따라 씬의 크기가 달라질 수 있다. 이런 경우에 기준이 되는 것이 레이아웃 가이드이다.
컨텐츠 마진
- 컨텐츠 배치 기준선
- 꼭 따르지 않아도 됨
4) 제약조건 작성
수동
주의할 점은 뷰의 위치와 크기를 결정할 수 있도록 충분한 제약조건
을 주어야한다. 컨텐츠에 의해 크기를 결정하는 뷰의 경우 크기를 생략할 수 있다. 예를 들어 레이블이나 이미지 뷰 등이 있다.
불충분한 제약조건의 경우 인터페이스 빌더에서 경고로 알려준다.
인터페이스 빌더
(ㄱ) | (ㄴ) |
(ㄱ) 형제 뷰와의 거리
- 뷰를 선택하고 마우스 오른쪽 버튼을 누른 상태로 드래그 앤 드롭 한다.
- 그러면 형제 뷰로 제약조건을 작성할 수 있는 팝업이 나타난다.
- 이 중 원하는 제약조건을 선택한다.
(ㄴ) 부모 뷰와의 거리
또 다른 방법은 도큐먼테 아웃라인
에서 작성하거나 레이아웃 메뉴
에서 작성할 수 있다.
(ㄷ) 제약조건에 추가계산
다음 이미지와 같이 부모뷰 중앙에 해당하는 좌표에 30pt를 더한 높이를 설정할 수 있다.
크기 제약조건
- width, height 제약
- 위치 제약조건으로 크기 결정
- 비율 유지 제약조건
제약조건 속성
Item1의 항목 = Item2의 항목 * Multiplier + Constant
- Relation : 동일, 이상, 이하
- Multiplier, Constant : 제약조건의 값
- Priority
5) 제약조건 간 경쟁
Relation
제약조건 간 경쟁에 영향을 미치는 요소로 관계(relation)가 있다. 예를 들어 레이블이 중앙, 왼쪽으로 100 포인트 이상, 레이블 크기 유지라는 제약조건이 있을 때 경쟁이 발생할 수 있다.
Priority
우선순위가 높은 것이 먼저 적용된다. 우선순위는 최대 1000까지의 자연수로 표시되며 수가 클 수록 높은 우선순위를 가진다.
에러
동시에 만족할 수 없는 제약조건의 경우 에러를 발생시킨다. 예를 들어 오른쪽으로 80만큼 떨어지는 제약조건과 40만큼 떨어지는 제약조건이 동시에 존재하면 충돌로 인한 에러가 발생한다.
6) 뷰의 컨텐츠 크기
Content Hugging Priority
- 고유 크기보다
늘어나지 않으려는
성질 - 기본값: 251
Content Compression Resistance Priority
- 고유 크기보다
작아지지 않으려는
성질 - 기본값: 750
'iOS > iOS' 카테고리의 다른 글
iOS) NSCoding과 Archive를 통한 데이터 저장 - (2) (0) | 2020.09.20 |
---|---|
iOS) NSCoding과 Archive를 통한 데이터 저장 - (1) (0) | 2020.09.20 |
iOS) Scene(4) - 코드로 뷰 제어 (0) | 2020.08.23 |
iOS) Scene(3) - 코드로 씬 작성 (0) | 2020.08.17 |
iOS) Scene(2) - 인터페이스 빌더로 씬 작성 (0) | 2020.08.17 |