AutoLayout 이란?

AutoLayout의 경우 Apple Documents 를 참조하면 다음과 같다.

AutoLayout
  • ko
  • en
1
2
3
4
오토레이아웃
오토레이아웃은 뷰계층에 포함된 모든 뷰들의 사이즈와 위치를 각 뷰들에 설정되어 있는 제약사항들을 기반으로 즉시 계산한다.
예를 들면, 버튼을 이미지뷰의 가로 중앙에 놓고, 이미지뷰 아래쪽 8포인트로 제약을 설정해 두면, 이미지뷰의 사이즈와 위치가 변경될 경우, 버튼의 위치가 자동으로 제약사항에 맞게 프레임이 조정된다.
이러한 제약사항을 통해 내부적, 외부적 변경 사항에 따른 `동적으로 변경되는 UI`를 작성할 수 있다.
위에서 말한 외부적 변화 와 내부적 변화은 다음과 같다.

External Changes
  • ko
  • en
1
2
3
4
5
6
7
외부적 변화
- 윈도우 크기 조절 (OS X).
- 유저가 iPad 상에서 Split View 진입 혹은 나갈 경우 (iOS).
- 기기 회전시 (iOS).
- 전화 혹은 오디오 레코딩 바가 생기거나 사라질 경우 (iOS).
- 별도의 사이즈 클래스 지원시.
- 멀티 해상도 지원시.
Internal Changes
  • ko
  • en
1
2
3
4
5
6
7
8
내부적 변화
- 앱내 뷰 계층에 들어갈 텍스트 혹은 이미지와 같은 컨텐츠에 변화가 생길 경우
- 로컬화에 따른 변화
    - 첫번째, 언어에 따라 뷰들의 크기가 달라짐.
    - 두번째, 날짜,숫자,통화 등의 경우 지역별로 표현방식이 달라 뷰들의 크기가 달라짐.
    - 세번째, 언어에 따라 배치 방향이 다름
      (`English` left-to-right / `Arabic` right-to-left)
- 앱 실행중 폰트가 Dynamic Type 의 경우

개략적인 오토레이 아웃에 대한 내용은 위와 같다. 보다 더 자세한 사항은 애플의 도큐먼트를 참조하면 된다.

아래는 두 가지 레이아웃 방식이다.
좌측이 제약사항 없이 사용하던 프레임 레이아웃 방식이고, 우측이 제약사항 레이아웃 방식이다.

Layout View StyleLayout View Style
Layout Constrain StyleLayout Constrain Style

위의 제약사항 레이아웃을 이용하여 유동적으로 변하는 테이블뷰셀을 만들 수 있었다.

원칙

  1. 좌,우,위,아래 제약사항이 명확히 걸려있어야한다.
  2. 넓이, 높이의 제약사항이 명확해야한다.
  3. 위에서부터 아래까지 물흐르듯이 뷰계층들의 제약이 잘 걸려있어야한다.
1
2
self.tableView.rowHeight = UITableViewAutomaticDimension // 필수 
self.tableView.estimatedRowHeight = 80 // (평균높이)

위의 원칙을 지키고 작업을 하면 잘 작동한다.
아래는 위의 원칙을 지키고 작업한 테이블뷰 셀의 제약사항이다.

Flexible TableViewCellFlexible TableViewCell
제약사항의 가장 위쪽에 위치한 뷰의 제약사항제약사항의 가장 위쪽에 위치한 뷰의 제약사항
실제 텍스트가 늘어났다 줄었다 하는 라벨 입니다실제 텍스트가 늘어났다 줄었다 하는 라벨 입니다

위의 제약사항들로 만들어진 결과물은 다음과 같다.
텍스트가 길어져도, 혹은 짧아저도 걸어둔 제약사항을 이용하여 유동적으로 변하는 테이블뷰를 만들 수 있다.

위의 제약사항의 결과물입니다.위의 제약사항의 결과물입니다.

위의 결과물을 만들기 위해 참조 하였던 소스코드를 공유합니다.

Stay Huger, Stay Foolish