Как изменить внешний вид большого пальца UISlider при касании

Question

Я меняю цвет UISlider, вызывая.thumbTintColor

@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 элементы дизайна (по желанию).

Код ниже делает именно это. Я использовал МакМатана 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)
}