iOS) 레이아웃(1) - 인터페이스 빌더

1. 씬의 변화

씬이 변화되는 경우

• 기기의 회전
• 다른 화면 크기/배율의 기기에서 동작
• 동적인 씬 레이아웃 변화

기기의 회전

시뮬레이터 -> 하드웨어 -> 로테이트 메뉴 에서 기기를 회전시킬 수 있다.
프로젝트 내 회전 방향을 설정하여 해당 방향으로 회전됐을 때 화면이 자동으로 돌아가게 할 수 있다.

View Rotation

프레임 기반의 레이아웃

뷰의 프레임은 뷰의 좌표(x,y), 뷰의 크기(width, height)로 나타낸다. 이는 씬의 변화에 관계없이 고정된 값이다. 따라서 씬에 변화가 발생했을 때 적절히 대처하지 못한다.

2. 제약조건 기반의 레이아웃

제약조건은 뷰의 위치와 크기에 대한 제약조건이다. 동적으로 해석되서 프레임에 반영된다. 씬에 변화가 발생했을 때 제약조건에 의해 다시 새로운 좌표와 크기를 잡아서 적용된다. 씬 변화에 대응하는 레이아웃이다.

1) 제약조건

제약조건은 코드나 인터페이스 빌더(IB)를 통해서 작성할 수 있다. 제약조건의 경우 자동으로 제약조건이 생성되게 할 수 있다.

IB 메뉴

• Update frame
• Stackview
• Align
• Add new Constraints
• Resolve Auto Layout Issues

다른 뷰와 정렬

• 모서리 일치
• 중앙 일치
• 부모의 중앙
• 프레임에 반영(Update Frames)
• 제약조건 추가(Sdd Constraints)

위치와 크기

• 인근 뷰와의 거리
• 마진 제약조건
• 크기
• 비율

2) 제약조건과 프레임

제약조건과 씬 레이아웃

1. 앱이 동작중에(런타임) 뷰에 동작하고 있는 제약조건을 해석한다.
2. 이를 통해 뷰의 위치와 크기를 결정한다.
3. 결과적으로 프레임과 제약조건은 같은 곳에 위치하게 된다.

제약조건과 프레임이 다를 때

앱 UI 작성시 제약조건과 프레임이 다르면 이동된 프레임은 무시되고 제약조건에 맞춰서 다시 프레임이 작성된다. 이를 보면 제약조건의 우선순위가 더 높다는 것을 알 수 있다.

• 프레임 업데이트
  • 제약조건에 맞는 위치로 변경(이전 위치)
• 제약조건 업데이트
  • 뷰의 프레임에 맞도록 제약조건 업데이트

제약조건 적용 시점

뷰 컨트롤러의 레이아웃 적용 라이프 사이클은 viewWillLayouSubviews와 viewDidLayoutSubviews 사이가 된다. 따라서 특정 뷰의 좌표가 viewWillLayouSubviews에서와 viewDidLayoutSubviews에서 달라질 수 있다.

3) 레이아웃 가이드

위치를 나타내는 제약조건을 작성할 때 고려해야할 사항이 있다. 씬의 크기가 항상 똑같은 것은 아니다. 씬에 네비게이션 바나 탭 바가 생길 경우에서 처럼 씬의 구조에 따라 씬의 크기가 달라질 수 있다. 이런 경우에 기준이 되는 것이 레이아웃 가이드이다.

컨텐츠 마진

• 컨텐츠 배치 기준선
• 꼭 따르지 않아도 됨

4) 제약조건 작성

수동

주의할 점은 뷰의 위치와 크기를 결정할 수 있도록 충분한 제약조건을 주어야한다. 컨텐츠에 의해 크기를 결정하는 뷰의 경우 크기를 생략할 수 있다. 예를 들어 레이블이나 이미지 뷰 등이 있다.

불충분한 제약조건의 경우 인터페이스 빌더에서 경고로 알려준다.

인터페이스 빌더

(ㄱ)	(ㄴ)

(ㄱ) 형제 뷰와의 거리

1. 뷰를 선택하고 마우스 오른쪽 버튼을 누른 상태로 드래그 앤 드롭 한다.
2. 그러면 형제 뷰로 제약조건을 작성할 수 있는 팝업이 나타난다.
3. 이 중 원하는 제약조건을 선택한다.

(ㄴ) 부모 뷰와의 거리

또 다른 방법은 도큐먼테 아웃라인에서 작성하거나 레이아웃 메뉴에서 작성할 수 있다.

(ㄷ) 제약조건에 추가계산

다음 이미지와 같이 부모뷰 중앙에 해당하는 좌표에 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