ios icono de post sin leer

Me preguntaba si hay un método estándar en iOS para producir el ícono de burbuja numerado para los posts no leídos como los que se usan en el correo para iPhone y Mac.

No estoy hablando de los puntos rojos en el elemento de la aplicación que se hace con el valor de la tarjeta pero sobre la burbuja azul al lado de los buzones de correo.

Por supuesto, uno puede hacerlo manualmente usando coregraphics, pero es más difícil hacer coincidir las dimensiones y el color de los estándares utilizados en el correo, etc.

aquí hay tres forms de hacer esto, en order de dificultad …

  1. captura de pantalla de su aplicación de correo desde su iPhone, envíe la image a Photoshop, extraiga el punto azul y utilícelo como una image en su aplicación. Para utilizarlo en una tablaviewcell, simplemente configura imageView.image = [UIImage imageName: @ "blueDot.png"];

  2. Igual que el número 1, excepto save la image como una escala de grises, de esta manera puedes usar Quartz y superponer tus propios colors encima. para que puedas hacer que ese punto tenga el color que quieras. Cosas muy geniales

  3. Usa cuarzo para dibujar todo. Realmente no es tan difícil. Déjame saber si quieres un código para eso.

OK, tuerce mi arm … aquí está el código para dibujar tu propia esfera de gradiente … de cuarzo.

Haz una class que henetworkinge de UIView. agregue el siguiente código

static float RADIANS_PER_DEGREE=0.0174532925; -(void) drawInContext:(CGContextRef) context { // Drawing code CGFloat radius = self.frame.size.width/2; CGFloat start = 0 * RADIANS_PER_DEGREE; CGFloat end = 360 * RADIANS_PER_DEGREE; CGPoint startPoint = CGPointMake(0, 0); CGPoint endPoint = CGPointMake(0, self.bounds.size.height); //define our grayscale gradient.. we will add color later CGFloat cc[] = { .70,.7,.7,1, //r,g,b,a of color1, as a percentage of full on. .4,.4,.4,1, //r,g,b,a of color2, as a percentage of full on. }; //set up our gradient CGGradientRef gradient; CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB(); gradient = CGGradientCreateWithColorComponents(rgb, cc, NULL, sizeof(cc)/(sizeof(cc[0])*4)); CGColorSpaceRelease(rgb); //draw the gray gradient on the sphere CGContextSaveGState(context); CGContextBeginPath(context); CGContextAddArc(context, self.bounds.size.width/2, self.bounds.size.height/2, radius,start,end , 0); CGContextClosePath(context); CGContextClip(context); CGContextAddRect(context, self.bounds); CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, kCGGradientDrawsBeforeStartLocation); CGGradientRelease(gradient); //now add our primary color. you could refactor this to draw this from a color property UIColor *color = [UIColor blueColor]; [color setFill]; CGContextSetBlendMode(context, kCGBlendModeColor); // play with the blend mode for difference looks CGContextAddRect(context, self.bounds); //just add a rect as we are clipped to a sphere CGContextFillPath(context); CGContextRestoreGState(context); } - (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); [self drawInContext:context]; } 

Si desea utilizar un recurso gráfico de iOS, puede encontrarlo utilizando la herramienta UIKit-Artwork-Extractor . Extrae todo en el escritorio y encuentra el que deseas. Por ejemplo, la insignia roja para notifications se llama SBBadgeBG.png . No sé a cuál te refieres, así que búscalo tú mismo: P

Esto es lo que hice para usar una insignia, el procedimiento es exactamente el mismo para mostrar una burbuja en una subvista de tu tabla:

 // Badge is an image with 14+1+14 pixels width and 15+1+15 pixels height. // Setting the caps to 14 and 15 preserves the original size of the sides, so only the pixel in the middle is stretched. UIImage *image = [UIImage imageNamed:@"badge"]; self.badgeImage = [image stretchableImageWithLeftCapWidth:(image.size.width-1)/2 topCapHeight:(image.size.height-1)/2]; // what size do we need to show 3 digits using the given font? self.badgeFont = [UIFont fontWithName:@"Helvetica-Bold" size:13.0]; CGSize maxStringSize = [[NSString stringWithString:@"999"] sizeWithFont:self.badgeFont]; // set the annotation frame to the max needed size self.frame = CGRectMake(0,0, self.badgeImage.size.width + maxStringSize.width, self.badgeImage.size.height + maxStringSize.height); 

y luego anular el método drawRect: de su vista para pintar la insignia y los numbers dentro:

 - (void)drawRect:(CGRect)rect { // get the string to show and calculate its size NSString *string = [NSString stringWithFormat:@"%d",self.badgeNumber]; CGSize stringSize = [string sizeWithFont:self.badgeFont]; // paint the image after stretching it enough to acommodate the string CGSize stretchedSize = CGSizeMake(self.badgeImage.size.width + stringSize.width, self.badgeImage.size.height); // -20% lets the text go into the arc of the bubble. There is a weird visual effect without abs. stretchedSize.width -= abs(stretchedSize.width *.20); [self.badgeImage drawInRect:CGRectMake(0, 0, stretchedSize.width, stretchedSize.height)]; // color of unread messages [[UIColor yellowColor] set]; // x is the center of the image minus half the width of the string. // Same thing for y, but 3 pixels less because the image is a bubble plus a 6px shadow underneath. float height = stretchedSize.height/2 - stringSize.height/2 - 3; height -= abs(height*.1); CGRect stringRect = CGRectMake(stretchedSize.width/2 - stringSize.width/2, height, stringSize.width, stringSize.height); [string drawInRect:stringRect withFont:badgeFont]; }