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的解决方案作为您的答案。这有几个原因。

当用户按照您的要求提起手指时，颜色会变回其原始状态
使用扩展程序创建形状会消除UISlider
它还可用于绘制圆形UIButtons和圆形UIViews的图像。
它还可以创建一个颜色与其他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)
}

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

3 个答案: