CODEWITHSUNDEEP
iosiphoneobjective-cuiimageuilabel
Anil
Anil

Reputation: 2438

Setting stretched UIImage as background for UILabel using resizableImageWithCapInsets

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:

enter image description here

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: enter image description here

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:

enter image description here

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

Or is it not possible using a UILabel?

Upvotes: 2

Views: 2883

Answers (3)

Darshan Kunjadiya
Darshan Kunjadiya

Reputation: 3329

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.

Upvotes: 1

abmussani
abmussani

Reputation: 451

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:

Upvotes: 0

Vineesh TP
Vineesh TP

Reputation: 7963

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

Catch the sample code PTSMessagingCell-master

Upvotes: 2

Related Questions