[개발자 문서읽기] UIView - 1

공부하며 번역한 내용입니다. 
오역과 의역이 있을 수 있습니다. 정확한 내용은 원문을 참고해주세요 :)

 

UIView

스크린 위의 사각형 영역을 관리하는 객체 class UIView : UIResponder

Overview

View는 앱 UI의 기본 요소이며 UIView 클래스는 모든 뷰의 공통된 행동을 정의합니다. 하나의 뷰 객체는 사각 영역 안에 content를 render하고 content의 인터렉션을 관리합니다. UIView는 인스턴스화 하고 고정된 배경색을 나타낼 수 있는 구체적인 클래스 입니다. 더 복잡한 content를 그리기 위해 subclass 할 수도 있습니다. 앱에서 일반적으로 볼 수 있는 labels, images, buttons 등 다른 인터페이스 요소를 나타내려면 직접 정의하기 보다는 UIKit framework에서 제공하는 subclasses 뷰들을 사용하십시오.

view 객체들은 사용자와 상호작용 하는 주요 방식이기 때문에 여러 가지 책임이 있습니다.

• Drawing and animation
  • Views는 UIKit이나 Core Graphics를 사용해서 사각 영역 안에 content를 그립니다.
  • 일부 뷰 속성은 새로운 값으로 애니메이션될 수 있습니다.
• Layout and subview management
  • Views는 여러 개의 하위 뷰(subviews)를 갖거나 아예 갖지 않을 수도 있습니다.
  • 자신의 하위 뷰들의 크기나 위치를 조정할 수 있습니다.
  • 뷰 계층(view hierarchy) 변화에 따라 뷰들의 위치나 크기를 재조정 하려면 Auto Layout을 사용하세요
• Event handling
  • view는 UIResponder의 하위 클래스여서 터치나 다른 형태의 이벤트에 반응할 수 있습니다.
  • 뷰들은 일반적인 제스쳐를 처리하기 위해 gesture recognizer를 설치할 수 있습니다.

Views를 다른 뷰의 내부에 중첩시켜서(can be nested) 뷰 계층을 만들 수 있습니다. 뷰 계층은 related content를 편리하게 관리할 수 있게 해줍니다. nesting된 뷰는 부모(superview) 자식(subview)간의 관계를 만듭니다. 부모 뷰는 여러 자식 뷰를 가질 수 있지만 자식 뷰는 오직 하나의 부모 뷰만을 갖습니다. 기본적으로 자식 뷰가 부모 뷰의 영역 밖으로 나가도 content가 잘리지않습니다. 원한다면 clipsToBounds 프로퍼티를 바꿔주세요.

각 뷰의 형태(geometry)는 frame과 bounds 프로퍼티로 정의됩니다. frame은 superview의 좌표계를 기준으로 origin과 영역을 결정하고 bouds는 뷰의 내부영역을 정의합니다. custom drawing code에서는 거의 bounds가 사용됩니다. center 프로퍼티를 사용하면 frame이나 bounds의 변화 없어 위치를 재조정할 수 있습니다.

UIVIew class의 사용에 대한 더 자세한 사항은 View Programming Guide for iOS 를 참고하세요.

Creating View

보통 storyboard 에서는 드래그해서 만들 수 있고 코드로도 만들 수 있습니다. 뷰를 생성할 때 내부 크기와 미래의 부모 뷰에 대한 상대적 위치를 정의합니다. 예를 들어, 아래 예제는 부모 뷰에서 왼쪽 위 모서리에서 (10, 10) point에 위치합니다.

let rect = CGRect(x: 10, y: 10, width: 100, height: 100) 
let myView = UIView(frame: rect)

다른 뷰를 자식 뷰로 추가하고 싶다면 뷰모 뷰의 addSubview(:) 메소드를 호출하세요. 자식 뷰를 많이 추가해도 서로 문제없이 overlap 됩니다. addSubview(_:) 메소드는 새로운 뷰를 자식 뷰들의 맨 위로 추가합니다. insertSubview(:aboveSubview:) 와 insertSubview(_:belowSubview:) 메소드를 사용해 특정 순서에 추가할 수도 있습니다. 이미 추가된 뷰도 exchangeSubview(at:withSubviewAt:) 메소드를 사용해 바꿔줄 수 있습니다.

