[iOS - swift] 뷰가 화면에 그려지는 원리, UpdateConstraints, layoutSubviews, draw 개념 (+ main run loop, run loop)

updateConstraint -> layoutSubviews -> draw -> (레이아웃 변할경우) layoutSubviews

• UIView에는 updateConstraints(), layoutSubviews(), draw(_:) 메소드가 존재
  • 3가지를 이해하려면 아래 뷰가 그려지는 원리를 이해하는게 필요

import UIKit

final class MyView: UIView {
  override func updateConstraints() {
    super.updateConstraints()
    print("updateConstraints()")
  }
  
  override func layoutSubviews() {
    super.layoutSubviews()
    print("layoutSubviews()")
  }
  
  override func draw(_ rect: CGRect) {
    super.draw(rect)
    print("draw(rect:)")
  }
}

뷰가 화면에 그려지는 원리

• 뷰는 Constraints 값을 이용하여 Layout(Size와 Position)을 결정
• Layout(Size와 Position)을 토대로 Drawing 정의
• 뷰는 모두 사각형으로 그려지므로, 메소드 시그니쳐도 draw(rect:)로 정의된 것

• 만약 아래와 같이 constraint가 변경되면 layout이 바뀌므로 layoutsubviews()가 호출

let constraints1 = [
  self.myView.heightAnchor.constraint(equalToConstant: 300),
  self.myView.widthAnchor.constraint(equalToConstant: 300),
  self.myView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
  self.myView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
]
NSLayoutConstraint.activate(constraints1)

DispatchQueue.main.asyncAfter(deadline: .now() + 1.5) {
  NSLayoutConstraint.deactivate(constraints1)
  let constraints2 = [
    self.myView.heightAnchor.constraint(equalToConstant: 100),
    self.myView.widthAnchor.constraint(equalToConstant: 100),
    self.myView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
    self.myView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
  ]
  NSLayoutConstraint.activate(constraints2)
}

Main Run Loop, Update Cycle

• Main Run Loop - 디바이스가 회전되거나, 뷰의 위치가 변화되거나, 터치 이벤트를 받는 등 각종 이벤트를 처리하고, 그 이벤트에 알맞는 핸들러를 찾아 그 인스턴스들에게 처리 권한을 위임
• Update Cycle - 내부에서 메소드를(updateConstraints, layoutSubviews, draw) 실행하여 아래와 같은 뷰의 정보를 업데이트
  • Constraint (auyo layout에서 사용하는 제약 조건)
  • Layout (Size, Point)
  • Display (Color, text, image)

실행되는 메소드 순서

• updateConstraints > layoutSubviews > draw 
• 이 세가지 메소드는 값 비싼 비용이 들기 때문에 개발자가 호출하지 못하고 Main Run Loop의 Update Cycle에서 내부적으로 호출되는 형태
• 이 세 가지 메소드가 불린 후 Event Loop (= run loop)에서 위에서 알아본대로 Constraint, Layout, Display를 변경하고 추가로 터치 이벤트와 같은 것들도 같이 처리
• 단순히 메인 스레드에서 사용되는 run loop를 Main Run Loop라고 명칭

https://tech.gc.com/demystifying-ios-layout/

 

* 참고

https://tech.gc.com/demystifying-ios-layout/