[Swift] AutoLayout 톺아보기

AutoLayout

constraints : 제약
AutoLayout계의 바이블 - 김태완 님의 AutoLayout 강의
예전에 오토레이아웃 공부할 때 작성한 자료가 있어 올립니다 후훗

autoLayout 없으면 view의 크기는 정해진 w, h를 유지함
오토레이아웃을 쓸 땐 위치, 여백을 사용함

1. view의 크기나 위치가 변경되었을 때

• 처음으로 되돌리기 : Editor > Updates Frame (⌥⌘=)
• 변경한 그대로 적용하기 : 변경한 view 선택 후 Resolve Auto Layout issues > Update Constraint Constant

2. View가 두개있을 때 issue

• UIView를 두개 배치한 후 constraints를 add했을 때 빨간 선이 생기게 된다
  그 이유는 view의 내부는 비어있는 상황에서 실제 view가 얼마만큼의 크기를 가지고 있는지 가늠할 수 없기 때문에(크기 추정 불가) issue가 발생한다
  • 대략적인 크기 가늠 불가
• 요구조건에 따라 Width/Height를 지정하여 issue를 해결한다
• 1번 뷰에 width를 지정해준다면 1번뷰는 iphone이 바뀌어도 width가 고정되며 2번뷰는 상대 width를 갖는다
• Equal Height를 지정했는데 오류가 나는 경우 2둘 중 하나의 view에 설정된 Top Constraints를 해제한다

3. Multiplier

• 연결하는 방식에 따라 비율이 달라진다
• 1->2로 연결하느냐, 2->1로 연결하느냐에 따라 First Item, Second Item이 정해지고 비율이 설정된다

alignment + multiplier

• 부모뷰를 기준으로 이동한다
• 하나만 선택했을 때 가로정렬, 세로 정렬을 선택할 수 있다 (Horizontally in Container, Vertically in Container 설정)
• Align Center X : 0.1로 하면 왼쪽으로 이동, 1.5로 하면 오른쪽으로 이동
• Align Center Y : 0.1로 하면 위로 이동, 1.5로 하면 아래로 이동

4. Basic Constraints

• Constraints를 지정할 땐 w, h, x, y를 지정해야한다
• 위치나 크기만 지정한 경우 issue가 발생한다

5. view 겹치게 하기

2개 이상의 겹쳐진 뷰를 만들 때 단순하게 자식뷰의 multiplier 값을 변경하는 것으로 한다면
부모 view가 어떤 모양을 가지거나 라운드 처리를 해야하는 등의 view라면 inspector에서 clip to bounds속성을 체크하게된다
이러면 부모뷰에서 겹쳐지지않은 영역은 잘리게된다(동등하지 않은 레벨의 정렬)

view를 겹쳐지게 하기 위해서 자식 뷰를 부모 뷰에서 꺼내고 두 뷰를 선택한 뒤 Top Edges와 Horizontal Centers를 체크한다(동등한 레벨의 정렬 구성)
그리고 겹칠 뷰의 Align Center Y의 Second Item을 Center Y로 변경한다

6. priority

• priority는 우선 Required(1000), High(750), low(250)이 기본으로 있고 원하는 만큼 값을 입력할 수 있다
  일단 기본으로 1000 priority가 주어지는데 이것은 강한 우선순위로 다른 우선순위에게 영향을 준다

• Hugging : 내 컨텐츠에 대한 본연의 사이즈 유지 우선순위

• Compression Resistance : 배치한 방향에 대한 우선순위 (작지않게 버티겠다)

  • 우선순위가 크면 내 크기를 유지하고
  • 우선순위가 작으면 내 크기를 작게한다
    숫자가 높을 수록 우선순위가 높다
    낮은 우선순위는 늘어나게된다

7. portrait(세로), landscape(가로)

• constraints는 세로 모드일 떄와 같이 동일하게 지정
• Vary for Traits 메뉴를 통해 width/height 변경에 따라 적용가능한 디바이스를 확인할 수 있다
• Vary for Traits에서 가로/세로 모드일 때 적용하고 싶은 대로 뷰를 다시 정의한다

8. StackView

• 한번에 설정 가능

9. stretching

• x, y, w, h에 대한 설정 가능
• 값이 0일 때는 시작점부터 늘어나게하는 것(제약없이 이미지가 늘어남, 단순한 이미지 확대)
  • width를 0.5로 한 경우 시작점부터 50%영역까지만 늘어남
  • y를 0.5로 한 경우 50%영역이상 부분만 늘어남