[iOS] View 체계 - Window&View, Frame vs Bounds, 디버깅 툴

iOS의 View 체계 - 뷰 계층, 뷰의 좌표, 프레임 vs 바운드, 뷰 계층 디버깅 툴

---

iOS 앱 프로그래밍

 

1장에서 음악재생 앱을 만들면서 아래의 내용들을 학습했습니다.

 

• 에셋(Asset) - 앱 아이콘, 이미지 파일, 데이터 파일을 관리, 앱 실행시 파일에 쉽게 접근할 수 있도록 도와준다.
• 앱 시닝(App thinning)과 앱 슬라이싱(App slicing) - 다양한 디바이스에서 빠르게 다운로드할 수 있도록 하는 최적화 기술 
• Cocoa Touch, UIKit, Foundation - iOS 앱 개발에 필요한 프레임워크 
• Autolayout 을 적용하며 UI를 개발하는 법 - 인터페이스 빌더 vs 코드로 작성
• iOS의 View 체계 - 뷰 계층, 뷰의 좌표, 프레임 vs 바운드, 뷰 계층 디버깅 툴
• 디자인 패턴과 MVC 패턴 - 싱글턴 패턴과 앱개발에서의 MVC 패턴을 중점적으로
• AVAudioPlayer, Timer - 음악 파일을 재생하기 위한 AVAudioPlayer, 시간초를 재기 위한 Timer

---

👀 iOS 앱에서 컨텐츠를 보여주기 위한 Window & View

• iOS 앱 화면에서 보는 콘텐츠는 Window 와 View 를 사용해 나타낸다.
• Window 는 그 자체로 콘텐츠를 표현할 수 없지만, View 를 위한 컨테이너 역할을 한다.
• View 는 UIView 클래스 혹은 하위클래스의 인스턴스로 Window 의 한 영역에서 콘텐츠를 보여준다.
• View 는 이미지, 문자, 도형, 또 다른 뷰 등의 콘텐츠를 나타낼 수 있다.
• View 는 gesture recognizer 를 사용하거나 터치 이벤트를 처리할 수 있다.
• View 는 뷰 계층(View hierarchy) 구조에서 부모뷰와 자식뷰의 위치와 크기를 관리한다.

💡 View 는 iOS 앱에서 컨텐츠를 보여주기 위한 필수 요소로, 이미지, 문자, 도형, 또 다른 뷰 등의 콘텐츠를 보여줄 수 있다. View 계층의 최상단은 UIWindow 객체로, 시각적으로 표현되지 않지만 View 를 위한 컨테이너 역할을 한다.

 

✔︎ 뷰 계층 (View hierarchy) ?

View 는 자신의 콘텐츠를 보여주기도 하지만, 다른 뷰를 위한 컨테이너로써의 역할도 한다. 만약 특정 뷰가 컨테이너 뷰로 다른 뷰를 포함할 때, 부모 - 자식 관계가 생기며, 이러한 것을 뷰 계층이라고 한다.

• Sub View 가 불투명한 경우 -> Super view 가 Sub view 에 가려진다.
• Sub View 가 반투명한 경우 -> Super view 와 Sub view 가 함께 보여진다.

💡부모 뷰 = Super view, 자식 뷰 = Sub view

 

Sub View 가 여러개인 경우? 

Super View 는 하나의 배열에 여러 개의 Sub view 를 순서대로 저장한다. 만약 하나의 Super view 에 불투명한 sub view 두 개가 겹친다면, 나중에 추가된 sub view 가 맨 위에 보인다. 두 sub view 모두 반투명한 경우 모든 뷰가 섞여보이게 된다.

 

✔︎ 뷰 계층을 만드는 방법?

Autolayout 을 지정하는 경우와 마찬가지로, 뷰 계층을 만드는 방법도 인터페이스 빌더(Storyboard)를 이용하는 방법, 코드로 작성하는 방법 두 가지가 있다. 

 

코드로 뷰 계층 생성/관리하기

 

• Sub View 를 SuperView 에 추가하기 :: SuperView.addSubView(_:) 메서드 호출
  추가된 서브뷰는 슈퍼뷰의 서브 뷰 목록 맨 마지막에 추가된다.
  서브 뷰 목록의 특정 인덱스에 삽입하고 싶을 경우, SuperView.insertSubView(_at:) 메서드를 이용
• SuperView 에서 SubView 제거하기 :: SubView.removeFromSuperView() 메서드 호출
• SuperView 의 서브 뷰 목록을 정렬하기 :: bringSubView(toFront:), sendSubView(toBack:) 메서드를 이용

 

인터페이스 빌더를 이용해서 뷰 계층 생성/관리하기

 

