[iOS - swift] RxGesture 사용 방법 (스와이프, UIPageControl)

UIGestureRecognizer

• Gesture를 등록할 때는 UIView의 성격을 가지고 있으면 UIGestureRecognizer를 등록하여 사용

// tap gesture
let tapGesture = UITapGestureRecognizer(target: self, action: #selector(self.handleTap(_:)))
myView.addGestureRecognizer(tapGesture)
@objc func handleTap(_ sender: UITapGestureRecognizer? = nil) {
  // handle...
}

// swipe gesture
let swipeGesture = UISwipeGestureRecognizer(target: self, action: #selector(self.handleSwipe(_:)))
myView.addGestureRecognizer(swipeGesture)
@objc private func handleSwipe(_ gesture: UISwipeGestureRecognizer) {
  // handle...
}

RxGesture

• RxGesture를 사용하면 위와같이 gesture 인스턴스를 따로 만들지 않고 button.rx.tap과 같이 rx로 처리가 가능

self.view.rx.gesture(.swipe(direction: .left))
  .bind { _ in print("tap gesture!") }
  .disposed(by: self.disposeBag)

Ex) RxGesture를 이용하여 UIPageControl 사용하기

• 프레임워크 설치

pod 'RxSwift'
pod 'RxCocoa'
pod 'RxGesture'

• 이미지 리스트와, 이미지를 표출할 UIImageView, 페이지를 표출할 UIPageControl 준비

// ViewController.swift

private let imageList = [
  UIImage(named: "one"),
  UIImage(named: "two"),
  UIImage(named: "three")
]

private lazy var imageView: UIImageView = {
  let view = UIImageView()
  view.image = self.imageList[0]
  view.layer.cornerRadius = 16
  view.clipsToBounds = true
  view.contentMode = .scaleAspectFill
  view.translatesAutoresizingMaskIntoConstraints = false
  return view
}()
private lazy var pageControl: UIPageControl = {
  let control = UIPageControl()
  control.numberOfPages = self.imageList.count
  control.currentPage = 0
  control.pageIndicatorTintColor = .systemGray
  control.currentPageIndicatorTintColor = .white
  control.translatesAutoresizingMaskIntoConstraints = false
  return control
}()

• RxGesture를 사용하여 swipe 처리
  • 주의: pageControl.currentPage에다가 범위를 넘어서는 값을 대입해도 내부적으로 적용이 안되므로 범위 체크 안해도 편리하게 사용 가능

Observable
  .merge(
    self.view.rx.gesture(.swipe(direction: .left)).asObservable(),
    self.view.rx.gesture(.swipe(direction: .right)).asObservable()
  )
  .bind { [weak self] gesture in
    guard let ss = self else { return }
    guard let gesture = gesture as? UISwipeGestureRecognizer else { return }
    switch gesture.direction {
    case .left:
      ss.pageControl.currentPage += 1
    case .right:
      ss.pageControl.currentPage -= 1
    default:
      break
    }
    ss.imageView.image = ss.imageList[ss.pageControl.currentPage]
  }
  .disposed(by: self.disposeBag)

• 이미지 변환에 transitinoCrossDissolve 애니메이션을 부여
  • 위 ss.imageView.image = ss.imageList[ss.pageControl.currentPage] 부분 수정

UIView.transition(
  with: ss.imageView,
  duration: 0.3,
  options: .transitionCrossDissolve,
  animations: { ss.imageView.image = ss.imageList[ss.pageControl.currentPage] },
  completion: nil
)

 

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

* 이 밖의 편리하게 사용할 수 있는 anyGesture와 조건을 걸 수 있는 when등의 사용 방법은 이전 RxGesture 포스팅 글 참고