在UITableviewCell中的气泡上显示图像

Question

How do I display an image in a UITableviewCell when a selection is made from images in the imagepicker (see code sample below) as a message bubble (see screenshot below)?

I am making chat app with XMPPFramework. I have used the implementation from this Link to display a speech bubble in a "tableview" cell for receiving and sending messages.

When I select an image or video, I want to display that image like in other chat applications.

Here is code for UITableviewCell for row:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
NSDictionary *s = (NSDictionary *) [messages objectAtIndex:indexPath.row];
NSLog(@"s:-%@",s);

static NSString *CellIdentifier = @"MessageCellIdentifier";

SMMessageViewTableCell *cell = (SMMessageViewTableCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];

if (cell == nil)
{
    //cell = [[SMMessageViewTableCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] ;
    cell=[[SMMessageViewTableCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
}

NSString *sender = [s objectForKey:@"sender"];
NSString *message = [s objectForKey:@"msg"];
//NSString *time = [s objectForKey:@"time"];

CGSize  textSize = { 260.0, 10000.0 };

CGSize size = [message sizeWithFont:[UIFont boldSystemFontOfSize:13]
                  constrainedToSize:textSize
                      lineBreakMode:NSLineBreakByWordWrapping];

size.width += (padding/2);

cell.messageContentView.text = message;
cell.accessoryType = UITableViewCellAccessoryNone;
cell.userInteractionEnabled = NO;
cell.backgroundColor=[UIColor clearColor];
UIImage *bgImage = nil;

if ([sender isEqualToString:@"you"])
{ // left aligned
    bgImage = [[UIImage imageNamed:@"aqua.png"] stretchableImageWithLeftCapWidth:24  topCapHeight:15];

    [cell.messageContentView setFrame:CGRectMake(360 - size.width - padding,
                                                 padding*2,
                                                 size.width,
                                                 size.height+10)];

    UIImageView *imgview=[[UIImageView alloc]initWithFrame:CGRectMake(360 - size.width -padding, padding*2, size.width, size.height+10)];
    imgview.image=image;

    [cell.messageContentView addSubview:imgview];


    [cell.bgImageView setFrame:CGRectMake(cell.messageContentView.frame.origin.x - padding/10,cell.messageContentView.frame.origin.y - padding/10,size.width+padding,size.height+padding)];
}
else
{
    bgImage = [[UIImage imageNamed:@"orange.png"] stretchableImageWithLeftCapWidth:24  topCapHeight:15];

    [cell.messageContentView setFrame:CGRectMake(padding, padding*2, size.width, size.height+10)];

    [cell.bgImageView setFrame:CGRectMake(cell.messageContentView.frame.origin.x - padding/10,cell.messageContentView.frame.origin.y - padding/10,size.width+padding,size.height+padding)];
}

cell.bgImageView.image = bgImage;
//cell.senderAndTimeLabel.text = [NSString stringWithFormat:@"%@ %@", sender, time];
cell.senderAndTimeLabel.text = [self GetDateAndTime];

return cell;
}

Answer 1

In your message object, introduce a flag to determine the message type. Let's say you name it isText. Set it YES for text but Set it NO for media messages (Which you can do in uiimagepicker delegate method. Now in your cellForRowAtIndexPath , you can check the media type. If it is 'NO', you should insert a uiimageview as a subview in the cell to display that image. Make sure to leave margins in the bounds of that subview so that it is properly enclosed in the speech bubble. To make sure the speech bubble adjusts its own size accordingly, Now you will have to edit your heightForRowAtIndexPath Method as well. In the first line your are getting the message object there, Check the flag again. If it is NO, then return height for cell to something like msgImage.frame.size.height+(Top margin to parent view)+ (bottom margin to parentview). Left and right margins will be fixed by centring this imageView to centre of it's parentview ie speech bubble.