하위View touch event 부모View로 인식/전달

1. Problem

 

재치 프로젝트를 진행하면서 카카오 로그인을 구현하게 되었다.

 

디자인은 아래와 같다.

UI 구성을 하는데, 디자인 적용을

 

1. 백그라운드 역할을 할 UIButton
2. 로고 이미지와 타이틀을 넣을 UIStackView

 

이렇게 구조를 짜서 UI를 구현했다.

 

 

이때 문제가 발생했다.

 

로고와 타이틀 영역을 클릭할 경우, UIButton의 터치로 인식되지 않는 것이다.

즉, UIButton을 클릭했을 때 호출되도록 작성한 함수가 실행되지 않는 상황인 것이다.

---

 

2. Search and Think

 

먼저 내가 UI를 구성한 코드를 보면 아래와 같이

백그라운드로 넣은 kakaoBtn이 부모View, 로고와 타이틀을 넣은 kakaoStackView가 하위View인 상황이다.

override func hierarchy() {
        
        self.addSubview(logoImage)
        self.addSubview(kakaoBtn)
        
        kakaoBtn.addSubview(kakaoStackView)
        
        kakaoStackView.addArrangedSubview(kakaoLogo)
        kakaoStackView.addArrangedSubview(kakaoLabel)
}

부모 View, 하위 View의 터치 이벤트와 관련해서 구글링을 해보다가 hitTest라는 메서드를 알게 되었다.

 

여기서 hitTest를 다루지는 않을 거지만.. 관련 글을 읽으면서 알게된 것은 view를 터치하게 되면 최상단 view의 터치로 인식한다는 사실이다.

 

이를 통해서 나는 최상단View가 터치를 인식하지 못하도록 하면 되겠다는 생각을 하게 되었다.

 

사용자의 터치를 인식하지 못하도록 하는 방법으로 가장 먼저 생각났던 방법은 isUserInteractionEnabled 프로퍼티를 false로 설정하는 것이었다.

---

 

3. Solution and Apply

 

UIStackView를 선언할 때 isUserInteractionEnabled 의 값을 false로 설정

 

let kakaoStackView = UIStackView().then{
    $0.axis = .horizontal
    $0.spacing = 12.5
    **$0.isUserInteractionEnabled = false**
}

---

 

4. Result

 

---

 

5. Learn

 

isUserInteractionEnabled 프로퍼티 값을 false로 설정해야지 생각하고 hitTest를 조금 더 자세하게 읽어보니 아래와 같이 View의 터치를 인식하기 위한 조건을 발견하게 되었다..

 

처음에 isUserInteractionEnabled를 조정하면 되지 않을까라고 생각하고 적용할 때까지는 정확하게 맞는 방법인지 확신이 안갔었지만, 아래 조건을 보고 내가 생각한 방법이 맞는 방법이었구나 싶어 다행이라고 생각..ㅋㅋ

 

☝🏻 view의 터치를 인식하기 위한 조건

1. view가 hidden이 아니어야 함
2. view의 userInteraction이 enable이어야 함
3. view의 alpha가 0.01보다 커야 함
4. view가 포인트를 포함해야 함

 

@ 참고

https://blog.canapio.com/49

(번역) Hit-Testing in iOS