触摸结束时如何更改 UISlider Thumb 外观
Posted
技术标签:
【中文标题】触摸结束时如何更改 UISlider Thumb 外观【英文标题】：How to change UISlider Thumb Appearance when Touch Ends 【发布时间】：2016-08-08 04:09:22 【问题描述】：我正在通过调用 .thumbTintColor 更改 UISlider 的颜色
@IBAction func slider1Master(sender: AnyObject)
slider1.thumbTintColor = UIColor.orangeColor()
它可以工作，但我希望在触摸结束（用户抬起手指）时颜色变回原来的状态。
有人有什么建议吗？谢谢。
【问题讨论】：
你真的是指在手指打开和关闭时改变颜色，还是在开关打开和关闭时改变颜色？ 手指。这是一个滑块，所以没有开或关。我希望手指抬起时颜色会改变。 【参考方案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)
【讨论】：
@shavedape，他给出了很好的答案。我的回答显示了它对我的作用。 谢谢，您的回答没有被置若罔闻。看看这个***.com/a/41254774/2348597【参考方案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!
【讨论】：
【参考方案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 外观的主要内容，如果未能解决你的问题，请参考以下文章