Question

我正在开发应用，我有一个自定义UISlider 但是，我在如何使默认拇指显得更小，如iOS控制中心的那些问题上存在一些问题。
请注意，我想要相同的iOS拇指，而不是自定义拇指图像。到目前为止，我已经尝试thumbRect(forBounds...)，但没有运气有什么建议吗？

Answer 1

您无法更改默认拇指图像的大小，但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生成可缩小的类似图像;）

＆＃13;

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;

＆＃13;

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

＆＃13;

Answer 2

这里有一个选项，使用CGAffineTransform。

Swift 4

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

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

Answer 3

我创建了一个ActiveSheet.ExportAsFixedFormat Type:=xlTypePDF, FileName:=ThisWorkbook.Path & "\Bitácora de Resultados.pdf", Quality:=xlQualityStandard, IncludeDocProperties:=True, IgnorePrintAreas:=False, OpenAfterPublish:=True子类，该子类允许更改拇指大小和轨道大小，而无需使用图像。

UISlider

结果：

Answer 4

下载与iOS控制中心类似的图像。
将其缩放到您想要的尺寸（20x20甚至更小）并将其保存在资产中。

在viewDidLoad中粘贴以下代码：

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

Answer 5

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

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

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

Answer 6

使用如下所示的自定义图像..

for state: UIControl.State in [.normal, .selected, .application, .reserved] {
            editorSlider.setThumbImage(UIImage.init(named: "slider_thumb"), for: state)
        }

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

6 个答案: