[iOS - swift] View Layering 테크닉 (+ gesture, Interaction, isUserInteractionEnabled 처리)

View Layer가 두 가지 존재하지만 버튼 두 개다 터치 이벤트를 받는 상황

gesture 인식 사전 지식

• someView.isUserInteractionEnabled = false인 경우, someView의 subview들은 모두 gesture 이벤트를 받을 수 없는 상태

super.viewDidLoad()
self.view.isUserInteractionEnabled = false // self.view에 추가되는 뷰들은 제스처 이벤트 수신 불가

self.view.addSubview(self.someButton)

제스처 이벤트 수신 불가

• someView.addSubview(topView)로 추가되는 경우, someView에 있던 UI들이 topView에 가려지면 someView 터치 인식이 불가능
  
  • hitTest를 이용하면 topView로 가려져도 someView의 UI들의 터치 이벤트 인식이 가능
  • hitTest를 이용한 PassThroughView 구현 원리는 이전 포스팅 글 참고

class PassThroughView: UIView {
  override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
    let hitView = super.hitTest(point, with: event)
    // superview가 터치 이벤트를 받을 수 있도록,
    // 해당 뷰 (subview)가 터치되면 nil을 반환하고 다른 뷰일경우 UIView를 반환
    return hitView == self ? nil : hitView
  }
}

View Layering 테크닉

1th 뷰는 하위에 있고 2th 뷰는 상위에 있을 때, 2th 뷰에 addSubview하는 UI들도 동작하게 하고 싶은 경우?

여러 뷰들의 layer를 나누어서 뷰의 계층을 관리하고 싶은 경우?

• 위에서 알아본 PassThroughView를 이용하여 view를 layering
• layer별로 PassThroughView를 생성

class ViewController: UIViewController {
  // fist layer
  private let firstLayerView: PassThroughView = {
    let view = PassThroughView()
    view.backgroundColor = .clear
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
  }()
  // second layer
  private let secondLayerView: PassThroughView = {
    let view = PassThroughView()
    view.backgroundColor = .clear
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
  }()
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    self.view.addSubview(self.firstLayerView)
    self.view.addSubview(self.secondLayerView)
  }
}

• 해당 Layer들에 필요한 UI 만든 다음 addSubview
  • firstLayerView: 이미지 뷰와 버튼 존재
  • secondLayerView: 버튼 존재

두 버튼의 레이어는 다르지만, 터치 이벤트가 모두 동작

self.firstLayerView.addSubview(self.backgroundImageView)
self.firstLayerView.addSubview(self.backgroundButton)
self.secondLayerView.addSubview(self.someButton)

* 전체 코드: https://github.com/JK0369/ExViewLayering