如何使UISlider默认拇指更小,就像iOS控制中心那样

Question

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

Answer 1

我创建了一个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: /sf/answers/2890173821/

        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: /sf/answers/3460002451/
        var newRect = super.trackRect(forBounds: bounds)
        newRect.size.height = trackHeight
        return newRect
    }

}

结果：

Answer 2

您无法更改默认拇指图像的大小,但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参考外观.

在iOS10上,默认的拇指图像看起来只不过是带有阴影的白色圆圈(如果没有设置thumbTintColor).

我使用这个片段生成一个可以缩小的类似图像;)

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>

Answer 3

这里有一个选项,使用CGAffineTransform.

斯威夫特4

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

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

Answer 4

斯威夫特（iOS 13+）：

在 iOS 13+ 上，您可以使用 SF Symbols 生成拇指图像：

let configuration = UIImage.SymbolConfiguration(pointSize: 12)
let image = UIImage(systemName: "circle.fill", withConfiguration: configuration)
slider.setThumbImage(image, for: .normal)

您可能还需要设置状态图像.highlighted（拖动时）：

slider.setThumbImage(image, for: .highlighted)

然而，当没有为状态设置图像时，在该状态中也使用状态.highlighted图像。.normal.highlighted

Answer 5

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

2. 将其缩放到您想要的大小（20x20 或更小）并将其保存在您的资产中。

3. 在 viewDidLoad 中粘贴以下代码：

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

Answer 6

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

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

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)
}

UISlider事件setSliderThumbTintColor将调用此方法valueChanged。