UISlider 커스텀하기 - 1

UISlider 만들어진 그대로 사용하긴 쉽지만 커스텀하기 시작하면 생각보다 쉽지 않네요..
간단할 것 같지만 생각보단? 좀 찾아봐야 하는 것들 위주로 정리하려고 합니다.

이번 글은 1탄으로 thumb 를 교체 하는 방법입니다.

 

1. thumb 교체하기

교체하는 것 자체는 생각보다 간단하게 할 수 있습니다. 
setThumbImage 를 사용해주면 됩니다.

class WSSlider: UISlider {
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        self.setupThumb()
    }
    
    private func setupThumb() {
        let thumbImage: UIImage = ...
        self.setThumbImage(thumbImage, for: .normal)
    }
}

 

2. thumb 크기 줄이기

하지만 이때 이미지의 크기가 기본 thumb 보다 작으면 문제가 발생합니다.
박스 쳐놓은 것처럼 실제로는 thumb 의 크기가 더 크기 때문에 끝까지 가지 않습니다;;

이를 위해 이미지 크기에 맞게 사이즈를 조절해줘야 합니다.
image 크기를 직접 바꿔주는 식의 방법도 있던데 그러면 highlight 에서도 또 맞춰줘야 하기도 하고... 여러모로
thumbRect 를 사용해주는 아래 방법이 그나마 제일 간단한 방법 같습니다.

공식 문서에 따르면 thumbRect를 직접 호출하지 말고 override 해서 사용하라고 합니다!

override func thumbRect(forBounds bounds: CGRect, trackRect rect: CGRect, value: Float) -> CGRect {
    let thumbImageSize = CGSize(width: 14, height: 14)
    let thumbX = rect.maxX * CGFloat(value)
    let thumbY = rect.midY
    return CGRect(origin: CGPoint(x: thumbX - (thumbImageSize.width / 2), y: thumbY - (thumbImageSize.height / 2)), size: thumbImageSize)
}