AutoLayout - Constraint
Constraint
다음과 같은 화면이 있다고 생각해보자.
위 스크린샷의 노란색 뷰는 넓이가 290이고, 높이가 657이다. 만약에 기기를 회전하거나 다른 크기를 가진 아이폰을 가져온다면 위 뷰는 어떻게 변할까?
아이폰이 회전되었을 때, 아이폰의 높이가 노란색 뷰보다 훨씬 작기 때문에 노란색 뷰가 화면 밖으로 벗어나는 것을 알 수 있다.
만약에 위 노란색 뷰가 사용자에게 보여줘야할 텍스트 뷰라면, 화면을 돌렸을 때 아래와 같이 보여줘야 하는게 훨씬 사용자 경험을 좋게 할 것이다.
즉 아이폰을 회전하거나, 크기가 다른 아이폰을 사용할 때 우리가 의도한 대로 사용자에게 콘텐츠를 보여주는게 궁극적인 목표라 할 수 있을 것이다. 만약 크기가 더 작은 아이폰을 사용했을 때 뷰들이 화면 밖으로 빠져 나간다거나 하는 부분이 존재한다면 좋지 못한 인상을 심어줄 것이다.
위 개념에서 AutoLayout 이 빛을 발한다.
AutoLayout
- View 들 간의 제약조건을 설정해 UI 를 정의함
- 내/ 외부 변경사항에 동적으로 반응한다.
- Frame 기반 UI 에 비해 더 많은 연산 능력이 요구되므로, 성능은 다소 느릴 수 있음
AutoLayout 은 화면상에 존재하는 뷰들간의 관계를 이용해 UI 를 그린다. 즉 위 예시에서 노란색 뷰와 각각의 엣지에 관해 제약조건을 설정하면, 화면을 회전하더라도 노란색 뷰 전체를 유저에게 보여줄 수 있는 것이다.
노란색 뷰를 클릭한 다음 StoryBoard 우측 하단에 있는 세 번째 메뉴를 클릭해보면, 제약 조건을 설정할 수 있는 창이 나온다. 위 화면에서 노란색 뷰가 다른 뷰와 어떤 관계를 가질 지 설정할 수 있는데, 먼저 빨간색 선을 보도록 하자.
네 방향의 빨간색 선은 노란색 뷰의 상하좌우에 위치한 뷰들간의 관계를 나타낸다. 위 이미지는 노란색 뷰가 위쪽에 존재하는 뷰와 어떤 관계를 가질지 설정하는데, Safe Area 나 최상위 루트뷰인 View와의 관계를 설정할 수 있다. 노란색 뷰가 Safe Area 로부터 20포인트 정도 떨어지는 제약조건을 생성해보자.
위 빨간색 선이 좀 더 진하게 표시되면, 해당 제약조건을 실제로 추가하겠다는 뜻이다. 마찬가지로 상하좌우에 20포인트만큼의 제약조건을 설정하고, Add 4 Constraint 를 클릭해보자.
노란색 뷰를 클릭하면, 상하좌우에 파란색 선이 생긴 것을 확인할 수 있다. 위 파란색 선은 제약조건을 나타내는 표시선으로, Safe Area 와 노란색 뷰 간에 어떠한 제약조건을 가지고 있는지를 표시해준다. 20포인트만큼의 제약조건을 줘서, 20포인트만큼의 길이를 가지고 있는 파란색 선을 볼 수 있다.
그러나 노란색 뷰의 상단 제약조건을 보면, 파란색 선이 화면끝까지 도다랗지 못하는 것을 알 수 있다.
이것은 Safe Area 의 특성때문인데, 아이폰 X 이후 모델 (노치가 있는 모델) 의 경우 위 아래 영역을 시스템 제스처에 사용해야 하므로, 위 아래 영역을 제외한 화면 영역을 Safe Area 라고 부른다. 애플에서 이 화면을 넘겨서 디자인 하지 말라고 하기도 하고, 또 Safe Area 를 넘어가버리면 시스템 동작을 방해하는 부분이 있을 수 있기 때문에 Safe Area 라는 개념을 명심하도록 하자.
상하좌우 제약 조건을 설정해줬으므로, 노란색 뷰는 항상 Safe Area 로부터 20 포인트만큼 떨어진 높이와 넓이를 가진다. 즉 아이폰을 회전하더라도, 위 제약조건대로 넓이와 높이가 재조정되는 것이다. Safe Area 나 최상위 root View 뿐만 아니라 버튼과 버튼, 버튼과 라벨 사이의 제약조건도 물론 설정해줄 수 있고, 이 제약조건으로 어떠한 해상도와 방향에도 대응하는 UI 를 구성할 수 있다.
추가한 Constraint 는 Storyboard Navigator 에서 찾아볼 수 있다.
