이 포스팅은 iOS BoostCourse 시리즈 23 편 중 3 번째 글 입니다.

  • Part 1 - 01: Asset, App thinning
  • Part 2 - 02: Foundation, UIKit
  • Part 3 - This Post
  • Part 4 - 04: View 체계
  • Part 5 - 05: 디자인 패턴
  • Part 6 - 06: MVC
  • Part 7 - 07: Apple Development Documents
  • Part 8 - 08: Human Interface Guidelines
  • Part 9 - 09: 화면 전환
  • Part 10 - 10: 뷰의 상태 변화 감지
  • Part 11 - 11: Delegation
  • Part 12 - 12: Singleton
  • Part 13 - 13: Target-Action
  • Part 14 - 14: Gesture Recognizer
  • Part 15 - 15: TableView
  • Part 16 - 16: Segue
  • Part 17 - 17: Json 다루기
  • Part 18 - 18: PhotoKit
  • Part 19 - 19: 동시성, 비동기, 병렬 프로그래밍
  • Part 20 - 20: OperationQueue
  • Part 21 - 21: SchrollView
  • Part 22 - 22: Naviagtion item, Bar button item
  • Part 23 - 23: CollectionView
▼ 목록 보기

목차

▼ 내리기

MVC

  • Model
    • 데이터를 모아두는 곳
  • Controller
    • 데이터와 뷰사이에서 어떻게 제어하고 보여줄지를 결정
  • View
    • UI를 구성하는 클래스

오토 레이아웃

  • View의 제약사항을 바탕으로 모든 뷰의 크기와 위치를 동적으로 계산함
  • 외부 변경, 내부 변경에 동적으로 반응하는 인터페이스를 가능하게 한다.

외부 변경

  • Split View를 사용하거나, 사용하지 않는경우
  • 장치를 회전하는 경우
  • 활성화 콜, 오디오 녹음 바가 보여지거나 사라지는 경우
  • 다른 크기의 클래스를 지원하기 원하는 경우
  • 다른 크기의 스크린을 지원하기 원하는 경우

이러한 상황의 특징은 대부분 실행시간에 발생할 수 있다는 것이다. 그렇기 때문에 동적인 응답이 요구된다.

다른 스크린을 크기를 지원하는 것은 사실 스크린 크기가 실행시간에 많이 변경되지 않기 때문에 동적인 응답을 요구하는 것은 아닐 수 있다. 그렇지만 이러한 적응형 인터페이스를 만들면, 다양한 기기에서 모두 동일하게 작동할 수 있다. 그리고 오토레이아웃은 아이패드 내부 변경에서 슬라이드와 분할 뷰를 지원하는 핵심 요소이다.

쉽게 얘기하면, 화면 전환, 기기 변경과 같은 부분은 앱 개발자가 다룰 수 없는 부분이다. 이건 제작사에서 주는 값 자체를 가지고 내가 맞춰야 하는 부분이다. 그래서 OS 단에서 이러한 외부 변경에 대해 체크하고 달라진 값을 가져와서 처리를 해주어야 한다.

내부 변경

  • 애플리케이션 변경에 의해 콘텐츠가 보여지는 경우
  • 애플리케이션이 국제화를 지원하는 경우
    • 다국어 지원하면 레이아웃의 위치가 동적으로 변하게 됨
  • 애플리케이션이 동적 타입을 지원하는 경우

애플리케이션 콘텐츠가 변경되었을 때, 새로운 콘텐츠는 예전과 다른 레이아웃을 필요로 할 수 있다. 그러니까 예를 들어 인스타, 트위터 같은 경우에 사용자의 데이터를 기반으로 요소의 크기가 달라지는 경우가 있다. 이렇게 데이터에 따라서 보여주는 UI 자체가 변경되어야 할 필요가 있는데, 이런 상황을 내부 변경이라 한다. 외부 변경의 경우 OS 영역에서 달라지는 값자체를 내가 받아서 변경해야 하는데, 내부 변경의 경우 app 내에서 발생하는 UI 변화이기 때문에 이는 개발자가 자체적으로 처리할 수 있다.

왜 필요한가?

인터페이스의 좌표가 절대적이 아니고, 상대적으로 필요한 경우

  • 외부
    • 애플리케이션이 지원해야 하는 기기의 스크린 화면이 다양한 경우
    • 애플리케이션이 회전할 수 있는 경우
    • 상태표시줄에 전화중임을 나타내는 active call과, 녹음 중인 오디오바가 보여지고 사라지는 경우
      • OS 단에서 들어오는 외부 변경 사항임
      • 이런 상황에 대비해서 UI변경할 것을 정의해두어야 함
  • 내부
    • 다국어 지원으로 변경되는 width를 제어해야 하는 경우
    • 데이터 크기에 따라 요소의 크기가 변경되어야 하는 경우
    • 콘텐츠가 동적으로 보여져야 하는 경우

오토 레이아웃 속성

imageauto layout

안전 영역

imagesafe area

  • 콘텐츠가 상태바, 네비게이션 바, 툴바, 탭바를 가리는 것을 방지하는 영역
  • 표준 시스템이 제공하는 뷰는 자동적으로 가이드를 준수함

제약 (Constraint)

imagecontraint equation

  • Item1 : 방정식에 있는 첫 번째 아이템(B View) 이다. 첫 번째 아이템은 반드시 뷰 또는 레이아웃 가이드이어야 한다.
  • Attribute1 : 첫번째 아이템에 대한 속성. 이 경우, B View의 리딩.
  • Multiplier : 속성 2에 곱해지는 값. 이 경우 1.0 .
  • Item2 : 방정식에 있는 두 번째 아이템(A View)
  • Attribute2 : 두번째 아이템에 대한 속성. 이 경우, A View의 트레일링.
  • Constant : 두번째 아이템의 속성에 더해지는 상수 값.

해석하면, B의 리딩은 A의 트레일링의 1.0배에 8.0을 더한 위치가 된다.

고유 콘텐츠 크기

  • 뷰가 원래 가지고 있는 크기를 말함
  • 예를 들어 text가 들어가 있는 크기 자체가 UIlabel의 고유 크기임
  • ImageView의 경우 이미지의 크기가 고유 콘텐츠 크기임

제약 우선도 (Constraint Priority)

  • 고유 콘텐츠 크기를 제한할 때 우선 순위를 반영하는 것
  • 예를 들어 콘텐츠 크기가 뷰사이즈를 넘어갔어