web-dev-qa-db-fra.com

UISwitch personnalisé avec image

J'ai besoin d'implémenter un commutateur personnalisé dans un projet. Actuellement, ce que j'ai trouvé, c'est que nous ne pouvons pas modifier avec UISwitch de manière à mettre en œuvre comme indiqué dans l'image ci-dessous. J'ai suivi les articles et recherché sur stackoverflow et d'autres blogs, mais je n'ai pas trouvé de solution comme souhaité. Une façon consiste à utiliser le contrôle UISegmented comme dans this post, mais cela ne résout pas non plus mon problème.

enter image description here

Merci d'avance pour votre aide

iphoneobjective-cuisegmentedcontroluiswitch
21
Arshad Parwez

Il n'est pas difficile de créer votre propre commutateur. Un UISwitch est un contrôle - essentiellement juste une vue qui envoie un message - avec deux états. Vous pouvez configurer votre propre contrôle personnalisé comme ceci:

  • vue conteneur: une vue simple avec des coins arrondis (définissez le cornerRadius du calque de la vue) et une couleur de fond

  • image de gauche: une vue d'image qui affiche l'image que vous souhaitez afficher sur le côté gauche, c'est-à-dire la coche de votre exemple

  • image de droite: une vue d'image qui affiche l'image que vous souhaitez afficher sur le côté droit, c'est-à-dire la marque X pour votre exemple

  • curseur: une vue d'image montrant la partie curseur du commutateur, placée au-dessus des deux autres vues d'image

Lorsque l'utilisateur appuie ou balaie le contrôle, utilisez Core Animation pour déplacer le curseur de l'autre côté du commutateur et mettre à jour l'état du contrôle et effectuer un fondu rapide vers la couleur d'arrière-plan du nouvel état. Envoyez l'action du contrôle à la cible.

23
Caleb

Comme le dit gasparuff, vous pouvez également le faire avec un UIButton, il suffit de définir les images:

[button setImage:[UIImage imageNamed:@"image_on"] forState:UIControlStateSelected];
[button setImage:[UIImage imageNamed:@"image_off"] forState:UIControlStateNormal];

et quand il est tapé, il suffit de basculer la propriété sélectionnée.

- (void) buttonTap {
    button.selected = !button.selected;
}

Ce qui changera automatiquement les images.

23
Odrakir

Vous connaissez -[UISwitch setOnImage:] et -[UISwitch setOffImage:], droite? Aussi -[UISwitch setTintColor]. Le seul inconvénient que je peux voir est que le commutateur lui-même sera le commutateur iOS standard (bouton rond), mais sinon, ce serait la solution la plus semblable à iOS.

Lors de l'implémentation de votre propre image on/off, n'oubliez pas les restrictions de taille, et aussi que le côté de l'image vers le commutateur est concave. tintColor peut être utilisé pour que le reste du commutateur reflète votre jeu de couleurs. Vous souhaiterez peut-être suivre l'événement valueChanged afin de modifier la couleur de la teinte.

Si vous avez besoin de l'apparence exacte que vous affichez dans votre question (bouton de commutation carré), vous souhaiterez probablement utiliser un contrôle personnalisé, comme l'a suggéré @Caleb.

1
Olie

Il semble que vous vouliez juste que votre contrôle ait seulement 2 états - activé et désactivé.

Un moyen facile pour cela serait de créer 2 images png et d'utiliser un bouton UIB personnalisé avec une image d'arrière-plan et de simplement remplacer ces 2 images chaque fois que le bouton est appuyé.

Est-ce ce que vous essayez de faire ou ai-je mal compris quelque chose?

0
gasparuff