오토 레이아웃이란?

사이즈에 구애받지 않고 시각적으로 동일한 화면을 구현해야하는데 이를 위한 가장 편리하고 권장되는 방법이 바로 오토레이아웃입니다.

오토레이아웃은 뷰의 제약 사항을 바탕으로 뷰 체계 내의 모든 뷰의 크기와 위치를 동적으로 계산합니다. 

 

사용자가 아이패드의 분할뷰(Split View)를 사용하거나 사용하지 않는 경우(iOS).

장치를 회전하는 경우(iOS).

활성화콜(active call)과 오디오 녹음 바가 보여지거나 사라지는 경우(iOS).

다른 크기의 클래스를 지원하기 원하는 경우

다른 크기의 스크린을 지원하기 원하는 경우

 

위와 같은 경우가 외부 변경이다. 외부 변경은 슈퍼뷰의 크기나 모양이 변경될 때 발생합니다. 각각의 변화와 함께, 사용 가능한 공간을 가장 잘 사용할 수 있도록 뷰 체계의 레이아웃을 업데이트해줘야 합니다.

애플리케이션 변경에 의해 콘텐츠가 보여지는 경우 애플리케이션이 국제화를 지원하는 경우 애플리케이션이 동적 타입을 지원하는 경우

이 같은 경우가 내부 변경이다. 애플리케이션 콘텐츠가 변경됐을 때, 새로운 콘텐츠는 예전과 다른 레이아웃을 필요 할 수 있습니다. 새로운 애플리케이션이 각각의 신문 기사의 크기에 기반을 둔 레이아웃을 조정할 필요가 있는 경우와 같이, 텍스트 또는 이미지를 보여주는 애플리케이션에서 일반적으로 발생하는 일입니다. 이와 비슷하게, 사진 콜라주는 이미지 크기와 영상의 가로 세로의 비율을 다뤄야만 합니다.

 

오토레이아웃은 아래의 경우와 같이 인터페이스의 절대적인 좌표가 아닌 동적으로 상대적인 좌표가 필요한 경우에 유용합니다.

 

• Width : 정렬 사각형의 너비
• Height : 정렬 사각형의 높이
• Top : 정렬 사각형의 상단
• Bottom : 정렬 사각형의 하단
• Baseline : 텍스트의 하단
• Horizontal : 수평
• Vertical : 수직
• Leading : 리딩, 텍스트를 읽을 때 시작 방향
• Trailing : 트레일링, 텍스트를 읽을 때 끝 방향
• CenterX : 수평 중심
• CenterY : 수직 중심

button과 textField에 기본간격(Standard Space, iOS 11 현재 8포인트)에 제약을 주기 위해 NSLayoutConstraint 인스턴스를 생성하는 코드입니다.

NSLayoutConstraint(item: button, attribute: .right, relatedBy: .equal, toItem: textField, attribute: .left, multiplier: 1.0, constant: 8.0)

https://www.boostcourse.org/mo326/lecture/16849/

 

button의 너비가 50보다 크거나 같도록 넓이 제약(Width Constraint)을 줄 수 있는 NSLayoutConstraint 인스턴스 생성 코드입니다.

NSLayoutConstraint(item: button, attribute: .width, relatedBy: .greaterThanOrEqual, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 50.0)

 

purpleBox가 superView를 기준으로 왼쪽(Leading) 간격은 50포인트, 오른쪽(Trailing) 간격은 50포인트로 설정합니다. (Connection to Superview)

NSLayoutConstraint(item: purpleBox, attribute: .left, relatedBy: .equal, toItem: self.view, attribute: .left, multiplier: 1.0, constant: 50.0) NSLayoutConstraint(item: purpleBox, attribute: .right, relatedBy: .equal, toItem: self.view, attribute: .right, multiplier: 1.0, constant: -50.0)

• topField와 bottomField의 세로 사이의 간격을 10포인트로 설정합니다.(Vertical Layout)

NSLayoutConstraint(item: topField, attribute: .bottom, relatedBy: .equal, toItem: bottomField, attribute: .top, multiplier: 1.0, constant: -10.0)

 

• topField와 bottomField의 세로 사이의 간격을 10포인트로 설정합니다.(Vertical Layout)

NSLayoutConstraint(item: topField, attribute: .bottom, relatedBy: .equal, toItem: bottomField, attribute: .top, multiplier: 1.0, constant: -10.0)