Question

Krumelur asked this question关于如何创建类似于mail.app的收件人泡泡。请看下面我的意思截图：

Mail.app picker bubble picture

Selected contact

我可以创建这个元素的外观（包括选中它时的外观），但是当它是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作为地址输入字段，在其中显示使用显示的代码创建的气泡图像以及编辑时的文本（请参阅this StackOverflow question）。如果气泡是删除操作所针对的项目，您只需要为委托方法shouldChangeCharactersInRange处理删除添加的地址和气泡图像的处理程序。

Answer 2

看起来不是很神奇吗？ Three20代码在这里：

TTMessageController.h TTMessageController.m

TTMessageControllerDelegate.h

TTMessageField.h TTMessageField.m

TTMessageRecipientField.h TTMessageRecipientField.m

TTMessageSubjectField.h TTMessageSubjectField.m

TTMessageTextField.h TTMessageTextField.m

当然，您应该使用Apple发布它的Message UI framework。

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

2 个答案: