UIView 알아보기

UIView

애플 공식문서에 따르면, UIView 는 다음과 같은 역할을 한다.

• 내부 bounds rectangle 에 content 를 그리고, content 와의 상호작용을 관리한다.
• 복잡한 content 를 그리기 위해 UIView 를 subclassing 할 수도 있다.
• Drawing and Animation
  • Core Graphic 또는 UIKit 프레임워크를 사용해 내부 직사각형 영역에 콘텐츠를 그린다.
  • 특정 view properties (frame, bounds, radius, rotate Angle) 등을 animate 를 사용해 새로운 값으로 변경할 수 있다. (Animation 의 정의 -> 일정한 시간 동안 값을 새로운 값으로 변경시키는 것)
• Layout and subview management
  
  • View 는 내부에 여러 개의 subView 들을 가질 수 있다.
  • subView 의 위치와 크기를 조정할 수 있다.
• Event handling
  • UIView 는 UIResponder 의 subclass 이기 때문에, 터치 이벤트등 다양한 UI 이벤트에 반응할 수 있다.
  • Gesture recognizer 를 설치해 공통적인 제스처들에 대응할 수 있다.

SuperView and SubView

하나의 View 는 여러 개의 subView 들을 가질 수 있다. 예를 들어 버튼을 생각해보자. 

위 버튼에는 text, image 등 총 두 개의 UI요소가 들어간 것을 볼 수 있다. 즉 하나의 button 이 두 개 이상의 UIView 객체를 가지고 있는 것이다. 이 때 여러 개의 subView 를 가지고 있는 View 를 superView 라 칭한다. 

하나의 UIView 는 여러 개의 subView 를 가질 수 있지만 (1대 다 관계), 각 UIView 는 오로지 하나의 superView만 가질 수 있다.

 

SuperView 안에 포함된 여러 가지 subView 들은 superView 안에서 자신의 위치와 크기를 결정해야 한다. frame 과 bounds 프로퍼티를 사용해 크기와 위치등을 결정할 수 있다. frame 과 bounds 도 아주 중요한 프로퍼티이므로 자세히 공부하도록 하자.

 

아까 UIView 는 자신의 사각형 영역 안에 content 들을 그린다고 했다. 다음과 같이 (100, 100) 에 위치하고 (200, 400) 의 사이즈를 가진 파란색 UIView 가 있다고 생각해보자. 

let uiview: UIView = UIView(frame: CGRect(x: 100, y: 100, width: 200, height: 400))
uiview.backgroundColor = .blue
view.addSubview(uiview)

 

 

이제 이 UIView 에 (300, 500) 의 크기를 가지고 빨간색 배경을 가지는 새로운 UIView 를 추가해보자.

let redView: UIView = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 500))
redView.backgroundColor = .red
uiview.addSubview(redView)

 

 

uiview이 관리하는 사각형의 크기는 넓이 200, 높이 400 이지만, 이보다 더 큰 넓이 300, 높이 500의 새로운 빨간색 뷰가 추가되었을 때 uiview 가 관리하는 사각형의 크기를 넘어서 redView 를 그리는 것을 볼 수 있다.

 

기본적으로 subView 의 영역이 superView 의 영역을 넘어서는 경우, subView 가 잘리지 않고 그대로 전부 그려지는 것을 볼 수 있다.

만약 superView 사각형 밖으로 어떤 content 도 그려지길 원하지 않는다면, clipsToBounds 프로퍼티를 true 로 지정하자.

uiview.clipsToBounds = true

 

Draw View

UIView 는 내부 직사각형 영역에 있는 Content 를 Core Grapich, UIKit 프레임워크를 사용해 화면에 그린다. 이 때 시스템이 UIView 의 draw(_:) 메소드를 호출한다. 기본적으로 draw 메소드는 이미 정의되어있으며, UIView 를 subclassing 해 새로운 컴포넌트를 생성하더라도 직접적으로 재정의할 일은 거의 없다. 

 

View 의 속성이 바뀌어서 (예를 들어 배경색이 바뀐다던가, 위치가 바뀐다던가.. ) 시스템이 UI 를 다시 그려야 할 경우, setNeedsDisplay 혹은 setNeedsLayout() 메소드를 호출해야 한다. 

 

UIKit 은 기본적으로 View 의 속성이 바뀔 때마다 UI 를 다시 그리는게 아니라, drawing cycle 이 있고, 이 cycle 을 돌 때마다 UI 를 업데이트 한다. setNeedsDisplay() 함수는 다음 drawing cycle 에 UI 를 다시 그려야 한다는 것을 시스템에게 알려주는 함수다.

 

보통 우리가 Button, UIView, UILabel 등의 text 혹은 배경색 속성을 변경할 때, 단순히 프로퍼티를 변경하는 것으로 UI 가 다시 그려져서 우리의 의도대로 동작하는 것을 볼 수 있는데, 프로퍼티 변경 시 내부적으로 저 함수들을 자동으로 호출해서 그런 것이다.

 

Aniamtion

UIView 의 특정 속성들을 변경할 때 animation 을 사용해 변경할 수 있다. 

•  frame
  • 뷰가 속한 superView 좌표계에서의 위치와 크기
• bounds
  • 뷰 자체 좌표계
• center
  • 뷰의 중심
• transform
  • 회전과 크기 등
• alpha
  • 뷰의 투명도
• backgroundColor
  • 뷰의 배경색

Animation 을 사용해 프로퍼티를 변경하면, 지정한 시간동안 프로퍼티의 현재 값 에서 변경하려는 값까지의 변화가 일어난다. 예를 들어 현재 View 의 center 좌표가 (100,100) 이고, 2초간의 aniamtion 을 사용해 center 좌표를 (200, 200) 으로 변경하면 2초 동안 서서히 center 좌표값이 변경된다.

 

실제로 애니메이션을 적용해보자.

// 2초 동안
UIView.animate(withDuration: 2, delay: 0, options: [.repeat, .autoreverse]) {
// 배경색을 빨강색으로 변경
uiview.backgroundColor = .red
// center 좌표를 + 100
uiview.center = CGPoint(x: uiview.center.x + 100, y: uiview.center.y + 100)
// .pi 만큼 회전
uiview.transform = .init(rotationAngle: .pi)
}

지정한 2초의 시간동안 각 프로퍼티가 서서히 변경되는 것을 볼 수 있다.

 

references

[iOS 앱개발] UIView 알아보기

Apple Developer Documentation