Question

我想知道iOS中是否有标准方法可以为未读消息生成编号的气泡图标，就像iphone和mac的邮件一样。

我不是在谈论应用项目上的红点，这些红点用徽章值完成，但是关于邮箱旁边的蓝色气泡。

当然可以使用coregraphics手动完成，但是很难匹配邮件等中使用的标准尺寸和颜色。

Answer 1

这里有三种方法可以做到这一点，按难度排序..

从您的iphone屏幕截图发送您的邮件应用程序，将图像发送到photoshop，提取蓝点并将其用作应用程序中的图像。要在tableviewcell中使用它，只需设置imageView.image = [UIImage imageName：@“blueDot.png”];
与＃1相同，除了将图像保存为灰度外，这样您就可以使用Quartz并在其上面叠加您自己的颜色。所以你可以把那个点做成你想要的任何颜色。很酷的东西。
使用Quartz绘制整个内容。它真的不那么难。如果您想要一些代码，请告诉我。

好的，扭动我的手臂......这是从石英中绘制自己的渐变球体的代码。

创建一个继承自UIView的类。添加以下代码

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];
}

Answer 2

如果您想使用iOS中的图形资源，可以使用UIKit-Artwork-Extractor工具找到它。将所有内容解压缩到桌面并找到所需的内容。例如，通知的红色徽章称为SBBadgeBG.png。我不知道你的意思，所以自己去搜索：P

这就是我使用徽章所做的操作，在您的表的子视图中显示气泡的过程完全相同：

// 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);

然后覆盖视图的方法drawRect:以绘制徽章和内部数字：

- (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];
}

ios未读消息图标

2 个答案: