swift - 触摸结束时如何更改 UISlider Thumb 外观

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)
}