커스텀 UISlider 구현하기 (세로 슬라이드, 이벤트)

Modern Collection View 와 MVVM 패턴 가이드

[iOS] Swift Modern Collection View & MVVM 패턴 가이드 | 덤벨로퍼 - 인프런

 

UI 커스텀

private class CustomSlider: UISlider {
        override init(frame: CGRect) {
            super.init(frame: .zero)
            minimumTrackTintColor = .grey //track 색 변경
            setThumbImage(UIImage(named: "SliderThumb"), for: .normal) //Thumb 이미지변경
        }
        
        override func trackRect(forBounds bounds: CGRect) -> CGRect { //track 높이 커스텀
            return CGRect(origin: bounds.origin, size: CGSize(width: bounds.width, height: 8))
        }
        
        fileprivate func getThumbMidX() -> CGFloat { //현재 thumb의 위치를 구하는방법
            let thumbRect = thumbRect(forBounds: bounds,
                                             trackRect: trackRect(forBounds: bounds),
                                             value: value)
            return thumbRect.midX
        }
        required init?(coder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }
    }

Slider 의 UI를 커스텀하는것은 어느정도는 되고 어느정도는 쉽지 않다.

Slider의 손잡이?를 Thumb 이라 하고 Slider가 지나가는 길을 Track이라 한다.

Thumb의 이미지를 변경하거나 Track의 높이, 색 변경 이외에 다양한 커스텀은 쉽지 않아보인다.

세로 슬라이드

let slider = CustomSlider()
slider.transform = CGAffineTransform(rotationAngle: CGFloat(-Double.pi / 2))

슬라이더는 기본적으로 가로이다. 세로슬라이드를 기본적으로 제공해주지 않는다.

세로 슬라이드를 구현 하기 위해서는 가로 슬라이드를 회전시키는 방법뿐이다.

문제는 이제 슬라이더의 위치를 조정하기 위해서 제약조건을 설정해줄텐데

세로슬라이더를 기준으로 위치를 잡으면 안된다.

 

회전되지 않은 가로슬라이더를 기준으로 위치를 잡아줘야 원하는 위치에 간다.

너비, 높이또한 마찬가지로 가로슬라이더를 기준으로 잡아야한다.

slider.snp.makeConstraints { make in
    make.height.equalTo(64)
    make.width.equalTo(320)
    make.top.equalTo(160)
    make.trailing.equalTo(160)
}

보면 width가 height 보다 큰것을 볼수있다.

top trailing 을 보면

가로 슬라이더의 center를 기준으로 회전한다고 생각해야 한다.

 

쉽게 그림으로 예를 들어보면 만약 이렇게 슬라이더를 구현해야한다고 가정했을때 ( 그림은 대충 그렸다 )

이렇게 아래 그림처럼 가로스크롤이라 생각하고 제약조건을 구현 해야 올바르게 위치한다

top. trailing의 기준점은 슬라이더의 Center이다.

이벤트

이벤트는 rxcocoa를 통해 쉽게 구현 가능하다

slider.rx.value.bind { [weak self] value in
    self?.changeFillColor(value: CGFloat(value))
    self?.changeFillHeight(value: CGFloat(value))
    self?.changeLabelTitle(value: value)
    
}.disposed(by: disposeBag)

  slider.rx.controlEvent(.touchDown).bind { [weak self] in
      self?.sliderTooltip.isHidden = true
}.disposed(by: disposeBag)

  slider.rx.controlEvent([.touchUpInside, .touchUpOutside]).bind { [weak self] in
      guard let s = self else { return }
      s.sliderTooltip.isHidden = false
      let thumbX = s.slider.getThumbMidX()
      s.sliderTooltip.snp.updateConstraints { make in
          make.bottom.equalTo(-thumbX - 107 + 15)
      }
  }.disposed(by: disposeBag)

슬라이더의 값에따라 다른 UI를 변경시키는 코드이다.

위에서 구현한 getThumbMidX()를 통해

다른 view가 thumb의 높이에 따라가는 UI도 구현할수 있다. (이거도 가로 기준이기때문에 세로 슬라이드여도 X를 봐야함)