• UI 객체 라이브러리에서 기존의 View 객체로 드래그앤 드랍으로 뷰 계층을 추가한다.
• 파란색 SuperView 내에 SubView 로는 Label, View 가 존재한다.
• 흰색 SubView 는 Label 의 SuperView 가 된다.

 

인터페이스빌더로 뷰 계층 확인하기

 

🤔 인터페이스 빌더에서 View Controller 객체를 추가하면 왜 View 가 자동으로 추가될까?

 

UIViewController 는 스스로 화면에 표시되는 객체가 아니므로, 자신이 관리할 (콘텐츠를 보여줄) View 를 반드시 갖고 있어야한다. 그렇기 때문에 인터페이스빌더에서 View Controller 객체를 추가할 경우, View 가 자동으로 추가된다.

---

✏️ View 의 좌표계와 Frame vs Bounds

• UIKit 에서 기본 좌표계는 좌측 상단 모서리를 원점으로 하며, 원점으로부터 아래쪽, 오른쪽으로 갈수록 값이 커진다.
• View 의 프레임(Frame) 은 View 의 크기와 위치를 SuperView 의 좌표계를 기준으로 나타낸다.
• View 의 바운드(Bounds) 는 View 의 크기와 위치를 해당 뷰 자신의 좌표계를 기준으로 나타낸다.
• View 를 회전할 경우, Frame 은 변경될 수 있지만, Bounds 는 변경되지 않는다.

View Programming Guide for iOS

 

• 아래 이미지에서 SubView 의 Frame 값을 보면, SuperView 기준으로 값이 나타나는 것을 확인할 수 있다.
• SubView 의 Frame 좌표를 (0, 0) 으로 설정하더라도, SuperView 밖으로 벗어나지 않는다. 
• SuperView 의 Frame 값은 최상단 View 인 원점 좌표계 기준으로 값이 나타날 것이다.

Frame 값 더 자세하게 확인해보기!

 

✔︎ View 의 Frame, Bounds 는 CGRect 라는 구조체를 통해 표현된다.

 

• CGRect :: 사각형의 크기와 위치에 대한 정보를 담고 있는 구조체
  * CGRect :: (x, y, width, height) 
• CGRect.origin (property) :: CGPoint 타입으로 사각형의 시작점을 저장하고 있다.
  * CGPoint :: (x, y) 값으로 좌표 표현
• CGRect.size (property) :: CGSize 타입으로 사각형의 높이와 너비를 저장하고 있다.
  * CGSize :: (width, height) 값으로 크기 표현

뷰를 정의하기 위해서는 1) 뷰가 어디에 그려져야 할지, 2)  뷰가 어떤 크기로 그려져야 할 지 알아야 한다.
1) 뷰의 시작점 = CGPoint = x, y 좌표
2) 뷰의 크기 = CGSize = width, height 크기

 

🤔 뷰의 좌표계에서 프레임과 바운드가 각각 있는 이유는 뭘까요? 어느 상황에서 프레임을 쓰고, 바운드를 쓰면 좋을지 생각해봅시다.

 

Frame 을 이용할 경우

 

 

• Super View 기준으로 뷰를 배치해야 할 경우. 즉, UIView 의 위치나 크기를 설정하는 경우
• 실제로 Storyboard 에서도 View 위치 지정 시 frame 값을 이용한다.

 

Bounds 를 이용할 경우

 

• View 내부에 그림을 그려야 할 경우
• View 를 회전한 경우에 View 의 크기를 알고 싶을 때 (View 내부 좌표이므로 값이 변하지 않는다)
• 해당 View 의 SubView 들을 정렬하는 등 내부의 뷰들의 위치를 변경할 경우

 

---

💡 View Hierarchy Debug Tool

View Hierarchy Debug Tool 은 뷰가 어떻게 구성되어 있는지, 어떻게 쌓여있는지 확인할 수 있는 툴이다. 사이즈 인스펙터로 확인해보면, Autolayout 으로 설정한 제약이 어떤게 있는지, Frame/Bounds 값들을 확인할 수 있다.

* 뷰가 복잡하게 꼬인다거나, 오토레이아웃이 잘못 적용된다 싶을때 꼭 확인하기

* 뷰 계층의 맨 하단(왼쪽)을 보면 UIWindow 가 깔려있다.

---

아래의 질문들에 명확히 대답할 수 있도록 하기!

• Bounds 와 Frame 의 차이점을 설명하시오.
• View 객체에 대해 설명하시오.
• UIView 에서 Layer 객체는 무엇이고 어떤 역할을 담당하는지 설명하시오.
• UIWindow 객체의 역할은 무엇인가?

---

참고 링크

• View Programming Guide for iOS
• [cskim님 블로그] Frame vs Bounds 설명이 잘 되어있음

 

• [Zedd님 블로그] Frame vs Bounds 언제 이용할지 설명이 잘 되어있음