web-dev-qa-db-fra.com

Changer l'image de la barre iPhone UISlider

J'utilise une UISlider dans mon application, mais j'aimerais utiliser un "look-and-feel" personnalisé. J'ai changé le pouce à ma propre image mais existe-t-il un moyen de changer la barre aussi? J'ai une image de barre que j'aimerais utiliser mais je ne vois pas comment faire cela.

J'ai trouvé comment changer les images max et min mais pas la barre elle-même.

iosobjective-ciphoneimageuislider
31
Fogmeister

Vous aviez raison d'utiliser les méthodes -setMinimumTrackImage:forState: et -setMaximumTrackImage:forState:. Ce que vous avez manqué, c'est que vous devriez leur fournir UIImage extensible, le reste est pris en charge automatiquement:

UIImage *sliderLeftTrackImage = [[UIImage imageNamed: @"SliderMin.png"] stretchableImageWithLeftCapWidth: 9 topCapHeight: 0];
UIImage *sliderRightTrackImage = [[UIImage imageNamed: @"SliderMax.png"] stretchableImageWithLeftCapWidth: 9 topCapHeight: 0];
[mySlider setMinimumTrackImage: sliderLeftTrackImage forState: UIControlStateNormal];
[mySlider setMaximumTrackImage: sliderRightTrackImage forState: UIControlStateNormal];

Vous pouvez utiliser la même image pour les parties min et max.

60
Costique

La solution la plus simple serait de rendre un UIImage derrière le contrôle pour représenter la piste. Le bouton pouce peut être changé avec:

[mySlider setThumbImage:[UIImage imageNamed:@"thumb_image.png"] forState:UIControlStateNormal];

Un effet secondaire de ceci est que la piste n'est pas rendue à moins que vous ne fournissiez la vôtre. Ceci, combiné avec UIImage, vous fournit un UISlider personnalisé sans que vous ayez à sous-classer quoi que ce soit.

25
Stephen Melvin

Mettre tout cela ensemble d'une manière moderne

Si vous définissez UISlider dans un Storyboard, le meilleur endroit pour styler le curseur est dans la sous-classe de la vue. Dans awakeFromNib, vous pouvez modifier le bouton, les pistes gauche et droite.

Cet appel est obsolète dans iOS 5 stretchableImageWithLeftCapWidth:topCapHeight:

- (void)awakeFromNib
{
    [super awakeFromNib];

    UIImage *thumbImage = [UIImage imageNamed:@"slider-button"];
    [self.slider setThumbImage:thumbImage forState:UIControlStateNormal];

    UIImage *sliderLeftTrackImage = [UIImage imageNamed: @"slider-fill"];
    sliderLeftTrackImage = [sliderLeftTrackImage resizableImageWithCapInsets:UIEdgeInsetsZero resizingMode:UIImageResizingModeStretch];
    UIImage *sliderRightTrackImage = [UIImage imageNamed: @"slider-track"];
    sliderRightTrackImage = [sliderRightTrackImage resizableImageWithCapInsets:UIEdgeInsetsZero resizingMode:UIImageResizingModeStretch];
    [self.slider setMinimumTrackImage:sliderLeftTrackImage forState:UIControlStateNormal];
    [self.slider setMaximumTrackImage:sliderRightTrackImage forState:UIControlStateNormal];
}
7
Cameron Lowell Palmer

stretchableImageWithLeftCapWidth: est obsolète depuis iOS 5.0. Les docs disent d'utiliser la propriété 'capInsets' à la place. Voici un moyen facile de le faire:

Créez trois images, la piste min (gauche), la piste max (droite) et le pouce. Pour cet exemple, supposons que les images de piste min et max soient 34p H x 18p W, quelque chose comme ceci: min track et ça: enter image description here.

Créez les images comme d'habitude:

UIImage *thumbImage = [UIImage imageNamed:@"sliderThumb.png"];

UIImage *sliderMinTrackImage = [UIImage imageNamed: @"sliderMin.png"];

UIImage *sliderMaxTrackImage = [UIImage imageNamed: @"sliderMax.png"];

Pour mes exemples d'image large de 18 points, les points intérieurs à gauche et à droite peuvent être étirés pour s'adapter à la piste, mais les extrémités doivent avoir une taille de chapeau non extensible de 17 points de large (d'où le capInsets ):

sliderMinTrackImage = [sliderMinTrackImage resizableImageWithCapInsets:UIEdgeInsetsMake(0, 17, 0, 0)];

sliderMaxTrackImage = [sliderMaxTrackImage resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 17)];

Puis définissez les images sur votre UISlider comme toujours:

[slider setThumbImage:thumbImage forState:UIControlStateNormal];
[slider setMinimumTrackImage:sliderMinTrackImage forState:UIControlStateNormal];
[slider setMaximumTrackImage:sliderMaxTrackImage forState:UIControlStateNormal];
4
Scotty

 enter image description here

Voici un moyen d’ajouter une image de piste qui n’est pas étirée afin que vous puissiez avoir, par exemple, une forme de coin à l'arrière-plan, exactement comme le demandait le PO:

Swift 3.0:

let trackImg = image.resizableImage(withCapInsets: .zero, resizingMode: .tile)
slider.setMinimumTrackImage(trackImg, for: .normal)
slider.setMaximumTrackImage(trackImg, for: .normal)

Important: assurez-vous que la largeur de votre curseur correspond exactement à la largeur de l'image!

2
Dorian Roy

Vous devez sous-classer UISlider et remplacer:

- (CGRect)trackRectForBounds:(CGRect)bounds

Discussion Vous ne devriez pas appeler cela méthode directement. Si tu veux personnaliser le rectangle de piste, vous pouvez substitue cette méthode et retourne un rectangle différent. Le rendu Un rectangle est utilisé pour redimensionner la piste et images du pouce pendant le dessin.

1
willcodejavaforfood

Je le fais mais la barre arrière ne montre pas parfaitement dans iOS 5.1 mais dans iOS 6.0 son affichage 

voici mon code 

 UIImage *stetchLeftTrack = [[UIImage imageNamed:@"spectrum_horizontal_bar.png"]
                                stretchableImageWithLeftCapWidth:15.0 topCapHeight:0.0];
 UIImage *stetchRightTrack = [[UIImage imageNamed:@"spectrum_horizontal_bar.png"]
                                 stretchableImageWithLeftCapWidth:15.0 topCapHeight:0.0];
 [self.slider_Sprectrum setMinimumTrackImage:stetchLeftTrack forState:UIControlStateNormal];
 [self.slider_Sprectrum setMaximumTrackImage:stetchRightTrack forState:UIControlStateNormal];
0
Dk Kumar