ios - UITableView 单元格内容显示不正确

Question

我使用自动布局并希望显示带有自定义单元格的 UITableView，该自定义单元格具有带有可变内容的 UITextView。

单元格如下所示。对于聊天消息，当单元格首次显示时，一行中仅显示 2-3 个字符，下一个字符将被强制转到下一行。但是，当我滚动 tableView 以使这些单元格不可见并向后滚动以使它们可见时(我这样做是为了在它们再次可见时再次调用 cellForRowAtIndexPath: 方法来呈现单元格)，它们正确地呈现单元格，如下所示第二张图片。

代码:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [chatData count];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    RS_User *user = [[RS_User alloc]init];
    chatCell *cell = (chatCell *)[tableView dequeueReusableCellWithIdentifier:CHAT_CELL_IDENTIFIER];
    NSUInteger row = indexPath.row;
    cell.chatCellBackground.image = nil;

        NSString *chatText = [[chatData objectAtIndex:row] objectForKey:TEXT];       // get text string(message) from array

        cell.textLabel.lineBreakMode = NSLineBreakByWordWrapping;
        UIFont *font = [UIFont systemFontOfSize:FONT_SIZE];
        cell.textString.font = [UIFont fontWithName:FONT_NAME size:FONT_SIZE];        // set text font
        cell.textString.text = chatText;

        // set text
        CGSize size = [cell.textString.text sizeWithFont:cell.textString.font constrainedToSize:CGSizeMake(SET_WIDTH, MAXFLOAT) lineBreakMode:NSLineBreakByCharWrapping];
        cell.textString.frame = ...;
        [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.timeLabel.font = [UIFont fontWithName:FONT_NAME size:SMALL_FONT_SIZE];

        cell.userLabel.text = @"Name";//[[chatData objectAtIndex:row] objectForKey:NAME];       // set userLabel to display userName

        CGSize size1 = [cell.userLabel.text sizeWithFont:font constrainedToSize:CGSizeMake(SET_WIDTH, MAXFLOAT) lineBreakMode:NSLineBreakByCharWrapping];

        // check cell contains sender name or receiver name
        if (thisCellIsForSender)
        {
            // Set bubble for sender
            cell.chatCellBackground.image = [[UIImage imageNamed:@"bubbleMine.png"] stretchableImageWithLeftCapWidth:STRETCHED_WIDTH topCapHeight:STRETCHED_HEIGHT];
            cell.chatCellBackground.frame = ...;
        }
        else
        {
            // set bubble for receiver
            cell.chatCellBackground.image = [[UIImage imageNamed:@"bubbleSomeone.png"] stretchableImageWithLeftCapWidth:STRETCHED_WIDTH topCapHeight:STRETCHED_HEIGHT];
            cell.chatCellBackground.frame = ...;
        }

    [cell setNeedsLayout];
    [cell layoutIfNeeded];
    return cell;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    RS_User *user = [[RS_User alloc]init];
    chatCell *cell = (chatCell *)[tableView dequeueReusableCellWithIdentifier:CHAT_CELL_IDENTIFIER];
    NSUInteger row = indexPath.row;
    cell.chatCellBackground.image = nil;

    NSString *chatText = [[chatData objectAtIndex:row] objectForKey:TEXT];       // get text string(message) from array

    cell.textLabel.lineBreakMode = NSLineBreakByWordWrapping;
    UIFont *font = [UIFont systemFontOfSize:FONT_SIZE];
    cell.textString.font = [UIFont fontWithName:FONT_NAME size:FONT_SIZE];        // set text font
    cell.textString.text = chatText;

    // set text
    CGSize size = [cell.textString.text sizeWithFont:cell.textString.font constrainedToSize:CGSizeMake(SET_WIDTH, MAXFLOAT) lineBreakMode:NSLineBreakByCharWrapping];
    cell.textString.frame = ...;
    [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.timeLabel.font = [UIFont fontWithName:FONT_NAME size:SMALL_FONT_SIZE];

    cell.userLabel.text = [[chatData objectAtIndex:row] objectForKey:NAME];       // set userLabel to display userName

    [cell setNeedsUpdateConstraints];
    [cell updateConstraintsIfNeeded];

    CGSize size1 = [cell.userLabel.text sizeWithFont:font constrainedToSize:CGSizeMake(SET_WIDTH, MAXFLOAT) lineBreakMode:NSLineBreakByCharWrapping];

    // check cell contains sender name or receiver name
        if (thisCellIsForSender)
        {
            // Set bubble for sender
            cell.chatCellBackground.image = [[UIImage imageNamed:@"bubbleMine.png"] stretchableImageWithLeftCapWidth:STRETCHED_WIDTH topCapHeight:STRETCHED_HEIGHT];
            cell.chatCellBackground.frame = ...;
        }
        else
        {
            // set bubble for receiver
            cell.chatCellBackground.image = [[UIImage imageNamed:@"bubbleSomeone.png"] stretchableImageWithLeftCapWidth:STRETCHED_WIDTH topCapHeight:STRETCHED_HEIGHT];
            cell.chatCellBackground.frame = ...;
        }

    cell.bounds = CGRectMake(0.0f, 0.0f, CGRectGetWidth(tableView.bounds), CGRectGetHeight(cell.bounds));

    [cell setNeedsLayout];
    [cell layoutIfNeeded];

    return cell.bounds.size.height;        
}

更新:我可以解决 coverback 的回答中的一些问题。静止单元布局不正确。我正在为单元格中每个 UI 对象的约束添加照片。

用户名:

时间戳:

聊天消息:

气泡图:

单元格布局:

• cellForRowAtIndexPath: 中的单元格高度始终为 100，即使我从 heightForRowAtIndexPath: 方法返回了不同的值。 Storyboard中的单元格高度为 100。

• 第三个单元格中的聊天消息从底部剪裁。

• 时间戳和聊天消息标签有时无法正确对齐，即使两者都具有约束与用户名标签的垂直间距。

• 第三个单元格中的用户名标签消失了。

你看到约束有什么问题了吗？你可以问我分析约束是否困难。

Answer 1

结合 thandasoru 和 coverback 的答案解决了我的问题。下面是我使用的代码。

我在自定义 UITableViewCell 类中添加了以下方法。

- (void)layoutSubviews
{
    [super layoutSubviews];
    CGFloat maxTextWidth = [UIScreen mainScreen].bounds.size.width * 0.40;
    self.userLabel.preferredMaxLayoutWidth = maxTextWidth;
    self.chatMessage.preferredMaxLayoutWidth = maxTextWidth;
    self.timeLabel.preferredMaxLayoutWidth = self.timeLabel.frame.size.width;
    [super layoutSubviews];
}

UITableView 数据源方法:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    CustomCell * cell = (CustomCell *)[tableView dequeueReusableCellWithIdentifier:@"customCellId"];
    // Set all label's text and image to ImageView
    ...

    // Update layout
    [cell setNeedsLayout];
    [cell layoutIfNeeded];
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    customCell * cell = (customCell *)[self tableView:tableView cellForRowAtIndexPath:indexPath];

    NSString * userName = cell.userLabel.text;
    NSString * chatText = cell.chatMessage.text;

    // Get bounding rect of userName label
    CGRect userNameFrame = [userName boundingRectWithSize:CGSizeMake(maxLabelWidth, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:cell.userLabel.font} context:nil];

    // Get bounding rect of chatMessage label
    CGRect chatTextFrame = [chatText boundingRectWithSize:CGSizeMake(maxLabelWidth, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:cell.chatMessage.font} context:nil];

    // Calculate cell height from its contents
    height = userNameFrame.size.height + chatTextFrame.size.height + PADDING_ABOVE_TOP_LABEL + DISTANCE_BETWEEN_TWO_LABELS + PADDING_BELOW_BOTTOM_LABEL;

    return height;