我正在开发一个应用程序，我有一个自定义 UISlider。
但是，我在如何使 default 拇指看起来像 iOS 控制中心中的拇指一样小时遇到了一些问题。
请注意，我想要相同的 iOS 拇指，而不是自定义拇指图像。到目前为止，我已经尝试过 thumbRect(forBounds...) 但没有运气。
有什么建议吗？
【问题讨论】：
标签： swift swift3 uikit uislider
下载与您在 iOS 控制中心中的图像相似的图像。
将其缩放到您想要的大小（20x20 或更小）并将其保存在您的资源中。
在 viewDidLoad 中粘贴以下代码：
self.yourSlider.setThumbImage(UIImage(named: "SliderName")!, for: .normal)
【讨论】：
您无法更改默认缩略图的大小，但 UISlider 有一个方法 setThumbImage(_:for:) 可以让您传递类似的较小图像。
在您的视图控制器中 viewDidLoad ：
let image:UIImage? = // ...
yourSlider.setThumbImage(image, for: .normal)
yourSlider.setThumbImage(image, for: .highlighted) // Also change the image when dragging the slider
请参阅 API 参考的Customizing the Slider’s Appearance。
在 iOS10 上，默认的拇指图像看起来不超过一个带有细阴影的带边框的白色圆圈（如果您没有设置 thumbTintColor）。
我使用这个snippet 来生成一个可以缩小的类似图像；）
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = " \
<svg xmlns='http://www.w3.org/2000/svg' width='86' height='86'> \
<foreignObject width='100%' height='100%'> \
<div xmlns='http://www.w3.org/1999/xhtml'> \
<style> \
#ios-uislider-thumb { \
-webkit-box-sizing: content-box; \
-moz-box-sizing: content-box; \
box-sizing: content-box; \
width: 66px; \
height: 66px; \
overflow: hidden; \
border: 1px solid #CCC; \
-webkit-border-radius: 33px; \
border-radius: 33px; \
background: #FFFFFF; \
-webkit-box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2); \
box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2); \
margin : 5px 10px 15px 10px; \
} \
</style> \
<div id='ios-uislider-thumb'></div> \
</div> \
</foreignObject> \
</svg> \
";
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {
type: "image/svg+xml;charset=utf-8"
});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
};
img.src = url;<canvas id="canvas" style="border:2px dotted black;" width="86" height="86"></canvas>【讨论】：
这是一个适合您的选项，使用 CGAffineTransform。
斯威夫特 4
mySlider.transform = CGAffineTransform(scaleX: 0.85, y: 0.85)
这将改变滑块的宽度和高度，因此您可能需要将其与界面重新对齐。
【讨论】：
mySlider.centerXAnchor.constraint(equalTo: centerXAnchor)、mySlider.widthAnchor.constraint(equalTo: widthAnchor, multiplier: 1 / 0.85) 使其像以前一样重新填充大小。
如果您想更改拇指图像和色调颜色，那么两者都不可能；此问题有一种解决方法。以编程方式创建圆形图像并更改图像的颜色并将该图像分配给滑块；这样，您还可以调整图像的大小和颜色。
这是完整的示例代码：
fileprivate func makeCircleWith(size: CGSize, backgroundColor: UIColor) -> UIImage? {
UIGraphicsBeginImageContextWithOptions(size, false, 0.0)
let context = UIGraphicsGetCurrentContext()
context?.setFillColor(backgroundColor.cgColor)
context?.setStrokeColor(UIColor.clear.cgColor)
let bounds = CGRect(origin: .zero, size: size)
context?.addEllipse(in: bounds)
context?.drawPath(using: .fill)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image
}
你可以这样调用这个函数：
func setSliderThumbTintColor(_ color: UIColor) {
let circleImage = makeCircleWith(size: CGSize(width: 20, height: 20),
backgroundColor: color)
slider.setThumbImage(circleImage, for: .normal)
slider.setThumbImage(circleImage, for: .highlighted)
}
这个方法setSliderThumbTintColor将在UISlider的valueChanged事件上被调用。
【讨论】：
我创建了一个UISlider 子类，它允许在不使用图像的情况下更改拇指大小和轨道大小。
import UIKit
class CustomSlider: UISlider {
@IBInspectable var trackHeight: CGFloat = 3
@IBInspectable var thumbRadius: CGFloat = 20
// Custom thumb view which will be converted to UIImage
// and set as thumb. You can customize it's colors, border, etc.
private lazy var thumbView: UIView = {
let thumb = UIView()
thumb.backgroundColor = .yellow//thumbTintColor
thumb.layer.borderWidth = 0.4
thumb.layer.borderColor = UIColor.darkGray.cgColor
return thumb
}()
override func awakeFromNib() {
super.awakeFromNib()
let thumb = thumbImage(radius: thumbRadius)
setThumbImage(thumb, for: .normal)
}
private func thumbImage(radius: CGFloat) -> UIImage {
// Set proper frame
// y: radius / 2 will correctly offset the thumb
thumbView.frame = CGRect(x: 0, y: radius / 2, width: radius, height: radius)
thumbView.layer.cornerRadius = radius / 2
// Convert thumbView to UIImage
// See this: https://stackoverflow.com/a/41288197/7235585
let renderer = UIGraphicsImageRenderer(bounds: thumbView.bounds)
return renderer.image { rendererContext in
thumbView.layer.render(in: rendererContext.cgContext)
}
}
override func trackRect(forBounds bounds: CGRect) -> CGRect {
// Set custom track height
// As seen here: https://stackoverflow.com/a/49428606/7235585
var newRect = super.trackRect(forBounds: bounds)
newRect.size.height = trackHeight
return newRect
}
}
结果：
【讨论】：
使用如下自定义图片..
for state: UIControl.State in [.normal, .selected, .application, .reserved] {
editorSlider.setThumbImage(UIImage.init(named: "slider_thumb"), for: state)
}
【讨论】：
只是一个快速而干净的修复：
[.normal, .highlighted].forEach { state in
slider.setThumbImage(thumbImage, for: state)
}
【讨论】：