[iOS] - Anatomy of a Constraint in Auto Layout

📱 Auto Layout - Anatomy of a Constraint

🎯 Auto Layout이란?

• Auto Layout Guide의 정의를 살펴보면 아래와 같습니다.

  Auto Layout dynamically calculates the size and position of all the views in your view hierarchy, based on constraints placed on those views.

  오토 레이아웃은 뷰에 정의된 제약들을 기반으로 뷰 계층에서 모든 뷰들의 크기와 위치를 동적으로 계산해줍니다. 예시는 다음과 같습니다.

  For example, you can constrain a button so that it is horizontally centered with an Image view and so that the button’s top edge always remains 8 points below the image’s bottom. If the image view’s size or position changes, the button’s position automatically adjusts to match.

  간단히 말하면, 버튼에 제약을 줄 때 버튼의 가장 윗부분이 버튼 상단에 존재하는 이미지의 가장 아래쪽에서부터 8 포인트 떨어지게 설정한다면 View의 사이즈가 바뀌거나(예를 들면 다른 기기) 위치가 바뀌면 버튼의 위치가 자동으로 재조정됩니다.

  This constraint-based approach to design allows you to build user interfaces that dynamically respond to both internal and external changes.

  결국 오토 레이아웃은 변화에 대해 동적으로 작동하는 반응형 인터페이스를 만들 수 있게 합니다. 기준점을 중심으로 거리를 통해 절대적인 위치를 설정하는 것이 아니라 요소간의 상대적 위치 제약을 통해 요소의 위치를 정하는 방식입니다.

🗜 Constraint(제약) 설정

• 아래는 두 요소 Blue, Red 간에 거리 8인 제약을 주는 그림입니다.

  

  RedView와 BlueView는 각각 제약을 받을 요소를 의미하며 뒤의 Leading은 그 요소의 시작점(leading edge), trailing은 요소 Blue의 끝 점(trailing edge)을 의미하고 그 거리를 Constant 8.0으로 설정했습니다.

• Constraints를 줄 때에 필요한 기준들은 아래와 같습니다.

  

  여기서 왼쪽이 Leading, 오른쪽이 Trailing인 이유는 글을 읽는 방향이 영어 기준으로 왼쪽에서부터 오른쪽이기 때문입니다. RTL(Right to Left)에 따라 왼쪽 방향을 Leading으로 설정했습니다.

  위의 attributes는 크게 두가지로 구분할 수 있습니다.

  size attributes: Width, Height

  location attributes: Top, Bottom... etc.

  size attributes는 크기를 나타내는 속성이며 location attributes는 위치를 나타내는 속성입니다.

  

  • size attribute와 location attribute는 함께 쓸 수 없습니다.
  • location attributes에 상수를 선언할 수 없습니다. size attributes에는 상수를 선언할 수 있지만 location attributes는 위치를 기반한 상대적 선언이므로 상수로 표현할 수 없습니다.
  • location attributes에서는 multiplier를 1.0으로 설정해야 합니다.
  • location attributes에서 vertical attributes(수직)와 horizontal attributes(수평)를 같이 사용할 수 없습니다. 방향이 서로 90도로 제약을 줄 수 없는 관계이기 때문입니다.
  • Leading/Trailing attributes와 Left/Right attributes를 서로 혼용할 수 없습니다. Leading은 Trailing과, Left는 Right과 사용합니다.
  
  

  📝 Contraints 예시

  
  

  아래는 contraints의 예시입니다.

  

  1. NotAnAttribute는 값을 설정할 때 온전히 오른쪽의 Constant(예시에서 40.0)로 설정하기 위해 주는 값입니다. 숫자라면 0으로 생각해도 될 것 같습니다.
  2. Button_1의 오른쪽 끝에서 8.0 떨어진 곳에 Button_2의 왼쪽 끝을 배치하겠다는 location attributes 입니다.
  3. allign을 의미합니다. 위에서 아래로 병렬적으로 위치를 지정할 때 같은 라인에 존재하게 하는 것으로 Button_1과 Button_2의 왼쪽 edge가 같은 선상에 존재하게 합니다.
  4. 두 버튼의 가로 크기를 같게 만듭니다.
  5. 상위 뷰와 그 뷰에 존재하는 다른 뷰가 있을 때, 상위 뷰의 정 가운데에 하위 뷰를 배치하는 attributes입니다.
  6. 가로 세로 비율을 1:2로 만들겠다는 뜻입니다.

  

  여기서 Equal(=)은 프로그래밍에서 사용하는 할당의 개념이 아닙니다. 할당 시에는 양쪽의 값이 달라도 상관 없었습니다. 하지만 attributes에서 equal은 수학적으로 같다는 의미이며 양쪽의 값이 다를 경우 오류를 발생시킵니다.

