Question

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

我曾尝试使用内部的气泡图像和内部的UITextView进行自定义视图，但这似乎不是最佳解决方案。

Answer 1

这里有一个制作自定义文字气泡的教程：Text Bubbbles。它稍微陈旧但仍然适用。我刚才用过它。

同样在这里有一个类似的问题，第二个答案看起来是一个开始的好地方Speech Buuble in iOS

Answer 2

总是很高兴回答你自己的问题......所以我整整一天都试图制作这个泡泡，最后我最终用UIView和UIImageView子视图创建了UITextView。首先有帮助的是使用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周围的自定义边框

2 个答案: