Autolayout 이해하기

오토 레이아웃 이해하기

• 오토 레이아웃은 동적으로 모든 뷰의 위치와 크기를 조정함
• 뷰에 있는 컨스트레인트를 기반으로하여 뷰의 크기와 위치를 조정함
• 예를 들어, 수평으로 이미지 뷰의 중앙에 놓인 버튼에 컨스트레인트를 주면, 버튼의 탑 엣지(top edge)는 항상 이미지의 바닥의 아래에서 8 포인트를 유지함

• 컨스트레인트 기반의 접근은 UI 내부 변화와 외부 변화에 동적으로 반응함

외부 변화

• 슈퍼뷰의 크기와 모양이 바뀔 때에 발생함

• 일반적인 외부 변화의 이유는 다음과 같음

  • 사용자가 윈도우 크기를 바꿈(OS X)
  • 사용자가 스플릿 뷰에 접근하거나 떠남(iOS)
  • 기기가 회전함(iOS)
  • 액티브 콜과 오디오 레코딩바가 사라지거나 나타남(iOS)
  • 다른 크기의 클래스를 지원하기 원함
  • 다른 크기의 스크린을 지원하기를 원함

• 이러한 변화들 대부분이 런타임에 발생함

내부 변화

• 내부 변화는 뷰나 컨트롤러의 크기가 변경될 때 발생함
• 내부 변경의 공통적인 이유들은 다음과 같음:
  • 앱에 의해 출력되는 컨텐츠가 변경됨 (뉴스 앱의 기사 )
  • 언어 국제화 ( 독일어 텍스트 길이 > 영어 텍스트 길이)
  • 레이아웃의 구성 또한 내부 변경의 요인이 된다. 다른 언어의 경우 다른 레이아웃의 방향을 사용한다. (영어 <-> 아랍어)
  • iOS앱이 동적 타입을 지원함 (사용자가 폰트 사이즈를 다르게하여 앱을 볼 수 있음)

오토 레이아웃 vs 프레임 기반 레이아웃

• 사실 오토레이아웃 이외에도, UI를 레이아웃하는 3가지 방법이 있음
• 첫 번째는, UI를 프로그래밍으로 레이아웃할 수 있음
• 두 번째는, 오토 리사이징 마스크를 사용함
• 세 번째가 오토레이아웃임

• 오토 레이아웃이 탄생하기 이전의 앱은 UI를 레이아웃하기 위하여 프로그래밍적으로 모든 뷰에 대한 프레임을 설정했음
• 여기서 말하는 프레임은 뷰의 원점, 높이, 너비를 슈퍼뷰의 좌표 시스템 내에서 정의한 것을 말함

 

• 예전에는 UI를 레이아웃하려면 모든 뷰의 위치와 크기를 계산해야했음, 뷰의 변경이 발생하면 다시 프레임을 재계산 했어야 했음
• 진정한 의미의 적응적인 유저 인터페이스를 만드는 것은 난이도가 매우 높음

• 오토 리사이징 마스크는 이러한 노력을 완화하기 위해 탄생됨
• 오토 리사이징 마스크의 역할은 슈퍼뷰이 프레임이 바뀔 때, 뷰의 프레임이 어떻게 변경할지를 정의하는 것임
• 오토 리사이징 마스크 덕분에 외부 변경에 대한 레이아웃의 생성이 간단해짐
• 하지만, 오토 리사이징 마스크는 상대적으로 작은 단위의 레이아웃을 지원할 뿐임
• 복잡한 유저 인터페이스의 경우, 프로그래밍적인 변경과 함께 오토리사이징 마스크의 수를 늘려야함
• 게다가 오토리사이징 마스크는 외부 변경에만 적용할 수 있음

• 여기에 오토 레이아웃은 완전히 새로운 패러다임을 제시함
• 왜냐하면, 기존의 뷰 프레임에 대한 고정관념을 깨고 관계를 정의하기 때문임
• 오토 레이아웃은 간단히 말해 UI 컨스트레인트를 정의하는 것임
• 컨스트레인트는 두 개의 뷰의 관계를 말함
• 이러한 컨스트레인트가 뷰의 관계를 가지고 뷰 간의 크기와 위치를 계산함

• 오토 레이아웃은 절차적 코드와 객체 지향 코드를 작성하는 로직과는 완전히 다름
• 다행히 오토레이아웃은 프로그래밍이 아님, 단지 두 개의 기본적인 원리를 이해하면 됨
• 첫 번째 단계는 컨스트레인트 기반의 레이아웃 뒤에 있는 로직을 이해하는 것
• 그 다음이 API를 배우는 것임