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

Question

Krumelur asked this question关于如何创建类似于 mail.app 的收件人气泡。请查看下面的屏幕截图以了解我的意思:

我可以创建此元素的外观(包括选中它时的外观)，但当它是 UITextField 的一部分时，我很难获得行为。如何让气泡成为 UITextField 文本的一部分？例如，当您按足够多的退格键时，气泡会高亮显示，再按一次就会被删除，就好像它是文本的一部分一样。我也很难移动光标。

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

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

Answer 1

我不喜欢 Three20 在尝试自定义事物、修复分析器警告并使其在 Xcode 4 中构建时有过糟糕的经历。永远不会在新项目中再次使用它。但在这种情况下，它可能会做你想做的。

不过，您可以相当简单地制作自己的泡泡。我希望我能感谢我从中获得此信息的博客作者，但那是两年前的事了，现在我无法通过 Google 找到它。基本上你选择一种颜色，绘制圆形端盖，在它们之间放置一个矩形，然后将所需的文本放在顶部。

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 作为地址输入字段，您可以在其中显示气泡图像，这些气泡图像是在您编辑它时使用显示的代码以及文本(请参阅 this StackOverflow question)创建的。您只需要为委托(delegate)方法 shouldChangeCharactersInRange 编写一个处理程序来处理删除添加的地址和气泡图像(如果气泡是删除操作的目标项目)。