오토 레이아웃의 구조

출처(공식문서) : https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/index.html

🐶 서론

✔️ 용어

• Baseline
  오토 레이아웃에서 view 안에서 글자의 밑바닥 위치를 의미
  
• Leading
  오토 레이아웃에서 view 객체의 왼쪽 margin을 의미
  (단순히, 미국에서 글의 시작점이 왼쪽이므로 왼쪽을 leading이라 표현)
  
• Trailing
  오토 레이아웃에서 view 객체의 오른쪽 margin을 의미
• Safe Area
  device에서 화면을 표현할 수 있는 임계영역

✔️ 오토 레이아웃에서 Attribute는 두 가지로 분류된다

1. 크기 : width, height
2. 위치 : top, leading, centerX 등

🐯 Constraint 직접 설정하기

1. 딱 정하기

• border로부터 떨어진 거리
  다른 view(부모도 가능)의 border로부터 떨어진 거리로 설정

• center 정렬
  다른 view(부모도 가능)의 center를 기준으로 설정

• 높이/너비 비율 설정 (Aspect Ratio)
  height와 width의 비율을 설정

• 여러 개체를 같은 너비로
  view들을 묶어서 모두 같은 width/height를 갖게 하기 (Equal Widths/Heights)

• 여러 개체 중 가장 넓은 너비(Edge)로 모두 통일
  view들을 묶어서 이 중 가장 넓은 너비를 가진 view에 모두 맞추기 (Top/Leading Edges)

2. 딱 정하지 않고 범위로 주기

"N보다 크고 M보다 작다"와 같이 범위로 주는 방식.
당연히 홀로 쓰일 수 없고 명확한 제약을 가진 다른 view들에 의해 결정됨

3. Constraint 간 우선순위 설정

constraint는 중복될 수 있다. 이로 인해, 우선순위를 설정해줄 수도 있다
1부터 1000까지 부여할 수 있음 (숫자가 클수록 강하며 default: 1000)

2번 컨셉인 "범위로 주기"의 기본값을 줄 때 활용될 수 있다

[상황예시]

• 제약1 : 50보다 크다 (priority 1000)
• 제약2 : 70 (priority 750)

[결과]
-> 70이 가능한 상황이면 : '제약2'가 기본값처럼 적용되고
-> 70이 불가하면 : '제약1' 마음대로 설정한다

🐸 내부 Content 기반으로 설정하기

✔️ intrinsic content size를 가지는 요소들은 default size를 가진다

일반적인 view와 달리, Button/Label 등은 content를 가지므로 이를 기반으로 별도의 constraint를 주지 않더라도 자신의 size를 추측할 수 있다 ("intrinsic content size를 가진다"라고 표현)

주의할 점은, content를 가진다고 해서 모두 size를 추측할 수 있는 것은 아니므로 설정/상황을 고려해야 한다. (ex. text view는 스크롤 여부에 따라 갈린다)

✔️ 코드로 intrinsic size 부여하기

UIView 인스턴스를 예시로 intrinsic size를 부여해보자

// 1. UIView class 생성
// CustomView.swift
import UIKit

// 2. view를 @IBDesignable class로 지정
@IBDesignable
class CustomView: UIView {
	// 3. instrinsicContentSize 계산프로퍼티 재정의
	override var intrinsicContentSize: CGSize {
    	return CGSize(width: 10, height: 10)
    }
}

✔️ 내부 content가 잘 보이도록 유지하려는 힘 (CHCR)

• Content-Hugging
  외부에서 컨테이너 size를 늘릴 때, content보다 늘어나지 않으려고 버티는 힘

• Compression-Resistance
  외부에서 컨테이너 size를 줄일 때, content가 뭉개지게 줄어들지 않으려고 버티는 힘
  
  줄여서, CHCR은 컨테이너 자신이 가진 content를 지키려는 힘

이걸 어디다 쓰느냐?

[상황예시-Hugging]
Label 세 개가 나란히 있고, 서로 5pt씩 + Safe로부터 5pt씩 간격을 주었다. 여기까지만 설정하면 (intrinsic size가 작용하더라도) width를 설정해주어야 한다는 오류가 발생한다
문제는 여기서, 다른 Label은 막 늘어나도 괜찮은데 특정 Label은 content에 딱 맞게 더 늘어나지 않도록 유지시키고 싶을 수 있다.

[결과]
해당 Label에 가장 높은 Content-Hugging priority를 설정해주면, 나머지 Label들이 알아서 남는 공간을 채우기 위해 고민하게 된다

🐣 쉽게 적용하기

✔️ 제약에 맞게 위치 되돌리기

이렇게 오토레이아웃을 적용하고 위치를 임의로 옮기면 노란색이 뜬다
우측 하단의 refresh 버튼을 사용하면 원위치된다

✔️ Ctrl + Drag로 적용하기 (+Option키)

우측 하단의 메뉴를 사용하지 않고, 개체를 집어서 Ctrl + Drag하면 오토레이아웃 선택지 일부가 뜬다

추가로, 이 상태에서 Option키를 누르면 detail 문구가 추가된다

기타 : 여러 device의 preview 한 번에 보기

상단 탭 중 Editor -> Preview에서 device 추가 가능