如何改变滑块拇指外观时，触摸结束

Question

我正在通过调用。thumbtintcolor

来改变UISlider的颜色

@IBAction func slider1Master(sender: AnyObject) {
    slider1.thumbTintColor = UIColor.orangeColor()}

它可以工作，但是我希望当触摸结束(用户抬起手指)时颜色变回原始状态。

有人有什么建议吗?谢谢你。

Answer 1

您可以使用"setThumbImage"代替。然后，您可以选择为特定的操作状态设置图像。对于图像，只需创建一个圆角的图像与您想要的颜色。

//Creating an Image with rounded corners:
extension UIImage {
    class func createThumbImage(size: CGFloat, color: UIColor) -> UIImage {
        let layerFrame = CGRectMake(0, 0, size, size)
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = CGPathCreateWithEllipseInRect(layerFrame.insetBy(dx: 1, dy: 1), nil)
        shapeLayer.fillColor = color.CGColor
        shapeLayer.strokeColor = color.colorWithAlphaComponent(0.65).CGColor
        let layer = CALayer.init()
        layer.frame = layerFrame
        layer.addSublayer(shapeLayer)
        return self.imageFromLayer(layer)
    }
    class func imageFromLayer(layer: CALayer) -> UIImage {
        UIGraphicsBeginImageContextWithOptions(layer.frame.size, false, UIScreen.mainScreen().scale)
        layer.renderInContext(UIGraphicsGetCurrentContext()!)
        let outputImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return outputImage
    }
}

//Setting the image for a selected state of UISlider:
func setupSlider() {
        let size:CGFloat = 12
        let highlightedStateOrangeColorImage = UIImage.createThumbImage(size, color: UIColor.orangeColor())
        let defaultStateBlueColorImage = UIImage.createThumbImage(size, color: UIColor.blueColor())
        self.slider.setThumbImage(highlightedStateOrangeColorImage, forState: UIControlState.Highlighted)
        self.slider.setThumbImage(defaultStateBlueColorImage, forState: UIControlState.Normal)
}

Answer 2

你可以放心地接受McMatan的解决方案作为你的答案。这是好的，有几个原因。

1. 当用户抬起手指时，颜色变回原始状态，如您所要求的
2. 使用扩展来创建形状，消除了UISlider
的图像资产
3. 也可用于圆形UIButtons和圆形UIViews的图像绘制。
4. 它也可以创建一个形状的颜色匹配其他UISlider设计元素(如果需要的话)。

下面的代码就是这样做的。我使用了McMatan的UIImage extension，除了翻译到Swift 3之外没有任何改变。但是我已经将他的函数setUpSlider()分成了两个，一个用于在默认状态下绘制圆形图像，另一个用于在高亮状态下绘制圆形图像。

通过接受McMatan的解决方案，您将鼓励那些贡献他们的经验和空闲时间的人继续使这个论坛对我们其他人有价值。所以请这样做。

class ViewController: UIViewController {
    var slider: UISlider!
    let defaultColour                   = UIColor.blue
    let highlightedColour               = UIColor.orange
    let thumbSize                       = 20
    override func viewDidLoad() {
        super.viewDidLoad()
        slider                          = UISlider(frame: CGRect(x: 0, y: 0, width: 200, height: 23))
        slider.minimumValue             = 0
        slider.minimumTrackTintColor    = defaultColour
        slider.maximumValue             = 100
        slider.maximumTrackTintColor    = highlightedColour
        slider.center                   = view.center
        slider.value                    = slider.maximumValue / 2.0
        let highlightedImage            = makeHighlightedImage()
        let defaultImage                = makeDefaultImage()
        slider.setThumbImage(highlightedImage, for: UIControlState.highlighted)
        slider.setThumbImage(defaultImage, for: UIControlState.normal)
        slider.isContinuous             = false
        view.addSubview(slider)
        slider.addTarget(self, action: #selector(sliderValueChanged), for: UIControlEvents.valueChanged)
    }
    func sliderValueChanged(sender: UISlider){
        print(sender.value)
    }
    func makeHighlightedImage() -> (UIImage) {
        let size                        = CGFloat(thumbSize)
        let highlightedStateImage       = UIImage.createThumbImage(size: size, color: highlightedColour)
        return (highlightedStateImage)
    }
    func makeDefaultImage() -> (UIImage) {
        let size                        = CGFloat(thumbSize)
        let defaultStateImage           = UIImage.createThumbImage(size: size, color: defaultColour)
        return (defaultStateImage)
    }
}

扩展翻译成Swift 3

import UIKit
extension UIImage {
    class func createThumbImage(size: CGFloat, color: UIColor) -> UIImage {
        let layerFrame                  = CGRect(x: 0, y: 0, width: size, height: size)
        let shapeLayer                  = CAShapeLayer()
        shapeLayer.path                 = CGPath(ellipseIn: layerFrame.insetBy(dx: 1, dy: 1), transform: nil)
        shapeLayer.fillColor            = color.cgColor
        shapeLayer.strokeColor          = color.withAlphaComponent(0.65).cgColor
        let layer                       = CALayer.init()
        layer.frame                     = layerFrame
        layer.addSublayer(shapeLayer)
        return self.imageFromLayer(layer: layer)
    }
    class func imageFromLayer(layer: CALayer) -> UIImage {
        UIGraphicsBeginImageContextWithOptions(layer.frame.size, false, UIScreen.main.scale)
        layer.render(in: UIGraphicsGetCurrentContext()!)
        let outputImage                 = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return outputImage!
    }
}

Answer 3

我想出了一个类似于MCMatan的答案，但不需要一个UIImage扩展:

func setThumbnailImage(for slider: UISlider, thumbnailHeight: CGFloat, thumbnailColor: UIColor) {
    
    let cornerRadius: CGFloat = 25 
    
    let rect = CGRect(x: 0, y: 0, width: thumbnailHeight, height: thumbnailHeight)
    let size = CGSize(width: thumbnailHeight, height: thumbnailHeight)
    UIGraphicsBeginImageContextWithOptions(size, false, 0)
    // this is what makes it round
    UIBezierPath(roundedRect: rect, cornerRadius: cornerRadius).addClip()
    thumbnailColor.setFill()
    UIRectFill(rect)
    if let newImage = UIGraphicsGetImageFromCurrentImageContext() {
        slider.setThumbImage(nil, for: .normal)
        slider.setThumbImage(newImage, for: .normal)
    }
    UIGraphicsEndImageContext()
}

使用:

override func viewDidLoad() {
    super.viewDidLoad()
    setThumbnailImage(for: yourSlider, thumbnailHeight: 20.0, thumbnailColor: UIColor.red)
}

或

func someActionJustFinishedNowUpdateThumbnail() {
    setThumbnailImage(for: yourSlider, thumbnailHeight: 40.0, thumbnailColor: UIColor.blue)
}

或

func setThumbnailToSliderHeight() {
    let sliderHeight = yourSlider.frame.size.height
    setThumbnailImage(for: yourSlider, thumbnailHeight: sliderHeight, thumbnailColor: UIColor.purple)
}