关于Swift：如何使UISlider默认拇指变小，就像iOS控制中心中的拇指一样

How to make UISlider default thumb to be smaller like the ones in the iOS control center

我正在开发一个应用程序，并且有一个自定义UISlider。
但是，我在如何使默认拇指看起来像iOS控制中心中的拇指方面遇到一些问题。
请注意，我想要相同的iOS拇指，而不是自定义拇指图像。到目前为止，我已经尝试过thumbRect(forBounds...)，但是没有运气。
有什么建议？

相关讨论

您无法更改默认拇指图像的大小，但是UISlider具有方法setThumbImage(_:for:)，该方法将允许您传递类似的较小图像。

enter image description here

在您的视图控制器viewDidLoad中：

1
2
3

let image:UIImage? = // ...
yourSlider.setThumbImage(image, for: .normal)
yourSlider.setThumbImage(image, for: .highlighted) // Also change the image when dragging the slider

请参阅API参考中的自定义滑块外观。

在iOS10上，默认的拇指图像看起来不超过带有阴影的薄白色边框(如果您未设置thumbTintColor)。

我使用此代码段生成了可以按比例缩小的类似图像；)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

1	<canvas id="canvas" style="border:2px dotted black;" width="86" height="86"></canvas>

相关讨论

我创建了一个UISlider子类，该子类允许更改拇指大小和轨道大小，而无需使用图像。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

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
}

}

结果：

enter image description here

相关讨论

如果要更改"缩略图"和"色调颜色"，则两者均不可能。此问题有一种解决方法。以编程方式创建圆形图像，并更改图像的颜色，然后将该图像分配给滑块。这样，您还可以调整图像大小和颜色。

这是完全正常工作的示例代码：

1
2
3
4
5
6
7
8
9
10
11
12

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
}

您可以这样调用此函数：

1
2
3
4
5
6

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事件上调用。

这是为您提供的一个选项，请使用CGAffineTransform。

斯威夫特4

1	mySlider.transform = CGAffineTransform(scaleX: 0.85, y: 0.85)

这将更改滑块的宽度和高度，因此您可能需要将其与界面重新对齐。

相关讨论

下载与您在iOS控制中心中获得的图像相似的图像。

将其缩放至所需大小(20x20或更小)，然后将其保存在资产中。

将以下代码粘贴到viewDidLoad中：

1	self.yourSlider.setThumbImage(UIImage(named:"SliderName")!, for: .normal)

相关讨论