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.

Glossitis

did you sliced the image in Assets.xcassets? – Glossy

Yes, The same image slicing works in other code where everything is implemented programatically. I want to do the same with autolayouts. It doesn't work with autolayouts. – Glossitis

Please use nini patch image github.com/shiami/SWNinePatchImageFactory – Concealment

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.

Chickadee

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.

Leatherleaf

Answer 3

Try this @SNarula

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

Sickert

Answer 4

try this one :

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

Antibiosis