带有箭头的 UITextView 周围的自定义边框

Question

我需要让 UITextView 看起来像一个带箭头的聊天气泡。我知道如何更改边框颜色、半径和边框宽度。问题是我想让箭头伸出气泡。任何想法如何做到这一点？

我试过制作自定义视图，其中包含气泡图像和 UITextView，但这似乎不是最佳解决方案。

Answer 1

这里有一个制作自定义文本气泡的教程：Text Bubbbles。它有点旧但仍然适用。我之前用过。

SO 上也有类似的问题，第二个答案看起来是您开始的好地方 Speech Buuble in iOS

Answer 2

回答你自己的问题总是很棒...所以一整天我都在试图创造那个泡沫，最终我最终用 UIImageView 和 UITextView 创建了 UIView子视图。帮助的第一件事是像这样使用 resizableImageWithCapInsets：

switch (self.arrowDirection) {
    case BUBBLE_ARROW_DIRECTION_LEFT:
        imageForBubble = [[UIImage
                           imageNamed:@"chatBoxLeftSmall.png"]
                          resizableImageWithCapInsets:UIEdgeInsetsMake(30, 50, 30, 30)];
        break;
    case BUBBLE_ARROW_DIRECTION_RIGHT:
        imageForBubble = [[UIImage
                           imageNamed:@"chatBoxRightSmall.png"]
                          resizableImageWithCapInsets:UIEdgeInsetsMake(30, 30, 30, 40)];
        break;
    default:
        break;
}

并使用如下动画调整大小：

-(void) setSizeForTextView:(UITextView *)textView { CGSize newSize = [textView sizeThatFits:CGSizeMake(textView.frame.size.width, MAXFLOAT)]; CGRect newFrame = textView.frame; newFrame.size = CGSizeMake(fmaxf(newSize.width, textView.frame.size.width), newSize.height);

if(newFrame.size.height > self.initialTextViewFrame.size.height){

    [UIView animateWithDuration:0.1f
                         animations:^{
                             [self setFrame:CGRectMake(self.frame.origin.x,
                                                       self.frame.origin.y,
                                                       kMAX_WIDTH,
                                                       newFrame.size.height+kTXT_VIEW_PADDING_BOTTOM)];
                             [self.bubbleImage setFrame:CGRectMake(self.bubbleImage.frame.origin.x,
                                                                   self.bubbleImage.frame.origin.y,
                                                                   self.bubbleImage.frame.size.width,
                                                                   newFrame.size.height + (kTXT_VIEW_PADDING_BOTTOM - kBUBBLE_IMAGE_PADDING_BOTTOM))];
                             textView.frame = newFrame;
                         }
                         completion:^(BOOL finished){
                         }];

}else if (newFrame.size.height < self.initialTextViewFrame.size.height){

    [UIView animateWithDuration:0.1f
                         animations:^{
                             [self setFrame:CGRectMake(self.frame.origin.x,
                                                       self.frame.origin.y,
                                                       kMAX_WIDTH,
                                                       self.initialViewFrame.size.height)];

                             [self.bubbleImage setFrame:CGRectMake(self.bubbleImage.frame.origin.x,
                                                                   self.bubbleImage.frame.origin.y,
                                                                   self.bubbleImage.frame.size.width,
                                                                   self.initialViewFrame.size.height-kBUBBLE_IMAGE_PADDING_BOTTOM)];
                             textView.frame = newFrame;
                         }
                         completion:^(BOOL finished){
                             textView.frame = self.initialTextViewFrame;
                         }];
}

}

如果有人能找到更好的方法，请告诉我。从我会坚持这个。

带有箭头的 UITextView 周围的自定义边框

Custom border around UITextView with arrow

cocoa-touch

uitextfield

ios