Question

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

单元格显示如下。对于聊天消息，当首次显示单元格时只有2-3个字符显示在一行中，下一个字符被强制转到下一行。但是当我滚动tableView以便这些单元格不可见并向后滚动以使它们可见时（我这样做，以便当它们再次可见时再次调用cellForRowAtIndexPath：方法来渲染单元格），它们会正确渲染单元格，如图所示第二张图片。

enter image description here

代码：

- (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对象的约束添加照片。

用户名：

enter image description here

时间戳：

enter image description here

聊天消息：

enter image description here

冒泡图片

enter image description here

单元格布局：

cellForRowAtIndexPath:中的单元格高度始终为100，即使我从heightForRowAtIndexPath:方法返回不同的值。故事板中的单元格高度为100。
第三个单元格中的聊天消息从底部剪切。
即使两者都有约束vertical spacing from username label，时间戳和聊天消息标签也有时间未正确对齐。
第三个单元格中的用户名标签消失。

enter image description here

你看到约束有什么不对吗？您可以问我是否难以分析约束。

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;

Answer 2

您可以动态确定单元格高度，以便文本显示在一行上。我给了CGSize（320,568）作为界限。但您可以根据需要更改大小

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSString *chatText = [[chatData objectAtIndex:row] objectForKey:TEXT];
    CGRect frame = [chatText boundingRectWithSize:CGSizeMake(320,568) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:18.0f]} context:nil];
    return frame.height; //returns cell's height after calculating the area that text needs
}

Answer 3

您正在设置文本框架并调用sizeToFit：

    CGSize size = [cell.textString.text sizeWithFont:cell.textString.font constrainedToSize:CGSizeMake(SET_WIDTH, MAXFLOAT) lineBreakMode:NSLineBreakByCharWrapping];
    cell.textString.frame = ...;
    [cell.textString sizeToFit];

这不适用于自动布局。您需要完全删除设置框架和sizeToFit，对于直接设置的所有其他框架也是如此。如果之后事情不起作用，那就意味着一些限制是不正确的。但混合方法总是打破布局。

对于UILabel，请务必将preferredMaxLayoutWidth设置为标签的宽度，否则文字可能无法正确换行：

- (void)layoutSubviews
{
    [super layoutSubviews];
    self.label.preferredMaxLayoutWidth = self.label.frame.size.width;
    [super layoutSubviews];
}

另外，你的高度计算方法不应该与cellForRowAtIndexPath:做同样的事情，如果你想使用相同的代码，只需调用其他方法来获取一个单元格。

UITableView单元格内容无法正确显示

3 个答案: