[iOS] Autolayout과 Constraints

TIL(Today I Learned)

iOS의 UI 공부를 시작하면서 UI 컴포넌트들을 배치해보기 시작하였습니다.
역시나 안드로이드와 동일하게 각 컴포넌트들의 위치를 드래그하여 지정하면 기기에 따라 원하는 배치가 나오지를 않고 심할경우 아예 화면에서 사라져 버리는 경우가 나타났습니다.
조언들을 참고하여 보니 Autolayout을 사용하여 제약조건을 걸면 안드로이드의 ConstraintLayout을 사용할때와 같은 결과를 얻을 수 있고, 심지어 사용법도 비슷한 것 같았습니다.

AutoLayout을 먼저 알아보자

• iOS의 UI는 상위뷰(SuperView)안에 여러 하위뷰(SunView)가 들어간 트리 구조로 이루어져 있어서 알맞은 UI의 레이아웃을 잡으려면 개발자가 모든 뷰의 위치와 크기를 지정해줘야함
• 따라서 다양한 크기의 화면에도 문제 없는 화면을 구성하려면 위치와 크기를 상대적으로 지정해줄 필요가 있음
• 오토레이아웃의 목적은 모든 뷰에 대해 4개의 값을 알아내는 것
  • X축의 위치 / Y축의 위치 / X축의 크기(너비) / Y축의 크기(높이)

AutoLayout의 핵심은 조건(Constraints)

• 개발자는 절대값으로 X/Y축의 위치/크기를 결정해주는 대신, 조건을 설정해서 오토레이아웃 엔지이 알아서 값을 계산하도록 요청
• iOS가 모든 뷰의 4가지 값(= X축/Y축의 위치/크기)를 구할 수 있도록, 개발자는 뷰와 뷰 사이의 상대적인 조건을 여러개 전달
• 즉, 어떤 뷰 속성 = a * 다른 뷰 속성 + b

뷰의 속성

• Constraints(조건)는 뷰의 Attributes(속성)간 관계를 설정 (출처: Apple Developer)

위치 속성

• Top / Bottom / Leading / Trailing - 뷰 직사각형의 상하좌우 테두리
• Center X / Center Y - 가로, 세로 중심축

크기 속성

• Top과 Bottom 사이의 높이, Leading과 Trailing 사이의 너비
• 크기 속성에 있는 Hegiht와 Width는 NotAnAttribute에 대한 관계로 나탈낼 수 있음(상수로 지정 가능)
  • Height = (0 * NotAnAttribute) + 40 / ✅
  • Height = (0 * NotAnAttribute) + 450 / ✅
• 위치 속성은 상수로 설정 불가
  • Top = (0 * NotAnAttribute) + 200 / ❌
  • Top = (1.0 * 다른뷰의 Top) + 20 / ✅
• 크기 속성과 위치 속성은 같은 조건에 사용 불가
  • Top = B의 Height + 100 / ❌

    View.height = 0.0 * NotAnAttribute + 40.0 // 높이를 40포인트로 지정한다.
    Button2.leading = 1.0 * Button1.trailing + 8.0 // 두 버튼 사이의 간격을 8포인트 띄운다.
    Button1.leading = 1.0 * Button2.leading + 0.0 // 두 버튼의 왼쪽을 정렬한다.
    Button1.width = 1.0 * Button2.width + 0.0 // 두 버튼의 너비를 똑같이 만든다.
    View.centerX = 1.0 * Superview.centerX + 0.0 // 상위 뷰와 가운데 정렬을 한다.
    View.height = 2.0 * View.width + 0.0 // 높이를 너비의 두배로 만든다.
    

• X축 기준으로 Leading, Trailing, Width, Center X 이중 2개를 필수 지정
• 요약
  1. 테두리 속성 1개 (Leading or Trailing) + 테두리 속성 1개 (Leading or Trailing)
  2. 테두리 속성 1개 (Leading or Trailing) + 너비 속성 (Width)
  3. 테두리 속성 1개 (Leading or Trailing) + 중심축 속성 (Center X)
  4. 너비 속성 (Width) + 중심축 속성 (Center X)