안녕하세요! 릴리입니다🙂

오늘은 Auto Layout의 기본 개념과 Auto Layout에서 constraint을 걸 수 있는 Attributes에 대해 알아보도록 하겠습니다.

이 글은 Apple Document와 야곰닷넷의 Auto Layout 정복하기를 참고하여 작성되었습니다.
Understanding Auto Layout
Anatomy of a Constraint
🐻 야곰 닷넷 _ Auto Layout 정복하기

Auto Layout

---

1. 개념과 원리

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

Auto Layout은 constraints에 기반하여 view의 size와 position을 dynamic하게 계산합니다.

view의 넓이나 높이, 중심과 시작 등의 특징(attributes)을 다른 view와 비교하여 설정하는 constraint는 화면의 크기와 상관없이 항상 상대적인 위치를 결정합니다. 따라서 constraint에 기반한 방식은 internal and external changes에 반응하여 UI를 다이나믹하게 빌드할 수 있도록 합니다.

2. External and Internal Changes

앱의 UI View의 변화를 유발시키는 요인을 앱 내부에서 일어나는 변화인지, 앱 외부에서 일어나는 변화인지에 따라 나누어 살펴보겠습니다.

External Changes

앱 외부에서 일어나는 변화입니다. External Changes는 보통 superview의 size와 shape의 변화를 유발합니다.

External Changes의 일반적인 요인을 살펴보겠습니다.

• The user resizes the window (OS X).
• The user enters or leaves Split View on an iPad (iOS).
• The device rotates (iOS).
• The active call and audio recording bars appear or disappear (iOS).
• You want to support different size classes.
• You want to support different screen sizes.

위 대부분의 요인은 앱으로 부터 다이나믹한 반응을 요구하며, runtime에 일어나는 변화들입니다. 그 외의 요인은 다양한 스크린 사이즈를 지원하는 것같이 앱이 다양한 환경에 적응하면서 일어나는 변화들입니다. runtime에 screen 사이즈가 변하지 않더라도, 오토레이아웃으로 adaptive한 인터페이스를 만드는 것은 iPhone 8이나 iPhone12나, iPad에서도 동일한 뷰가 보여질 수 있도록 만들어줍니다.

Interanl Changes

앱 내부에서 일어나는 변화입니다.

Interanl Changes의 일반적인 요인을 살펴보겠습니다.

• The content displayed by the app changes.
• The app supports internationalization.
• The app supports Dynamic Type (iOS).

앱 내부의 동작에 의해 유발되는 변화들입니다.

예를 들어 사용자가 label에서 텍스트를 편집하면 label의 사이즈는 유동적으로 변화합니다. 그에 따라 주변의 control이나 뷰의 위치도 변화할 수 있겟죠?

internationalization(국제화)를 지원한다는 것은 앱이 지원하는 언어나 지역에서는 뷰가 적절하게 표시되도록 하는 것을 의미합니다. 예를 들면 언어에 따라 같은 내용일지라도 보여지는 텍스트의 길이와 방향이 다를 수 있는데, 이를 반영하여 적절하게 뷰가 표현되게 만들어주는 것입니다.

iOS가 dynamic Type을 지원한다면 사용자가 앱내의 폰트 사이즈를 바꿀 수 있습니다. 글자와 관련된 요소들의 넓이와 높이가 변하게 될 것이니 이와 관련된 레이아웃도 조정이 필요합니다.

3. Equations

각 contstraint는 하나의 equation(등식)으로 표현할 수 있습니다.
UI의 두개의 item간의 관계를 표현해주고 있습니다.

단 하나의, 단 한 가지 경우만 가능한 등식을 만드는 것이 중요 뽀인트 입니다!
🌟 "One and Only One"한 경우만 존재하게!🌟

컴퓨터는 주어진 constraint만으로 size와 location을 계산해야하기 때문에, 단서를 충분히 제공해주어야합니다. 컴퓨터는 자의적으로 판단할 수 있는 능력이 없으니깐요! 모호하거나 다양한 경우의 수를 남겨준다면 빨간선을 표시하고 계산에서 길을 잃게됩니다😯

Storyboard의 constraint를 확인해보면 위 수식이 실제로 적용되고 있는 걸 확인할 수 있습니다!

아이템 간의 attribute를 다르게 설정해 줄 수 도 있고,

Button_2.leading = 1.0 * Button_1.trailing + 8.0

width와 hieght에 constant(상수)를 설정해 줄 수도 있습니다. 즉, 항상 같은 넓이나 높이 값을 설정해주는 것이죠. 그런데 아래에서 설명할 Top이나 CenterX와 같은 location attribute에는 상수를 설정해 줄 수 없습니다.
아래 등식과 같이 second item은 공백, Multiplier는 0.0, attribute는 Not an Attribute로 설정해주면 됩니다.

View.Width = 0.0 x Not an Attribute + 10.0

4. Attributes

attribute란 constraint를 설정해 줄 수 있는 feature(특성)을 의미합니다.

크게 size attribute와 location attribute로 분류 할 수 있습니다.

size attributes

• Width
• Height

location attributes

• Top
• Bottom
• Center X
• Center Y
• Left or Leading
• Right or Trailing
• Baseline