[iOS] iOS의 뷰(View) 체계

iOS View

• iOS에서 화면에 앱의 콘텐츠를 나타내기 위해 윈도우와 뷰를 사용한다.
• 윈도우는 그 자체로 콘텐츠를 표현할 수 없으며 애플리케이션의 뷰를 위한 컨테이너 역할을 한다.
• 뷰는 UIView 클래스 또는 UIView 클래스의 하위클래스(Subclass)의 인스턴스이다.
• 뷰는 또 다른 뷰를 관리하고 구성하기 위해 사용되기도 한다.

뷰 계층(View hierarchy)

하나의 뷰가 다른 뷰를 포함할 때, 두 뷰 사이에 부모(superview)-자식(subview) 관계가 생성된다. 부모-자식 관계 형성은 애플리케이션의 시각적 모습과 동작 모두 에 영향을 미친다.

슈퍼뷰와 서브뷰의 관계에서 서브뷰가 불투명할 경우 아래 그림과 같이 슈퍼뷰가 서브뷰에 가려진다.

슈퍼뷰는 하나의 배열 안에 서브뷰를 순서대로 저장한다.
만약 슈퍼뷰에 포함된 두 서브뷰가 불투명하고 서로 겹치게 되면,아래 그림과 같이 겹쳐지는 영역에 따라 색이 다르게 표시된다.

---

뷰 계층의 생성과 관리

OS 애플리케이션에서 뷰 계층을 만드는 방법에는 인터페이스 빌더를 이용하는 방법과 코드를 작성하는 방법이 있다.
코드작성 방식을 사용할 경우 서브뷰를 부모뷰에 추가하기 위해, 부모뷰의 addSubView(_:) 메서드를 호출한다. 이 메서드는 해당 서브뷰를 서브뷰 목록의 마지막에 추가한다. 부모뷰의 서브뷰를 제거하기 위해서는 서브뷰의 removeFromSuperView() 메서드를 호출한다.
이 외에도 서브뷰를 부모뷰 목록의 중간에 삽입하기 위해 insertSubview(_:at:), 부모뷰 내에 이미존재하는 서브뷰를 정렬하기 위해 bringSubView(toFront:), sendSubview(toBack:) 등의 메서드들을 호출할 수 있다.

코드로 뷰 만들기

서브뷰를 부모뷰에 추가하기 위해서는 부모뷰의 addSubview 메서드를 호출했다.
코드에서 self.view는 메인 스토리보드에 있는 ViewController의 SuperView를 나타낸다.(self는 생략가능)

서브뷰 제거하기 removeFromSuperview 메서드 호출.

---

뷰의 좌표계, 프레임과 바운드

UIKit에서 기본이 되는 좌표계는 좌측 상단 모서리를 원점으로 하며, 제일 왼쪽의 제일 위의 지점이 (0, 0)다. 원점으로부터 아래쪽, 오른쪽 방향으로 확장된다. 좌표값은 해상도와 상관없이 콘텐츠의 위치를 잡는 부동소수점을 사용하여 나타낸다. 뷰의 프레임(frame)은 뷰의 크기와 위치를 슈퍼뷰의 좌표계를 기준으로 나타낸다. 바운드(bounds)는 뷰의 크기와 위치를 해당 뷰 자신의 좌표계를 기준으로 나타낸다.

CGRect

뷰의 프레임(frame)과 바운드(bounds)는 CGRect라는 구조체를 통해서 표현된다. CGRect는 사각형의 크기와 위치에 대한 정보를 담고 있다.

• CGRect의 origin프로퍼티는 CGPoint 타입으로 사각형의 시작점을 나타낸다.
• CGRect의 size프로퍼티는 CGSize타입으로 사각형의 높이와 너비를 나타낸다.
• CGPoint는 좌표를 표현할 수 있는 x와 y를 갖고 있다.
• CGSize은 위치와 높이의 값인 width와 height를 갖고 있다.
• CGPoint의 x, y와 CGSize의 width, height는 모두 부동소수점 타입인 CGFloat으로 표현된다.

---

<참고>

• 부스트코스 - iOS 앱 프로그래밍 https://www.boostcourse.org/mo326/lecture/16874/
• 애플 공식 문서 https://developer.apple.com/documentation/coregraphics/cgrect