web-dev-qa-db-fra.com

Comment rendre le pouce par défaut d'UISlider plus petit que celui du centre de contrôle iOS

Je travaille sur une application et j'ai une UISlider personnalisée.
Cependant, je ne parviens pas à faire en sorte que le default thumb paraisse plus petit, comme ceux du centre de contrôle iOS.
Notez que je veux le même pouce iOS, pas une image de pouce personnalisée. Jusqu'ici, j'ai essayé thumbRect(forBounds...) mais pas de chance.
Aucune suggestion?

swiftswift3uikituislider
5
UI Scuti

Vous ne pouvez pas changer la taille de l'image par défaut, mais UISlider a une méthode setThumbImage(_:for:) qui vous permettra de transmettre une image similaire plus petite.

 enter image description here

Dans votre contrôleur de vue viewDidLoad:

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

Voir Personnalisation de l’apparence du curseur de la référence API.

Sur iOS10, l'image du pouce par défaut ne semble pas être autre chose qu'un cercle blanc entouré d'une mince ombre (si vous ne définissez pas thumbTintColor).

J'utilise ce extrait pour générer une image similaire qui peut être réduite;)

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>

22
Axel Guilmin

Voici une option pour vous, utilisez un CGAffineTransform.

Swift 4

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

Cela modifiera la largeur et la hauteur du curseur. Vous devrez peut-être le réaligner avec votre interface.

6
J. Martin

  1. Téléchargez une image similaire à celle que vous avez dans le centre de contrôle iOS.

  2. Adaptez-le à la taille souhaitée (20x20 ou même moins) et sauvegardez-le dans vos fichiers. 

  3. Collez le code suivant dans viewDidLoad:

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