[iOS] AutoLayout 개념 및 종류 톺아보기(feat. StackView Attributes)

# 오토레이아웃 공식

RedView.Leading = 1.0 x blueView.trailing + 8.0

BlueView |-8-| RedView

A와 B의 상대적 뷰를 나타내는게 핵심이다

• redView와 blueView는 item을 나타냄
• leading과 trailing은 Attribute를 나타냄
• = 은 Relationship을 나타냄
• 1.0은 multiplier를 나타냄
• 8.0은 Constant를 나타냄

고로 다시 저 식을 해석하면

=> RedView의 leading은 blueView의 trailing과 8만큼 떨어져있다.

# 오토레이아웃

• 프레임 방식과 오토레이아웃 방식이 있다.

프레임방식은 ( x, y )

• 어떤 변화가 생겨도 애응할 수 있어 유연하다
• 그러나 모든 변경사항을 직접 관리해야하기때문에 많은 노력이 필요하다.
• 설계부터 시작하여 디버그 및 유지관리까지 많은 것을 관리해야한다.
• 가장 효과적이지만 난이도도 많이 어렵다 ?

오토레이아웃방식(좌우 상하 몇씩 떨어지게 설정)

• 일련의 제약조건을 사용해 유조인터페이스를 정의한다.
• 제약 조건은 앞서말한 것처럼 일반적으로 두 뷰간의 관계를 나타낸다.
• 그런 다음 오토레이아웃은 이러한 제약조건을 기반으로 뷰의 크기와 위치를 계산한다.
• 둘 중 오토레이아웃을 많이 사용한다.
  빠르게 적용할 수 있고 많은 시간을 줄일 수 있기때문이다.

제약(Constraint)
제약(Constraint) 는 뷰와 뷰 사이의 관계를 속성을 통해 정의하는 것을 말한다.
제약은 위치를 방정식으로 나타낸다. 이를 이해하기 위해서는 먼저 오토레이아웃의 위치에 대해 알아야 한다.
오토레이아웃은 정렬 사각형을 기반으로 한 위치 속성을 사용하고 있다. 이 위치 속성에는 다음과 같은 것들이 있다.

# 고유 콘텐츠 크기(Intrinsic Content Size)

뷰가 원래 가지고 있었던 크기를 고유 콘텐츠 크기(Intrinsic Content Size)라고 한다.

# 제약 우선도(Constant Priority)

만약 제약이 충돌하는 경우, 우선도가 높은 제약부터 레이아웃에 적용된다.
고유콘텐츠 크기보다 뷰가 커지지 않도록 제한하는 콘텐츠 허깅 우선도(contents Hugging Priority)와
반대로 작아지지 않도록 제한하는 콘텐츠 축소 방지 우선도(Contents Compression Resistance Priority)가 있다.

# 레이아웃 마진(Layout Margin)

기본적인 간격을 말함

#  제약의 우선도(Constraint Priorities)

여러게의 제약을 적용할 수 있는데 우선도가 높은 친구가 먼저 적용이되는것이다. 그래서 만일 제약조건이 충돌이면 우선도가 낮은친구가 무시되는것이다.
1~ 1000까지의 우선도를 가질 수 있다.

# 오토레이아웃 구현시 TIP

• 이미지를 컨트롤누른상태에서 드래그한후 본인에게 터치를 놓으면 비율을 설정할 수 있게된다.
• Aspect Ratio 1:1로 설정할 수 있고 option키를 누르면 비율까지 확인해볼 수 있다.
• X, y축이 잡히고 크기가 잡이면 오토레아아웃은 완료가된다.
• 무언갈 설정했을때 노란색의 글씨가나오면 변경된사항이라는 뜻이니 update 동그라미표시를 누르면됩니다.
• 그리고 하나의 중심 축을 잡았으면 그기준을따라서 leading, trailing, top을 따라가는 방법도 있다. 그렇게 크기까지 잡힌다면 이 3가지로 해결해볼 수 있다.

# StackViewProperties 관한 특성

• Distribution: UIStackView.Distribution // 5가지가 있다. stackView안에 들어가는 요소들의 사이즈를 어떻게 분배할것인가에 대한 것임
  fill: 뷰들의 요소들을 최대한 가로로 늘립니다.
  만일 요소들중 가장 작은 요소와 공간이 비어있으면 허깅프리오리티 즉 마른친구들이 크게 늘어난다.
  fillEqually: 요소들이 같은 사이즈로 배정이 됩니다.
  fillPropertionally: 요소들이 자신이 가지고있는 콘텐츠 비율로 크기가 정해진다.
  equalSpacing: 요소들이 기본은 fill이며 spaing을 동일하게 설정한다
  equalCentering: 요소들의 중심 x축을 기준으로 일정하게 설정된다.
• Alignment: UIStackView.Alignment
  fill: 뷰들의 요소들을 최대한 세로로 늘립니다.
  leading: 앞을 기준으로 정렬이된다.
  top: 윗쪽을 기준으로 정렬된다.
  firstBaseline: text가 있으면 그 첫쨋줄을 기준으로 맞춰준다
  center: 말그대로 중심으로 맞춰줌
  Trailing: 뒷쪽으로 맞춰줌
  Bottim: 아랫줄로 맞춰줌
  lastBaseline: text가 있을경우 마지막 줄을 기준으로 맞춰준다.
• Spacing: CGFloat // 스택뷰안에 들어있는 요소들간의 거리
  
  
  
  

 

- Reference

- https://yagom.net/courses/autolayout/

오토레이아웃 정복하기 - 야곰닷넷

- https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/AnatomyofaConstraint.html

Auto Layout Guide: Anatomy of a Constraint