[Auto Layout] 1. Constraints

iOSoo·2022년 3월 4일
0

Constraints: 제약사항

우선 UIView를 아이폰11화면에 놓고 Constraints를 4방향으로 20씩 설정해보자.
(margins은 체크를 해제해주자. margins에 대한 설명은 다른 챕터에서...)

설정을 모두 하게되면 아래와 같이 된다.

여기서 Constraints를 잘보면 왼쪽, 오른쪽으로는 디바이스의 끝까지 갔지만 위아래를 보면 어느정도의 영역을 두고 Constraints 20이 설정된 것을 볼 수 있다.

즉, SafeArea라는 영역 내에서 Constraints 20씩 설정이 된 것이다.

이제 UIView를 누르고 사이즈 인스펙터 영역을 보면 우리가 어떤 값으로 Constraints을 설정했는지 볼 수 있다.

사이즈 인스펙터를 보게되면 top, bottom, Leading, Trailing으로 각 20씩 Constraints 설정된 것을 확인할 수 있다.

top, bottom, Leading, Trailing를 설명하자면 이 요소들은 텍스트를 기준으로 이름이 지정되었다.

텍스트가 위쪽에서 아래로, 왼쪽(선두)에서 오른쪽(맨뒤)으로 쓰여지기 때문에

  • top: 위
  • bottom: 아래
  • Leading: 왼쪽
  • Trailing: 오른쪽

또한, 사이즈 인스펙터에서 Constraints부분의 Edit을 선택해서 수정할 수도 있다.

이런식으로 4개의 Constraints를 전부 50으로 바꿔보자.

[오류 발생 - 크기편]

이런식으로 Constraints를 설정하다가 오류가 발생하는 경우를 만들어 보자.

오류선이 잘 보이도록 UIView의 색을 노란색으로 바꾸고 bottom의 Constraints를 삭제해보자.

삭제를 하게 되면 top부분의 UIView와 Constraints가 빨간 오류선 처리가 된다.

오토레아웃의 오류가 나는 원인

  1. 정확한 위치 파악 불가
  2. 정확한 크기 파악 불가

이 부분에서 오류의 원인은 크기 파악 불가로 나타난 오류이다.

자세히 말하자면 Leading과 Trailing은 모두 Constraints가 잡혀 있어 Width를 알 수 있지만 top과 bottom 부분에는 top만 Constraints가 잡혀있어 Height를 알 수 없어서 나탄 오류이다.

확실한 원인은 좌측 상단 빨간 버튼을 확인하면 알 수 있다.

[오류 해결 - 크기편]

해결 방법은 높이자체를 알려주거나 높이를 정할 수 있는 간격(Constraints)를 잡아주는 것이다.

방법1. 높이를 알려준다.

방법 2. Constraints를 잡아준다.

핵심! 화면의 크기나 화면의 위치가 지정되어 있지 않으면 오류가 난다.

[Constraints 삭제]

Constraints를 삭제하는 방법에는 여러가지 방법이 있지만 가장 간단한 방법은 우측 하단에 있는 Resolve Auto Layout Issues -> Clear Constraints를 눌러주면 선택된 UI의 Constraints가 모두 삭제가 된다.

[오류 발생 - 크기편2]

우측 하단에 보면 Align(정렬)을 눌러보면 여러개의 체크박스중 활성화된 두개를 체크할 수 있다.

  • Horizontally in Container : 최상위 View의 가운데 수평정렬

  • Vertically in Container : 최상위 View의 가운데 수직정렬

두 체크박스를 모두 선택해주면 아래와 같이 오류가 뜬다.

그 이유는 Width, Height를 잡아주지 않았기 때문이다.

[오류 해결 - 크기편2]

Width, Height를 잡아주자

결과화면

[오류 발생 - 위치편]

새로운 UIView를 화면에 놓고 Width, Height만 잡아주면 아래와 같이 오류가 뜬다.

오류 메세지를 확인해보면 아래와 같이 X, Y 좌표가 정해져 있지 않다고 나와있다.

위치가 정해지지 않은게 문제가 되는 이유는 아래의 사진과 같이 기기에 따라 UIView의 위치가 변경이 되기 때문이다.

(아이폰11)

(아이폰 8+)

[오류 해결 - 위치편]

이 오류를 해결하기 위해서는 x, y 위치를 Constraints를 잡아주면 된다.

결과화면

만약 여기서 Width Constraints를 없애면 에러가 뜨게 되는데 이 에러는 Width를 잡아주거나 Leading 또는 Trailing Constraints를 잡아주게 되면 해결이 된다.


[출처] iOS AutoLayout 완벽 가이드 - 실무 프로젝트를 위한 실전강의


profile
애플을 좋아하는 비전공생

0개의 댓글