[iOS] iOS의 View 체계

View의 Frame과 Bounds? 어느 질문에도 나왔던 것. 평소 개발할 때는 별로 신경 안쓰고 하다가, View 자체를 이해하기 위해선 꼭 필요한 개념이 아닌가 싶어 정리해본다.

 

View를 알면,

• 원하는 모양으로 화면 구성할 수 있다.
• 화면 위에서 일어나는 Gesture를 관리할 수 있다.

뷰의 기본적인 역할

iOS에서 컨텐츠를 나타내기 위해 알아야 할 개념인 Window, View를 알아보자.

 

Window

• View를 위한 컨테이너 역할

View

• Window 내에서 컨텐츠를 보여줌
• 다른 View를 관리 및 구성
• Gesture Recognizer를 통해 터치 이벤트를 직접 처리할 수 있음
• View Hierarchy와 Parent View, Child View

뷰 계층(View hierarchy)

SuperView / SubView

뷰 계층의 생성과 관리

UIViewController는 스스로 화면에 표시되는 인스턴스가 아니므로, 자신이 운용할 View를 반드시 가지고 있음. UIViewController를 추가하면 자동으로 UIView가 포함되어 생성되는 이유가 그것임.

 

View를 생성할 때는 다음 두 가지 방법이 있다.

 

1. Interface Builder

Storyboard 상에서 직접 Drag and Drop

 

2. Code

• addSubView(_ :), insertSubview(_:at:), bringSubView(toFront:), sendSubview(toBack:)
• removeFromSuperView()

import UIKit

class ViewController: UIViewController {
	
		override func viewDidLoad() {
				super.viewDidLoad()

				let frame = CGRect(x: 60, y: 100, width:240, height: 120)
				let subView = UIView(frame: frame)

				subView.backgroundColor = UIColor.green

				view.addSubView(subView) // UIViewController는 자체 view를 가짐
		}
}

뷰의 좌표계

iOS의 좌표체계의 원점은 왼쪽 위 (0, 0)

Frame(프레임)

View의 크기와 위치를 SuperView의 좌표계를 기준으로 나타냄

 

Bounds(바운드)

View의 크기와 위치를 해당 View 자신의 좌표계를 기준으로 나타냄

 

Frame, Bounds 모두 CGRect 구조체를 통해 표현된다.

init(origin: CGPoint, size: CGSize)

Creates a rectangle with the specified origin and size.

init(x: CGFloat, y: CGFloat, width: CGFloat, height: CGFloat)

Creates a rectangle with coordinates and dimensions specified as CGFloat values.

 

 

 

Frame과 Bounds의 차이를 좀 더 명확하게 이해하기 위해 구글링을 해봤다.

Frame = a view's location and size using the parent view's coordinate system

• Important for: placing the view in the parent

Bounds = a view's location and size using its own coordinate system

• Important for: placing the view's content or subviews within itself

https://stackoverflow.com/a/28917673

Reference

• 부스트코스 - iOS 앱 프로그래밍 - 5. iOS의 View 체계 
• cocoa-whats-the-difference-between-the-frame-and-the-bounds