在Mail.app/Three20中重新创建收件人冒泡行为

Question

Krumelur 问了一个关于如何创建类似于mail.app的收件人泡泡的问题.请看下面我的意思截图:

我可以创建这个元素的外观(包括它被选中后的外观),但是我正在努力获得它的一部分时的行为UITextField.如何让泡泡充当UITextField文本的一部分？例如,当您按下退格按钮时,气泡会突出显示,再过一次按下将被删除,就好像它是文本的一部分一样.我也很难移动光标.

最好是Monotouch的答案很棒,但Objective-C答案也非常受欢迎.我不是要求确切的代码(虽然如果你愿意放弃它,那么我不会说不!:D)而是如何实现这一点.

我知道Three20项目有一个类似的元素,但我找不到实际执行代码的位置.我很抱歉,如果这没有多大意义,我有点难以提出这个问题,请随时问我澄清问题的任何问题!

Answer 1

我不喜欢Three20在尝试定制事物,修复分析器警告以及使其在Xcode 4中构建时遇到不好的经历.永远不会在新项目中再次使用它.但在这种情况下它可能会做你想要的.

但是你可以相当简单地制作自己的泡泡.我希望我能够赞扬我从中得到这个博客的作者,但它是两年前的,现在我找不到谷歌了.基本上你选择一种颜色,绘制圆形端盖,在它们之间放置一个矩形,然后将所需的文本放在顶部.

UIGraphicsBeginImageContext(CGSizeMake(SIDELENGTH, SIDELENGTH));

CGContextRef context = UIGraphicsGetCurrentContext();

// the image should have a white background
[[UIColor clearColor] set];
CGRect myRect = CGRectMake(0.0f, 0.0f, SIDELENGTH, SIDELENGTH);
UIRectFill(myRect);

[self.color set];

// Drawing code
CGSize textSize = [self.text sizeWithFont:[UIFont boldSystemFontOfSize:[UIFont systemFontSize]]];

double capDiameter = textSize.height;
double capRadius = capDiameter / 2.0;
double capPadding = capDiameter / 4.0;
double textWidth = MAX( capDiameter, textSize.width ) ;

CGRect textBounds = CGRectMake(capPadding, 0.0, textWidth, textSize.height);

CGRect badgeBounds = CGRectMake(0.0, 0.0, textWidth + (2.0 * capPadding), textSize.height);

double offsetX = (CGRectGetMaxX(myRect) - CGRectGetMaxX(badgeBounds)) / 2.0;
double offsetY = (CGRectGetMaxY(myRect) - CGRectGetMaxY(badgeBounds)) / 2.0;
badgeBounds = CGRectOffset(badgeBounds, offsetX, offsetY);
textBounds = CGRectOffset(textBounds, offsetX, offsetY);

CGContextFillEllipseInRect(context, 
                           CGRectMake(badgeBounds.origin.x, badgeBounds.origin.y, capDiameter, capDiameter));

CGContextFillEllipseInRect(context, 
                           CGRectMake(badgeBounds.origin.x + badgeBounds.size.width - capDiameter, badgeBounds.origin.y, 
                                      capDiameter, capDiameter));

CGContextFillRect(context, CGRectMake(badgeBounds.origin.x + capRadius, badgeBounds.origin.y, 
                                      badgeBounds.size.width - capDiameter, capDiameter));

if(self.textColor != nil) {
    const CGFloat* colors = CGColorGetComponents(self.textColor.CGColor);
    CGColorSpaceRef space = CGColorGetColorSpace(self.textColor.CGColor);
    CGColorSpaceModel model = CGColorSpaceGetModel(space);

    if(model == kCGColorSpaceModelMonochrome)
        // monochrome color space has one grayscale value and one alpha
        CGContextSetRGBFillColor(context, *(colors + 0), *(colors + 0), *(colors + 0), *(colors + 1));
    else
        // else a R,G,B,A scheme is assumed.
        CGContextSetRGBFillColor(context, *(colors + 0), *(colors + 1), *(colors + 2), *(colors + 3));
} else 
    // else use plain white
    CGContextSetRGBFillColor(context, 1.0f, 1.0f, 1.0f, 1.0f);

[self.text drawInRect:textBounds 
 withFont:[UIFont boldSystemFontOfSize:[UIFont systemFontSize]] 
 lineBreakMode:UILineBreakModeClip alignment:UITextAlignmentCenter];

UIImage* image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

return image;

您描述的删除按钮行为也非常简单 - 一旦您选择并接受匹配,就会在插入点处绘制气泡,并将UITextField的框架更改为在气泡后开始.如果你在UITextField框架的开头并且你得到另一个删除,删除泡泡UIImageView,将UITextField框架重置为UIImageView用于开始的位置.

或者您可以使用UIWebView作为地址输入字段,在编辑它时,您可以在其中显示使用显示的代码和文本创建的气泡图像(请参阅此StackOverflow问题).如果气泡是删除操作所针对的项目,您只需要为委托方法shouldChangeCharactersInRange处理删除添加的地址和气泡图像的处理程序.

Answer 2

当然，您应该使用Apple 发布的Message UI 框架。