[Résolu] Badge à l'intérieur de l'application

aurel · novembre 2010

Bonsoir,

Pour les besoins de mon app j'ai besoin de mettre un badge de notification sur une image comme l'app facebook qui indique le nombre de messages non lu, vous voyez de quoi je parle???

J'ai fait une recherche sur internet mais je trouve que des explications pour les notifications hors de l'app.

Donc si vous avez des liens vers des tutos ou exemples de codes je suis preneur.

Merci d'avance.......

AliGator · novembre 2010

C'est parce que tu ne dois pas chercher avec le bon terme.

Ce que tu veux c'est juste mettre un badge à ton application.
Rien à voir avec les notifications (qui peuvent aussi mettre des badges à ton appli quand tu reçois ladite notif mais justement dans ton cas ça n'est pas suite à ça que tu veux mettre le badge, donc oublie les notifications)

Doc de UIApplication

aurel · novembre 2010

Le lien que tu m'as donné explique comment mettre un badge sur le springboard de l'iPhone et non a l'intérieur de l'app comme le menu Facebook ou y tout les icônes messages, pages, etc.

Ou alors j'ai pas trouvé la méthode dans le lien que tu m'as donné...

muqaddar · novembre 2010

Si c'est dans l'application, il y a un truc tout prêt pour les badges des UITabBar. Donc regarder de ce côté là .

Si c'est dans l'application, mais n'importe où, y compris au dessus d'une image, il va falloir que tu te pèles une moulinette perso (en dessinant par exemple avec Quartz OU simplement avec une image + un UILabel par dessus).

aurel · novembre 2010

Oui c'est tout a fait ça je veux pouvoir en faire un n'importe ou alors jvais voir sur le net comment créer un badge a la volée.

Merci a vous bonne journée ++

colionel · novembre 2010

Le dessiner avec quartz ca semble un peu overkill...(Surtout qu'a priori c'est du statique donc pas besoin de perf)

Tu peux tout simplement choper une image d'icone avec un badge de notif dessus notif (une capture d'écran que tu fais toi même ou une choper sur le net), un coup de baguette magique avec photoshop ou gimp, un peu de gomme pour virer le chiffre, tu ajoutes cette image avec un label dedans et c'est finis !

muqaddar · novembre 2010

dans 1288874167:

Le dessiner avec quartz ca semble un peu overkill...(Surtout qu'a priori c'est du statique donc pas besoin de perf)

Tu peux tout simplement choper une image d'icone avec un badge de notif dessus notif (une capture d'écran que tu fais toi même ou une choper sur le net), un coup de baguette magique avec photoshop ou gimp, un peu de gomme pour virer le chiffre, tu ajoutes cette image avec un label dedans et c'est finis !

Sauf qu'il faut étendre l'image en largeur si le nombre de chiffres augmente... d'où quartz. ;-)
A moins de dessiner 3 images pour 3 nombres de chiffres différents par exemple. :-)

iSofTom · novembre 2010

dans 1288874706:

Sauf qu'il faut étendre l'image en largeur si le nombre de chiffres augmente... d'où quartz. ;-)

C'est pour ça que sont fait les 9-patchs, ça va étendre une zone de ton image

par exemple, si tu as une image d'un badge rond de 11x11 px:

<br />[[UIImage imageNamed:@&quot;badge.png&quot;] stretchableImageWithLeftCapWidth:5 topCapHeight:5];<br />

Et voila ça te fait une image dans laquelle tes arrondis gauche et droite (et haut et bas aussi, au cas ou) seront préservés, mais le centre sera étiré!

AliGator · novembre 2010

Heu t'es fou Alex là , y'a une méthode pour ça

1) méthode en utilisant une image :
- prévoir une image de bulle de largeur 2*L+1, où L est la largeur de la zone (à gauche comme à droite je suppose que c'est la même taille) à ne pas déformer. Typiquement L correspond donc au rayon de la bulle
- utiliser les méthodes de UIImage "stretchableImageWithLeftCapWidth:topCapHeight:" pour créer, à partir de l'UIImage (contenant l'image de largeur 2*L+1) une UIImage stretchable, et utiliser cette UIImage stretchable pour créer sa bulle. UIKit va automatiquement étirer uniquement le pixel central (d'où le "+1" dans "2*L+1") au besoin sans déformer les L pixels de gauche et les L pixels de droite et conservant ainsi l'arrondi

2) Méthode avec Quartz (exemple de cas simplifié où l'on ne veut pas de dégradé dans la bulle, juste un fond rouge par exemple), en supposant qu'on ait un IBOutlet nommé "bulle" vers un UILabel de notre XIB, il suffit de préparer la bulle avec ce code :

bulle.textColor = [UIColor whiteColor];<br />bulle.layer.cornerRadius = bulle.bounds.size.height/2;<br />bulle.layer.borderWidth = 3;<br />bulle.layer.borderColor = [UIColor whiteColor].CGColor;<br />bulle.backgroundColor = [UIColor redColor];

Et voilà et après quand on veut modifier le texte de la bulle :

bulle.text = @&quot;24&quot;; // par exemple, contenu de la bulle<br />[bulle sizeToFit]; // pour redimentionner le UILabel en largeur pour qu&#39;il s&#39;étire en fonction du contenu

Plutôt que juste un appel à sizeToFit on peut utiliser "sizeThatFit:", récupérer le CGRect obtenu, et l'ajuster un peu (ne récupérer que la largeur du sizeThatFit sans modifier la hauteur du label, rajouter quelques pixels à cette largeur pour avoir qques marges, et affecter la frame.size du label à cette nouvelle taille)

Bref, c'est assez simple dans l'ensemble.

muqaddar · novembre 2010

Et bein, elles ont l'air pas mal vos méthodes en effet !

J'utilisais un "vieux" code qui marche pas mal néanmoins (sur une UIView) :

- (void)drawRect:(CGRect)rect<br />{<br />	UIFont *font = [UIFont boldSystemFontOfSize:14.0];	<br />	CGSize textSize = [self._text sizeWithFont:[UIFont boldSystemFontOfSize:14.0]];<br />	<br />	double capDiameter = textSize.height;<br />	double capRadius = capDiameter / 2.0;<br />	double capPadding = capDiameter / 4.0;<br />	double textWidth = MAX(capDiameter, textSize.width);<br />	<br />	CGRect textBounds = CGRectMake(capPadding, 0.0, textWidth, textSize.height);	<br />	CGRect badgeBounds = CGRectMake(0.0, 0.0, textWidth + (2.0 * capPadding), textSize.height);<br />	<br />	double offsetX = (CGRectGetMaxX(rect) - CGRectGetMaxX( badgeBounds )) / 2.0;<br />	double offsetY = (CGRectGetMaxY(rect) - CGRectGetMaxY( badgeBounds )) / 2.0;<br />	<br />	badgeBounds = CGRectOffset(badgeBounds, offsetX, offsetY);<br />	textBounds = CGRectOffset(textBounds, offsetX, offsetY);<br />	<br />	CGContextRef context = UIGraphicsGetCurrentContext();<br />	<br />	// color to fill badge background<br />	CGContextSetFillColorWithColor(context, _bgColor.CGColor);<br />	<br />	// fill the badge now<br />	CGContextFillEllipseInRect(context, CGRectMake(badgeBounds.origin.x, badgeBounds.origin.y, capDiameter, capDiameter));	<br />	CGContextFillEllipseInRect(context, CGRectMake(badgeBounds.origin.x + badgeBounds.size.width - capDiameter, badgeBounds.origin.y, capDiameter,capDiameter));	<br />	CGContextFillRect(context, CGRectMake(badgeBounds.origin.x + capRadius, badgeBounds.origin.y, badgeBounds.size.width - capDiameter, capDiameter));<br />	<br />	// color to fill the text<br />	CGContextSetFillColorWithColor(context, _textColor.CGColor);<br />	<br />	// set the text now<br />	[self._text drawInRect:textBounds withFont:font lineBreakMode:UILineBreakModeClip alignment:UITextAlignmentCenter];<br />}

Edit : je change le nom du sujet.
Edit 2: puisque c'est comme ça, je vais les tester de facto dans l'application que je suis en train de développer.

muqaddar · novembre 2010

Bon, j'ai essayé la deuxième méthode d'Ali qui marche plutôt bien.

Cependant, j'ai un problème avec le label dans mes UITableViewCells.
Le selectedBackgroundView de la cell passe dessus le label !!?

Je ne vois pas pourquoi ça le ferait avec ce label alors que j'en ai déjà eu plein évidemment dans les TableViewCells...
Etrange.

EDIT : ce sujet a été séparé ici :
http://pommedev.mediabox.fr/index.php/topic,6539.msg64985/topicseen.html#new

aurel · novembre 2010

J'ai essayé ta méthode 2 Ali et il veux pas respecter une hauteur fixe que je lui donne.

Il me dessine ma bulle autour du chiffre j'ai aucun espace autour.

Voici mon code:

UILabel *bulle = [[UILabel alloc] initWithFrame:CGRectMake(180, 180, 50, 20)];<br />	bulle.textColor = [UIColor whiteColor];<br />	bulle.layer.cornerRadius = 10;<br />	bulle.layer.borderWidth = 3;<br />	bulle.layer.borderColor = [UIColor whiteColor].CGColor;<br />	bulle.backgroundColor = [UIColor redColor];<br />	bulle.font = [UIFont boldSystemFontOfSize:12];<br />	bulle.text = @&quot; 24 &quot;;<br />	[bulle sizeToFit];<br />	[self.view addSubview:bulle];

AliGator · novembre 2010

Bah normal puisque comme je le disais sizeToFit va réduire le label à la plus petite taille possible permettant de faire tenir le texte... et que si tu veux qu'il garde une hauteur constante et avoir un espace autour il faut mieux utiliser "sizeThatFits:" qui va te retourner un CGSize, et ensuite modifier la frame comme tu le souhaite en utilisant cette CGSize (en n'utilisant que la largeur puisque la hauteur qu'il te suggère tu ne veux pas l'utiliser, et en rajoutant quelques pixels à la largeur suggérée pour avoir de l'espace autour)

#define kBubblePadding = 10 /* espace à  gauche comme à  droite entre le texte de la bulle et la bulle */<br />...<br />bulle.text = @&quot;24&quot;;<br />CGSize sz = [bulle sizeThatFits:self.view.frame.size];<br />// à  la limite pour notre cas je pense que le paramètre n&#39;est pas utilisé et que CGSizeZero marcherait aussi, mais bon<br />bulle.frame = CGRectMake(bulle.frame.origin.x, bulle.frame.origin.y, sz.width+2*kBubblePadding, bulle.frame.size.height);

Et encore là du coup j'ai affecté la frame pour qu'elle ne change pas son frame.origin, mais si tu veux profiter du fait que tu ajustes la taille de la bulle à son contenu pour aussi la centrer ou la caler dans le coin supérieur droit ou gauche ou quoi de sa superview, c'est l'occasion de faire les calculs adéquats (par exemple pour faire en sorte que en plus d'ajuster la largeur de la bulle, le bord droit de la bulle soit à disons 2px du bord droit de self.view, je sais pas moi, à toi d'adapter pour tes besoins)

aurel · novembre 2010

Là ça fonctionne merci Ali.

J'ai regardé sur le net comment se servir de sizeThatFits mais je n'ai rien trouvé que je comprenais bien pour m'en servir. Là avec ton exemple j'ai tout de suite compris il m'a juste fallu de rajouter un UITextAlignmentCenter pour que le texte soit centré dans ma bulle et voilà .

Merci beaucoup ++

[Résolu] Badge à l'intérieur de l'application

Réponses