如何使UISlider默认拇指变小，例如iOS控制中心中的拇指 [英] How to make UISlider default thumb to be smaller like the ones in the iOS control center

问题描述

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

I'm working on an app and I have a custom UISlider.
However, I'm having some issues on how to make the default thumb to appear smaller like the ones in the iOS control center.
Note that I want the same iOS thumb, not a custom thumb image. So far, I've tried thumbRect(forBounds...) but no luck.
Any suggestions?

推荐答案

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

You can't change the size of the default thumb image, but UISlider has a method setThumbImage(_:for:) that will allow you to pass a similar, smaller image.

在您的视图控制器viewDidLoad中:

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

请参见API参考中的自定义滑块外观.

See Customizing the Slider’s Appearance of the API Reference.

在iOS10上，默认的拇指图像看起来不超过带有阴影的下方带有阴影的白色圆圈(如果未设置thumbTintColor).

On iOS10, the default thumb image appear to be no more than a bordered white circle with a thin shadow dropped under (if you don't set the thumbTintColor).

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

I use this snippet to generate a similar image that can be scaled down ;)

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>

这篇关于如何使UISlider默认拇指变小，例如iOS控制中心中的拇指的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！