Stretching bubble image in Chat app

Question

I am creating a chat app. I have to stretch the bubble image according to the text like other chatapps. I am using AutoLayout constraints. Size of imageview containing bubble increaser perfectly. (I have given yello background color to it). The bubble image is not getting stretched.

I have added these constraints:

For stretching image I have added this:

let myImage =  self.imageNamed("Bubble_Me")
        let new_Image = myImage.stretchableImage(withLeftCapWidth: 15, topCapHeight: 14)
        cell.bubbleImage.image = new_Image

If anyone have idea about this, please respond. Thanks in advance.

Answer 1

First get the size of your text by using this.

UIFont *font = [UIFont systemFontOfSize:14.0];
    NSDictionary *attrsDictionary = [NSDictionary dictionaryWithObject:font
                                                                forKey:NSFontAttributeName];
    NSAttributedString *attrString = [[NSAttributedString alloc] initWithString:message attributes:attrsDictionary];

    CGRect paragraphRect =
    [attrString boundingRectWithSize:CGSizeMake(tableView.frame.size.width - 20 , CGFLOAT_MAX)
                                 options:(NSStringDrawingUsesLineFragmentOrigin|NSStringDrawingUsesFontLeading)
                                 context:nil];

After you get the frame of your text then get the height from the frame of text and put height into the imageView of the bubble. this all things done into the tableViewCell custom class into the -(void)layoutSubviews method.

Answer 2

What you should do is to set the image in background of TextView so that it stretches as much the textview

text.backgroundColor =  UIColor(patternImage: UIImage(named:"bg.png")!)

You should always to use a "Resizable Bitmaps" better known as 9-patch images for this type of problem.

Answer 3

try this one :

cell.bubbleImage.image = [[UIImage imageNamed:@"sender.png"] stretchableImageWithLeftCapWidth:2 topCapHeight:2];

Answer 4

Try this @SNarula

cell.bubbleImage.image = [[UIImage imageNamed:@"Bubble_Me"] resizableImageWithCapInsets:UIEdgeInsetsMake(20, 20, 20, 20) resizingMode:UIImageResizingModeStretch];