💬 Constraints Inequalities & Priorities

• Contraints는 꼭 equal로 설정할 필요는 없습니다.

  

  특정 제약 조건 하에서 그 사이 값을 가질 수 있을 때 위처럼 부등호로 표시할 수 있지만 equal 정의보다 많은 생각을 해야할 필요가 있습니다.

• Contraints에는 우선도(Priorities)를 설정할 수 있습니다. 우선도가 있을 경우, 충돌하는 Constraints가 있다면 우선도가 높은 Constraints만 작동하게 됩니다. 우선도가 높은 Constraint가 먼저 작동하고, 그 이후 우선도의 Constraint가 작동하는 개념입니다.

  우선도는 1에서 1000 사이의 값을 갖습니다.

🗜 Intrinsic Content Size(고유 컨텐츠 사이즈)

• Constraint는 View의 위치와 크기를 기반으로 제약을 줄 수도 있지만, 컨텐츠 고유의 사이즈를 통해 제약을 설정할 수도 있습니다. 예를 들어, 버튼의 고유 사이즈는 안에 들어가는 텍스트(title)의 크기에 약간의 마진값을 더한 것입니다.

  So far, all of the examples have used constraints to define both the view’s position and its size. However, some views have a natural size given their current content. This is referred to as their intrinsic content size. For example, a button’s intrinsic content size is the size of its title plus a small margin.

  

  Label 등의 요소는 고유 사이즈가 정해져있기 때문에 생성한 후 바로 위치에 대한 constraints를 줘도 작동합니다. 하지만 UIView, NSView의 경우는 고유 사이즈가 없기 때문에 생성 후 사이즈 정의 없이 바로 위치에 대한 constraints를 주면 오류가 발생합니다. Text/image views는 고유 사이즈가 바뀔 수 있습니다. Slider의 경우 iOS에서 높이는 고정되어있고 너비만 변경 가능합니다. 그래서 생성한 후 위치에 대한 constraints를 주면 높이에서는 문제가 없지만 너비가 확정되어 있지 않아 수평 방향의 constraints에서 오류가 발생합니다.

🗜 CHCR(Contents Compression, Contents Hugging)

• Contents Compression: 컨텐츠가 줄어들지 않으려고 버티는 힘입니다.

• Contents Hugging: 컨텐츠가 늘어나지 않으려고 버티는 힘입니다.

  

  줄어드려고 하는 힘이나 늘어나려는 힘으로 착각할 수 있지만 이 두 개념은 버티는 반발력에 가까운 개념입니다. 이것 역시 Priority를 기준으로 우선도를 결정합니다.

  Label의 경우 contents가 늘어날수록 그 고유 크기가 늘어납니다. 그래서 크기가 정해지지 않은 Label에 서로 영향을 주는 Constraints를 설정할 경우 문제가 발생합니다. 그래서 Content Hugging을 설정해주면 크기가 늘어나는데 한계가 생기며, 반대로 Content compression을 설정하면 레이블이 너무 작아지는 것을 막을 수 있습니다.

Reference: https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/index.html