(iOS) - AutoLayout ,Constraint, intrinsic size

Auto Layout

정의

iPhone 4 부터 iPhone 11, iPhone SE, iPhone XS 그리고 iPhone XS MAX 등 모두 크기나 비율이 제각각인 디바이스들이 존재한다. 그렇기 때문에 어플리케이션이 디바이스 사이즈에 구애받지 않고 동일한 화면을 구성할 필요가 있는데, 이를 위해 나온 것이 오토레이아웃(Auto Layout) 인데,  제약을 추가하면 레이아웃 시스템이 디바이스 그리고 해상도를 고려하여 최종 위치와 크기를 계산하고 배치위치를 결정하는 방식이다. 즉 , View들과의 관계(제약)를 이용하여 View의 위치와 크기를 자동으로 결정해주는 시스템이다.

오토레이이아웃을 사용하는 이유에는 디바이스의 다양성 이외에도 두가지 요인이 존재한다.

외부 변경

외부 변경은 슈퍼뷰의 크기나 모양이 변경될 때 발생합니다. 보통 디바이스를 회전하거나, 다른 크기의 클래스나 스크린을 지원하거나, 아이패드에서 분할 뷰(split view) 를 사용할 때

내부 변경

내부 변경은 인터페이스 뷰의 크기나 설정이 변경될 때 발생한다. 보통 어플리케이션의 컨텐츠가 변경, 국제화를 지원, 동적인 타입을 지원하는 경우를 말한다.  신문 기사 어플리케이션의 경우, 이미지나 텍스트를 신문 기사의 레이아웃에 맞게 조정해야 하는 경우를 예로들 수 있다.

 

Auto Layout 이전에 쓰이던 Frame-based Layout에서는 UIView.frame.size.width 와 같이 frame에 접근하여 속성을 다뤄야한다.

왼쪽 그림은 예전에 사용하던 방식인 Frame-based Layout이다.View를 배치할 위치를 지정하고, View의 너비와 높이를 100포인트로 지정해야한다.

반명 Auto layout에서는 왼쪽, 상단 여백을 50포인트로 지정하고, 너비와 높이를 100으로 고정하는 제약을 추가한다.

얼핏보면 비슷하지만, 큰 차이점이 존재한다???

오토 레이아웃은 제약을 기반으로 view를 배치하므로, 가장 중요한 개념이다.

 

 

Auto Layout Interface Builder

 

Prototype Constraint

스토리보드상에서 드래그를 통해 view를 배치하게 되면 ,스토리보드 상의 현재 프레임에 맞추어 자동으로 제약이 추가된다. 이것을 프로토타입 제약이라고 한다. (임시방편느낌)

PreView

Option + Command + enter

running하지 않고, 한번에 다양한 디바이스에서의 제약을 확인할 수 있다.

Constarints 공식

AutoLayout은 선형 방정식에 의해 계산이 된다. 다른 View들과의 관계(제약)을 통해 View의 위치를 결정짓는 시스템이기 때문이다. 네모난 박스(uiView로 만듬)를 하나 만들고, 예를들면

• redBox.top = 1.0 * SafeArea.top + 100
  • redBox의 top은 safeArea의 top과 100의 거리에 있다.
• redBox.leading = 1.0 * SafeArea.leading + 50
  • redBox의 leading은 safeArea의 leading과 50에 있다.
• 제약을 추가하게되면 가장 인접한 공통뷰에 추가된다. 따라서 위의 경우에는 가장 인접한 공통뷰는 rootView이므로 rootView에 추가된다.

Realation

=가 아닌 <=, >=도 사용 가능하다. 가장 쉬운 예를 들면, Label을 사용하는데 텍스트의 크기가 긴 경우를 생각하면 된다.

 

redBox와 Label 사이의 거리를 등호로 놓았을때는 텍스트가 길어서 잘리지만, <=를 통해 거리가 더 가까워져도 되도록 설정해놓으면 텍스트에 맞춰 Label이 이동한다.

 

 

Priority

1 ~ 1000의 값이다. 중복되는 constraint가 있을 경우에, 어떤 값으로 처리할지를 우선순위로 지정하는것이다.

1000 = 필수제약이고, 더 낮으면 옵션제약이다. 애매한 값보다는 넓은 범위로 사용하는게 좋다.

ex ) 필수(1000) , 높음(750), 중간(500), 낮음(250)

서로 충돌하고, 우선순위도 같다면 오류가 발생하게된다.

우선순위를 999로 놓으면, Document Outline 에서는 @999 로 표시된다.

 

 

코드로 Priority 바꾸기

class ViewController: UIVIewController{
    @IBOutlet weak var reboxHeight: NSLayoutConstraint!

  override func viewDidLoad() {
    super.viewDidLoad()
    if redboxHeight.priority.rawValue == 1000{
      // 값을 확인할때는 rawValue 속성 이용
    redboxHeight.priority = UILayoutPriority(999)
    }
}
}

 

Intrinsic Content size (고유 콘텐츠 크기)

간단히 말하면 AutoLayout은 constarint를 확인할때, width 와 Height을 먼저 확인한다. 이때 Width, Height에 대한 제약이 없다면 첫번째로 나머지 제약들로 size를 추론할수 있는지 확인한다.

그래도 size를 추론할 수 없다면,View가 출력하려는 콘텐츠를 기반으로 크기를 계산한다.이것이 Intrinsic Content Size이다. 적당한 크기를 얻는다면 출력하고, 아니라면 제약 오류가 발생한다.

 

Intrinsic Content Size를 허용하는 View들

• UILabel : 텍스트와 폰트, 사이즈를 통해 Intrinsic size를 구한다. 레이블은 오히려 width, height을 고정하는것이 피해야할 패턴중에 하나이다.
• UIButton : 버튼도 Label과 마찬가지이다. 차이점은 터치감지를 위해 Label보다는 약간의 패딩이 붙여져 Intrinsic size가 생성된다.
• UISwitch : 항상 고정된 크기로 표시되기 때문에 항상 Intrinsic size로 출력된다.
• UITextField: 항상 입력에 문제가 없을정도의 Width를 추가해주는게 좋다.

 

이러한 Intrinsic Content를 온전하게 나타나게 하기 위한 우선순위가 2가지 있다. 

Hugging priority

• 우선순위가 높으면 크기를 유지함.
• 우선순위가 낮으면 크기가 늘어난다.
• 두 오브젝트중 하나가 커져야 하는 상황에서 사용한다.

Compression Resistance priority

• 우선수위가 높으면 크기를 유지함.
• 우선순위가 낮으면 크기가 작아진다.
• 두 오브젝트중 하나가 작아져야 하는 상황에 사용한다.