여러 프로젝트들을 진행하면서 UIView를 수도 없이 접하고 사용하였다. 하지만 이 객체의 속성과 역할들에 대해서는 자신있게 설명할 수 없었다. UIView를 제대로 알지못해 사용하여 미안한 마음과 함께 애플공식문서를 통해 UIView를 알아보기로 하였다.
UIView
An object that manages the content for a rectangular area on the screen.
화면의 직사각형 영역에 대한 컨텐츠를 관리하는 객체입니다.
1. Declaration
@MainActor class UIView : UIResponder2. Overview
View는 앱의 유저 인터페이스(줄여 UI)에 있어서 가장 기본적인 구성 요소이며, UIView 클래스 모든 view의 공통적인 동작을 정의합니다. view객체는 객체의 bounds 사각형 안에서 컨텐츠를 만들며 이 컨텐츠와의 모든 상호 작용들을 처리합니다.
UIView 클래스는 background color(배경색)을 설정할 수 있는 구체적인 클래스입니다. 또한 이 클래스를 상속하여 좀 더 정교한 컨텐츠를 그릴 수 있습니다. 앱에서 흔히 보이는 레이블, 이미지, 버튼 및 기타 UI요소들을 나타내려면 직접 만드는 것보단 UIKit 프레임워크가 제공하는 view를 상속한 것들을 사용하세요. (버튼, 레이블, 이미지 등 모두 UIView를 상속하여 만든 객체들)
view객체는 앱을 통해 사용자와 상호 작용하기 위한 가장 주된 방법이기 때문에 많은 책임이 따릅니다. 아래 내용들을 살펴보세요.
- Drawing and animation
- Views draw content in their rectangular area using UIKit or Core Graphics.
- You can animate some view properties to new values.
- View들은 UIKit또는 Core Graphics를 이용하여 직사각형 영역안에 컨텐츠를 그립니다.
- view의 속성들을 새로운 값으로 애니메이션 할 수 있습니다.
- Layout and subview management
- Views may contain zero or more subviews.
- Views can adjust the size and position of their subviews.
- Use Auto Layout to define the rules for resizing and repositioning your views in response to changes in the view hierarchy.
- View들은 0개 이상의 subview를 포함합니다.
- view들은 그들의 subview의 size나 position을 조절할 수 있습니다.
- 오토레이아웃을 사용하여 view의 계층의 변화에 따라 view의 크기와 위치를 변경하는 룰을 정합니다.
- Event handling
- A view is a subclass of UIResponder and can respond to touches and other types of events.
- Views can install gesture recognizers to handle common gestures.
- view는
UIResponder를 상속받아 터치 및 다른 이벤트에 대해 응답할 수 있습니다. - 일반적인 제스쳐를 처리하기 위한
gesture recognizers를 설치할 수 있습니다.
view는 다른 view안에 중첩되어 계층을 형성할 수 있으므로 관련 내용을 쉽게 구성할 수 있습니다. view를 중첩하면 중첩된 자식 뷰(subview)와 부모 뷰(superview)간의 부모-자식 관계를 형성합니다. 부모 뷰는 원하는 수만큼 subview를 포함할 수 있지만 각각의 subview는 오직 하나의 superview만 존재합니다. 기본적으로 subview의 보여지는 영역이 superview의 bounds보다 넘어가게 되면 subview의 컨텐츠는 잘리지 않습니다. clipsToBounds속성을 사용하여 해당 동작을 변경합니다.
frame과 bounds 속성은 각 view의 기하학적 구조를 정의합니다. frame속성은 superview의 좌표계에서 view의 원점과 치수를 정의합니다. bounds속성은 보이는 대로 내부 치수를 정의합니다. center속성은 view의 frame과 bounds속성을 직접적으로 사용하지 않고 쉽게 위치를 재정의하는데 사용됩니다.
UIView클래스 사용에 대한 구체적인 정보를 얻으려면 [View Programming Guide for iOS]ㅣ(https://developer.apple.com/library/archive/documentation/WindowsViews/Conceptual/ViewPG_iPhoneOS/Introduction/Introduction.html#//apple_ref/doc/uid/TP40009503)참고하세요.
3. Creating a View
일반적으로, 라이브러리에서 캔버스로 끌어서 스토리보드에 view를 생성합니다. programmatically하게도 생성할 수 있습니다. view를 생성할 때 미래의 superview를 기준으로 사이즈와 위치를 지정합니다. 예를 들어, 다음 예제는 view를 생성하고 superview의 좌표계에 있는 점 (10,10)에 위치는 왼쪽, 상단에 배치합니다.
let rect = CGRect(x: 10, y: 10, width: 100, height: 100)
let myView = UIView(frame: rect)view에 subview를 추가하려면, superview에서 addSubView(_:)메소드를 호출하세요. view에 원하는 수만큼 view를 추가할 수 있고 iOS의 어떠한 이슈 없이 view들은 서로 겹칠 수 있습니다. insertSubview(_:aboveSubview) 와 insertSubview(_:belowSubview)메소드를 사용하여 subview의 상대적인 z-order를 지정할 수 있습니다. exchangeSubvew(at:withSubviewAt)메소드를 사용하여 이미 추가된 subview의 위치를 바꿀 수 있습니다.
view를 생성한 후, 오토레이아웃 규칙들을 생성합니다.
4. The View Drawing Cycle
뷰 드로잉은 필요에 따라 발생합니다. view가 처음 보여지거나 레이아웃 변경으로 view의 전체 혹은 일부가 표시되면 시스템은 view에게 컨텐츠를 그리도록 요청합니다. UIKit이나 Core Graphics를 통해 커스텀 컨텐츠가 포함된 view일 경우 시스템은 view의 draw(_:)메소드를 호출합니다. 이 메소드를 구현하면 current graphic context에 view의 컨텐츠를 그릴 수 있으며, 이 메소드를 호출하기 전에 시스템에서 자동으로 설정됩니다. 화면에 표시될 수 있는 정적이고 시각적인 표현이 생성된다.
view의 컨텐츠가 바뀔 때, view를 다시 그려야한다고 시스템에게 알리는것은 우리가 해야 합니다. view의 setNeedsDisplay()혹은 setNeedsDisplay(_:) 메소드를 호출하여 수행할 수 있습니다. 이러한 메소드들은 다음 드로잉 사이클 동안 view를 업데이트 해야한다고 시스템에게 알립니다. view를 업데이트하기 위해 다음 드로잉 사이클까지 기다리기 때문에 여러 view에서 이러한 메소드를 호출하여 동시에 업데이트 할 수 있습니다. (이 메소드를 호출하는 즉시 view의 컨텐츠를 업데이트 하는 것이 아니다. 다음 드로잉 사이클이 올때까지 기다렸다가 변화된 내용들을 한번에 업데이트 한다. 따라서 호출하는 시점과 변경되는 시점의 차이가 생긴다.)
5. Animation
view의 여러 속성들에 대한 변경 사항을 애니메이션할 수 있습니다. 즉, 속성을 변경하면 현재 값에서 시작하여 새로 지정한 값에 끝나는 애니메이션을 생성합니다. 다음 나열되는 UIView의 속성들은 애니메이션할 수 있습니다.
- frame
- bounds
- center
- transform
- alpha
- backgroundColor
변화에 대해 애니메이션 하려면 UIViewPropertyAnimator 객체를 만들고 handle block을 사용하여 view의 속성 값을 변경합니다. UIViewPropertyAnimator클래스를 사용하면 애니메이션의 지속 시간과 타이밍을 지정할 수 있고 실제 애니메이션을 수행합니다. 속성 기반 애니메이터를 일시 중지하여 애니메이션을 중단할 수 있습니다.
내용이 길어 다음 2편으로 이어집니다...
