[RxSwift] UILabel의 탭 이벤트를 감지해보자.

토이 프로젝트 진행 중, UILabel 컴포턴트를 Tap 했을 때 이벤트를 처리하고 싶었다. 

 

제스처 인식

let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(handleLabelTap(_:)))
label.addGestureRecognizer(tapGestureRecognizer)

label.isUserInteractionEnabled = true

@objc func handleLabel(_ sender: UITapGestureRecognizer) {
    print("Label Tapped!")
}

UIKit으로 구현한 방법이다. UILabel에 TapGestureRecognizer를 추가한 후, 탭 이벤트를 처리하는 메소드를 처리하면 되는 간단한 방법이다. 

 

하지만!! 내 토이 프로젝트는 Rx를 기반으로 구현하고 있다. UILabel을 Tap 했을 때 ViewModel에 바인드를 해야하는 경우도 있고, 탭 이벤트를 Observable로 감지하여 처리하고 싶기 때문에 Rx로 구현해보고자 한다.

 

탭 이벤트 구현

🤔 아이디어 생각해보기 

RxCocoa로 버튼의 탭 이벤트를 처리하는 것이 생각이 났다 !!

이것을 베이스로 구현하면 되지 않을까 시도해봤다.

 

✅ UILabel은 UIControl을 상속하지 않기 때문에, RxCocoa에서 제공하는 ControlEvent를 직접 사용할 수 없다. 

따라서 UITapGestureRecognizer를 사용하여 이벤트를 감지하고 처리해야한다. 

 

import UIKit
import RxCocoa
import RxSwift

extension Reactive where Base: UILabel {
    var tap: Observable<Void> {
        let tapGestureRecognizer = UITapGestureRecognizer()
        
        base.addGestureRecognizer(tapGestureRecognizer)
        base.isUserInteractionEnabled = true

        return tapGestureRecognizer.rx.event
            .map { _ in () }
            .asObservable()
    }
}

로직은 간단하다. TapGestureRecognizer를 UILabel에 추가하고, TapGestureRecognizer의 이벤트를 Observable<Void>로 반환한다. 

 

label.rx.tap
   .subscribe(onNext: { [weak self] in
       print("Rx Label Tapped!")
   }
   .disposed(by: disposeBag)

이렇게 label.rx.tap을 구독하여 Observable<Void>를 반환하고, onNext에서 탭 이벤트가 발생했을 때 원하는 이벤트를 처리하면 된다.

 

적용하기

토이 프로젝트에 적용해보았다 !! 성공적으로 실행된다 !