View hierarchy

in iOS on BoostCourse


개요

뷰의 기본적인 역할

iOS에서 화면에 애플리케이션의 콘텐츠를 나타내기 위해 윈도우와 뷰를 사용한다. 윈도우는 그 자체로 콘텐츠를 표할 수 없지만 애플리케이션의 뷰를 위한 컨테이너 역할을 한다. 뷰는 UIView 클래스 또는 UIView 클래스의 하위 클래스(Subclass)의 인스턴스로 윈도우의 한 영역에서 콘텐츠를 보여준다. 뷰가 나타낼 수 있는 콘텐츠는 이미지, 문자, 도형 등과 같이 다양하다. 뷰는 또 다른 뷰를 관리하고 구성하기 위해 사용되기도 한다.

뷰는 gesture recognizer를 사용하거나 직접 터치 이벤트를 처리할 수 있다. 또한 view hierarchy 구조에서 부모 뷰는 자식 뷰의 위치와 크기를 관리한다.

나타내고자 하는 유형의 콘텐츠에 적합한 뷰를 여러 개 사용하여 view hierarchy 구조를 구성하고 이를 통해 콘텐츠를 보여주는 것이 좋다. 예를 들어 UIKit에는 이미지, 텍스트, 그리고 다른 유형의 콘텐츠를 나타내는 뷰가 포함되어 있다.

View hierarchy

뷰 계층 구조와 서브뷰 관리

뷰는 자신의 콘텐츠를 보여주는 것과 더불어, 다른 뷰를 위한 컨테이너로써의 역할도 한다. 하나의 뷰가 다른 뷰를 포함할 때, 두 뷰 사이에 부모(superview)-자식(subview) 관계가 생성된다. 이 관계 형성은 애플리케이션의 시각적 모습과 동작 모두에 영향을 미친다. 예를 들어,

  1. 슈퍼뷰-서브뷰 관계에서 서브뷰가 불투명할 경우, 슈퍼뷰가 서브뷰에 가려진다.
  2. 서브뷰가 반투명할 경우, 서브뷰와 슈퍼뷰의 콘텐츠가 서로 섞여 보여진다.
  3. 슈퍼뷰는 하나의 배열 안에 서브뷰를 순서대로 저장한다. 만약 하나의 슈퍼뷰에 포함된 두 서브뷰가 서로 겹치게 되면, 나중에 추가된 서브뷰가 맨 위에 보여지게 된다.

뷰 계층의 생성과 관리

뷰 계층을 만드는 방법으로, 인터페이스 빌더를 이용하는 방법과 코드로 작성하는 방법이 있다.

코드 작성 방식의 메서드

  • 슈퍼뷰의 addSubView(_ :) : 해당 서브뷰를 서브뷰 목록의 마지막에 추가한다.
  • 서브뷰의 removeFromSuperView( ) : 슈퍼뷰의 서브뷰를 제거
  • insertSubview(_: at:) : 서브뷰를 부모뷰 목록의 중간에 삽입하기 위해 사용
  • bringSubView(toFront:), sendSubview(toBack:) : 슈퍼뷰에 이미 존재하는 서브뷰를 정렬하기 위해 사용

인터페이스 빌더 예제

  1. 프로젝트 생성시 기본으로 생성되는 ViewController를 선택하고 Delete 키를 눌러 삭제한다.
  2. 객체 라이브러리에서 View Controller 객체를 캔버스로 Drag & Drop 한다. – UIViewController는 스스로 화면에 표시되는 인스턴스가 아니므로, 자신이 운용할 View를 반드시 가지고 있어야 한다. 이 때문에 인터페이스 빌더에서 ViewController를 추가하면 View가 자동으로 추가된다.
  3. View를 선택한 상태에서, 오른쪽 Document의 Label 항목에 ‘SuperView’ 를 입력한다 (편의를 위해)
  4. 추가된 View Controller를 선택하고, 오른쪽 아래 방향 화살표 인스펙터 창에서 ‘Is Inital View Controller’ 체크박스를 체크한다. 캔버스의 뷰 컨트롤러의 subperview 옆에 화살표가 생긴 것을 확인할 수 있다.
  5. 객체 라이브러리에서 View를 SuperView로 Drag & Drop 한다.
  6. View가 생성되고, SuperView의 서브뷰로 추가된 것을 왼쪽 창에서 볼 수 있다.

뷰의 좌표계

UIKit에서 기본이 되는 좌표계는 좌측 상단 모서리를 원점으로 하며, 원점으로부터 아래쪽, 오른쪽 방향으로 확장된다. 좌표값은 해상도와 상관없이 콘텐츠의 위치를 잡는 부동 소수점을 사용하여 나타낸다.

프레임과 바운드

위에 말했던 원점의 좌표는 (0,0) 이고, 수평축은 x로, 수직축은 y로 표현한다. view의 frame은 뷰의 크기와 위치를 슈퍼뷰의 좌표계를 기준으로 나타낸다. view의 bounds는 뷰의 크기와 위치를 해당 뷰 자신의 좌표계를 기준으로 나타낸다. view의 frame과 bounds는 CGRect라는 구조체를 통해 표현된다. CGRect은 사각형의 크기와 위치에 대한 정보를 가지고 있다. CGRect의 origin 프로퍼티는 CGPoint 타입으로 사각형의 시작점을 나타낸다. GCRect의 size 프로퍼티는 CGSize 타입으로 사각형의 높이와 너비를 나타낸다. CGPoint의 x, y와 CGSize의 width, height는 모두 부동 소수점 타입인 CGFloat으로 표현된다.

CGRect