뷰를 만들고 Auto Layout를 만들어서 뷰 나머지 뷰 계층의 변화에 따라 뷰의 크기와 위치가 어떻게 바껴야 하는지 결정합니다. 자세한 사항은 Auto Layout Guide 를 참고하세요.

The View Drawing Cycle

View drawing은 필요에 따라 일어납니다. (View drawing occurs on an as-needed basis.) 뷰가 처음 보여질 때나 전체 혹은 일부 레이아웃이 바뀔 때 시스템은 뷰에 content를 그리라고 요청합니다. 뷰가 UIKit이나 Core Graphics를 사용한 custom content 를 가지고 있다면 시스템은 view의 draw(_:) 메소드를 호출합니다. draw 메소드의 구현은 메소드를 호출하기 전에 시스템에서 자동으로 설정하는 현재 graphics context로 뷰의 content를 그리는 역할을 합니다. 그러면 화면에 보여질 수 있는 뷰 content의 static visual representation이 생성됩니다.

뷰의 실제 content가 바뀔 때 시스템에게 뷰가 다시 그려져야 한다는 건 사용자의 책임입니다. setNeedDisplay()나 setNeedDisplay(_:) 메소드를 호출해서 할 수 있습니다. 이 메소드들은 뷰가 다음 drawing cycle에 업데이트 되어야 한다고 알립니다. 뷰를 업데이트 하기 위해 다음 주기까지 기다리므로 여러 뷰에서 이 메소드를 호출해서 동시에 업데이트 할 수 있습니다.

Note
그리기 위해 OpenGL ES를 사용하려면 GLKView을 사용하라고 나와있지만 deprecated 되었네요. openGL은 더이상 지원하지 않고 MTKView을 써서 metal을 사용해야할 것 같습니다.

뷰 드로잉 사이클에 대한 자세한 내용은 View Programming Guide for iOS 를 참고하세요.

Animations

뷰의 몇몇 속성의 변화는 애니메이션될 수 있습니다. 여기서 속성의 변화는 현재 값에서 시작해 설정한 새로운 값에서 끝나는 애니메이션을 만듭니다. 애니메이션 될 수 있는 속성들은 다음과 같습니다.

• frame
• bounds
• center
• transform
• alpha
• backgroundColor

애니메이션시키려면 UIViewPropertyAnimator 객체를 만들고 handler block에서 값을 바꾸십시오. UIViewPropertyAnimator 클래스에서 애니메이션의 duration, timing 설정하지만 실제 애니메이션을 수행합니다. 현재 실행중인 애니메이션을 멈추기 위해서 프로퍼티 기반 애니메이터를 중지할 수 있고 interactively 하게 실행할 수도 있습니다. 자세한 내용은 UIViewPropertyAnimator를 확인하세요.

Threading Considerations

UI(user interface) 작업은 반드시 main thread에서 동작해야 합니다. 이를 위해서 UIView 클래스의 메소드는 항상 앱의 main thread에서 호출해야 합니다. 뷰 객체 자체를 만들 때만은 엄격하게 적용되지 않지만 다른 모든 작업은 반드시 main thread에서 동작해야 합니다.

 

---

 

UIView는 앱의 시작과 끝을 함께하는 녀석이죠... 중요한 만큼 흔해서 문서를 정독해볼 생각은 잘 하지 못하고 경험적인 부분에 많이 의존했던 것 같아요. 반성합니다... 생각보다 내용이 굉장히 많군요! subclassing 부터는 다음 글로 넘겨야 할 거 같네요. 이 문서는  개괄적 내용이라 많이들 알고 계셨던 내용일 거 같은데요. 글 단락단락 나오는 자세한 내용을 위한 뿌리같은 느낌이네요. 저 문서들도 하나씩 자세히 살펴봐야겠어요! 중요한 내용들이 많이 숨어있는 거 같아요 👀

 

참고

UIView