how to Change width of uitableviewcell so that it looks like left or right aligned in chat application

Question

I am implementing chat application and I want to change width of table view cell in chat application so that sender can see his messages left aligned and receiver can see his messages right aligned.

code as below:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
chatCell *cell = (chatCell *)[tableView dequeueReusableCellWithIdentifier:CHAT_CELL_IDENTIFIER];
NSUInteger row = indexPath.row;
if (row < chatData.count)
{
    self.bubbleImage = [[UIImageView alloc] init];
    self.bubbleImage.frame = CGRectMake(0,22,250,66);
    self.bubbleImage.image = [[UIImage imageNamed:@"bubbleMine.png"] stretchableImageWithLeftCapWidth:21 topCapHeight:14];

    NSString *chatText = [[chatData objectAtIndex:row] objectForKey:TEXT];
    cell.textLabel.lineBreakMode = NSLineBreakByWordWrapping;
    UIFont *font = [UIFont systemFontOfSize:14];
    CGSize size = [chatText sizeWithFont:font constrainedToSize:CGSizeMake(150.0f, 1000.0f) lineBreakMode:NSLineBreakByCharWrapping];
    cell.textString.frame = CGRectMake(75, 18, size.width +20, size.height + 20); // set text frame
    cell.textString.font = [UIFont fontWithName:FONT_NAME size:FONT_SIZE];        // set text font
    cell.textString.text = chatText;                                              // set text
    [cell.textString sizeToFit];

    NSDate *theDate = [[chatData objectAtIndex:row] objectForKey:DATE];
    NSDateFormatter *formatter = [[NSDateFormatter alloc] init];
    [formatter setDateFormat:DATE_FORMAT];
    NSString *timeString = [formatter stringFromDate:theDate];
    cell.timeLabel.text = timeString;                                       // set timeLabel to display date and time
    cell.userLabel.text = [[chatData objectAtIndex:row] objectForKey:NAME]; // set userLabel to display userName

    [self.bubbleImage addSubview:cell.userLabel];
    [self.bubbleImage addSubview:cell.timeLabel];
    [self.bubbleImage addSubview:cell.textString];

    [cell addSubview:self.bubbleImage];

}
return cell;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
NSString *cellText = [[chatData objectAtIndex:indexPath.row] objectForKey:TEXT];
UIFont *cellFont = [UIFont fontWithName:FONT_NAME size:FONT_SIZE];
CGSize constraintSize = CGSizeMake(225.0f, MAXFLOAT);
CGSize labelSize = [cellText sizeWithFont:cellFont constrainedToSize:constraintSize lineBreakMode:NSLineBreakByWordWrapping];
return labelSize.height + 40;
}

How are managing to do left and right alignments of the cell? Are they images? — Meera, May 30 '13 at 08:56
You'd probably be better off not trying to change the width of the cell, but to create a custom subview that holds the image and text, and change the width and alignment of that view. — Marcel, May 30 '13 at 08:56
The best solution is to customize your cell for right and left alignment and use it. — Meera, May 30 '13 at 09:22
yeah i want images as cell background for left and right alignment. — Ponting, May 30 '13 at 09:58
@MeeraJPai How can i customize cell for right and left alignment? — Ponting, May 30 '13 at 10:03
@User: You can calculate the width of the textView according to the text content and then vary the image size accordingly.Check this http://stackoverflow.com/questions/14546834/uitextview-in-uitableviewcell-sizetofit-not-working-as-expected/14681895#14681895 — Meera, May 31 '13 at 04:54

score 1 · Accepted Answer · answered May 30 '13 at 10:12

1

Keep something which can help you determine the users so you can switch between right and left alignment in cell. With that info you can place image(right and left alignment) accordingly. You dont have to resize the width of the cell, rather you will have to handle the text size and there by the height of row for the particular cell with chat.

answered May 30 '13 at 10:12

Meera

1,031
6
25

1

I did as you said as : `UIImageView *MyImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0,22,320,66)]; MyImageView.image = [UIImage imageNamed:@"bubbleMine.png"]; [cell.contentView addSubview: MyImageView];` But it gives bad result as: [Screen Shot](http://postimg.org/image/gjz77j3cn/) Image is not stratchable here. – Ponting May 30 '13 at 12:12
The way you did with cap insets is right. I said you dont have to vary the width of the cell. – Meera May 30 '13 at 12:21
I had a similar scenario, where I used core graphics and drew curved rectangular image for chat cell using beizerpath – Meera May 30 '13 at 12:23
this might help you http://maniacdev.com/2012/08/open-source-custom-ios-uitableview-control-for-chat-bubbles-like-the-messages-app – Meera May 30 '13 at 12:24
1

I didnt vary width of cell. Just specified frame size.. [[UIImageView alloc] initWithFrame:CGRectMake(0,22,320,66)]...Ok i am looking at the link that you sent. – Ponting May 30 '13 at 12:29
1

I did this `self.bubbleImage = [[UIImageView alloc] init]; self.bubbleImage.frame = CGRectMake(0,22,220,66); self.bubbleImage.image = [[UIImage imageNamed:@"bubbleMine.png"] stretchableImageWithLeftCapWidth:21 topCapHeight:14]; [cell addSubview:self.bubbleImage]; ` But it adds subview as imageview and text of cell doesn't displayed because image hides text. [Screen shot](http://postimg.org/image/4kjiu93h1/) – Ponting May 30 '13 at 13:08
try rearranging the hierarchy of views by bringing textview subview to front. Usually these can be easily handled by xibs where you can adjust the hierarchy of views easily. – Meera May 30 '13 at 13:14
1

:Thanks. Finally i can able to add subview in chatcell.Screen Shot But when text is more than two lines then image is not stretchable...How can i do that? I also updated code for that please have a look at that. – Ponting May 30 '13 at 13:51

how to Change width of uitableviewcell so that it looks like left or right aligned in chat application

1 Answers1