使用resizableImageWithCapInsets将拉伸的UIImage设置为UILabel的背景

Question

I have a chat application and I want to implement the chat bubbles as the background for the UILabel . This is what I'm trying to implement:

I tried using :

CGFloat scale = [[UIScreen mainScreen]scale]; 
//UIGraphicsBeginImageContext(newSize);
UIGraphicsBeginImageContextWithOptions(newSize, NO, scale);
[img drawInRect:CGRectMake(0,0,newSize.width,newSize.height)];
UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

which results in the image being stretched equally like so:

So I tried using the resizableImageWithCapInsets and setting the image using colorWithPatternImage .

UIImage *newImage = [img resizableImageWithCapInsets:UIEdgeInsetsMake(0, 16, 0, 16)];
cell.answer.backgroundColor = [UIColor newImage];

But all it does is repeat the images as the background like so:

How do I stretch only the middle part of the image?

Or is it not possible using a UILabel ?

Answer 1

For chating using the custom classes of PTSMessagingCell Here you can customize your images and other controls.

Catch the sample code PTSMessagingCell-master

Answer 2

try this.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

static NSString *CellIdentifier = @"Cell";

UIImageView *balloonView;
UILabel *label;

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
    cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
    cell.selectionStyle = UITableViewCellSelectionStyleNone;
    tableView.separatorStyle = UITableViewCellSeparatorStyleNone;       

    balloonView = [[UIImageView alloc] initWithFrame:CGRectZero];
    balloonView.tag = 1;

    label = [[UILabel alloc] initWithFrame:CGRectZero];
    label.backgroundColor = [UIColor clearColor];
    label.tag = 2;
    label.numberOfLines = 0;
    label.lineBreakMode = UILineBreakModeWordWrap;
    label.font = [UIFont systemFontOfSize:14.0];

    UIView *message = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, cell.frame.size.width, cell.frame.size.height)];
    message.tag = 0;
    [message addSubview:balloonView];
    [message addSubview:label];
    [cell.contentView addSubview:message];

    [balloonView release];
    [label release];
    [message release];
}
else
{
    balloonView = (UIImageView *)[[cell.contentView viewWithTag:0] viewWithTag:1];
    label = (UILabel *)[[cell.contentView viewWithTag:0] viewWithTag:2];
}

NSString *text = [messages objectAtIndex:indexPath.row];
CGSize size = [text sizeWithFont:[UIFont systemFontOfSize:14.0] constrainedToSize:CGSizeMake(240.0f, 480.0f) lineBreakMode:UILineBreakModeWordWrap];

UIImage *balloon;

if(indexPath.row % 2 == 0)
{
    balloonView.frame = CGRectMake(320.0f - (size.width + 28.0f), 2.0f, size.width + 28.0f, size.height + 15.0f);
    balloon = [[UIImage imageNamed:@"green.png"] stretchableImageWithLeftCapWidth:24 topCapHeight:15];
    label.frame = CGRectMake(307.0f - (size.width + 5.0f), 8.0f, size.width + 5.0f, size.height);
}
else
{
    balloonView.frame = CGRectMake(0.0, 2.0, size.width + 28, size.height + 15);
    balloon = [[UIImage imageNamed:@"grey.png"] stretchableImageWithLeftCapWidth:24 topCapHeight:15];
    label.frame = CGRectMake(16, 8, size.width + 5, size.height);
}

balloonView.image = balloon;
label.text = text;

return cell;
      }

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    NSString *body = [messages objectAtIndex:indexPath.row];
    CGSize size = [body sizeWithFont:[UIFont systemFontOfSize:14.0] constrainedToSize:CGSizeMake(240.0, 480.0) lineBreakMode:UILineBreakModeWordWrap];
    return size.height + 15;
}

i hope this code is useful for you.

Answer 3

variable newSize must be equal to size of label.

and replace this

cell.answer.backgroundColor = [UIColor newImage];

with

cell.answer.backgroundColor = [UIColor colorWithPatternImage:newImage];

Let me know if it works :)

Reference Link :