Custom border around UITextView with arrow

Question

I need to make UITextView to look like a chat bubble with an arrow. I know how to change border color, radius, and border width. The problem is that I would like to make the arrow stick out of the bubble. Any ideas how to do that?

I have tried to make custom view with bubble image inside and UITextView inside, but that doesn't seem to be the best solution.

score 1 · Answer 1 · edited May 23 '17 at 10:26

1

There is a tutorial for making custom text bubbles here: Text Bubbbles. It is slightly old but still applies. I have used it a while ago.

Also here on SO there is a similar question and the second answer looks like a good place for you to start Speech Buuble in iOS

edited May 23 '17 at 10:26

Community

1
1

answered Jan 06 '15 at 16:04

lewis richardson

43
5

score 0 · Accepted Answer · answered Jan 13 '15 at 18:52

Its always great to answer your own question... So a whole day i was trying to create that bubble and eventually i ended up creating UIView with UIImageView and UITextView subviews. First thing that helped was using resizableImageWithCapInsets like this:

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;
}

And resizing it using animations like this:

-(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;
                         }];
}

}

If someone will find a better way to do this, please let me know. From i will stick with this one.

Custom border around UITextView with arrow

2 Answers2