UITableView 有一个“丑陋”的地方动态高度行的背景图像

Question

我创建了一个 UITableViewController ，它根据每行包含的文本量计算其高度。计算行高的代码如下所示：

- (CGFloat)tableView:(UITableView*)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    CGSize constraint = CGSizeMake(CELL_CONTENT_WIDTH - (CELL_CONTENT_MARGIN * 2), 20000.0f);
    Message *message = [[[[SessionData sharedSessionData] sessions] objectAtIndex:[indexPath section]] objectAtIndex:[indexPath row]];
    CGSize size = [[message text] sizeWithFont:[UIFont systemFontOfSize:FONT_SIZE] constrainedToSize:constraint lineBreakMode:UILineBreakModeWordWrap];

    return size.height + (CELL_CONTENT_MARGIN * 2) + 38;
}

正如您可能注意到的，我使用一个名为 SessionData 的单独类作为 UITableViewDatasource。在 SessionData 类中，我绘制了行。每行都有一个顶部图像、中心图像（根据行高重复）和底部图像。我的问题如下：中心图像绘制得比底部和顶部图像稍暗。我的猜测是，这与图像的重复性质有关，因为顶部和底部图像绘制得很好。以下代码是我的 [tableView:cellForRowAtIndexPath:] 消息的一部分：

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *CellIdentifier = @"Cell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
    }

    // other stuff here, most likely not related to my issue ...

    Message *message  = [[sessions objectAtIndex:[indexPath section]] objectAtIndex:[indexPath row]];       
    CGSize constraint = CGSizeMake(CELL_CONTENT_WIDTH - (CELL_CONTENT_MARGIN * 2), 20000.0f);
    CGSize size = [[message text] sizeWithFont:[UIFont systemFontOfSize:FONT_SIZE] constrainedToSize:constraint lineBreakMode:UILineBreakModeWordWrap];

    [label setText:[message text]];
    [label setFrame:CGRectMake(CELL_CONTENT_MARGIN, CELL_CONTENT_MARGIN - 5.0f, CELL_CONTENT_WIDTH - (CELL_CONTENT_MARGIN * 2), size.height)];
    [label setBackgroundColor:[UIColor clearColor]];

    viewTop = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"im1 top.png"]];
    viewMid = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"im1 mid.png"]];
    viewBot = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"im1 bot.png"]];      

    [viewTop setFrame:CGRectMake(0.0, 0.0, 300.0, 17.0)];
    [viewMid setFrame:CGRectMake(0.0, 17.0, 300.0, size.height - 10)];
    [viewBot setFrame:CGRectMake(0.0, 17.0 + size.height - 10, 300.0, 31.0)];

    [viewTop setBackgroundColor:[UIColor clearColor]];
    [viewMid setBackgroundColor:[UIColor clearColor]];
    [viewBot setBackgroundColor:[UIColor clearColor]];  

    [cell.backgroundView setBackgroundColor:[UIColor clearColor]];

    [((UIImageView *)cell.backgroundView) addSubview:viewTop];  
    [((UIImageView *)cell.backgroundView) addSubview:viewMid];  
    [((UIImageView *)cell.backgroundView) addSubview:viewBot];

    [[cell backgroundView] addSubview:label];   

    return cell;
}

我的猜测是我需要创建一个具有顶部、中心和底部 imageView 总大小（宽度、高度）的容器视图，并将容器视图添加到单元格中，但这似乎不起作用。有人知道如何解决这个问题吗？

请注意：我的 UITableViewController 有一个渐变作为背景图像。因此顶部/中心/底部图像绘制在背景渐变的顶部。也许这也是问题的一部分。

Answer 1

这里有几点需要注意。

首先，单元格中正在进行大量处理，这将导致设备上的滚动性能非常差。您应该更好地利用重新排队单元格并执行此处所有单元格通用的大部分单元格设置：

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
        // Do cell layout in here!
    }

这样，可以重用单元格及其子视图，而不是每次单元格出现在屏幕上时都重新创建（使用 tag< /code> 属性和 viewWithTag: 视图方法）。

其次，您可能希望查看 可拉伸图像。

第三，您会发现手动绘制单元格的性能要好得多。创建一个自定义视图（添加到内容视图中），覆盖 drawRect:，使用 UIImage 的 drawInRect: 方法在其上绘制图像。这将显着加快速度！绘制所有可以绘制的东西，因为子视图布局的成本很高！另外，如果可能的话，请确保不使用 UIView（包括 UIImageView、UILabel 等）透明度，设置 opaque = YES 并设置背景颜色。最好使用 NSString 的 drawInRect: 方法在 drawRect: 中绘制文本，这将提供透明 UILabel 的外观。

但是，如果您的单元格非常少，例如 < 4什么的，那么可能是画法太多了。不过，还是非常建议！

希望这有帮助！

Answer 2

感谢您的建议迈克尔。我确实可以使用以下代码解决我的图形问题：

[bubbleView setImage:[bubble stretchableImageWithLeftCapWidth:165 topCapHeight:30]];

我现在可以使用 1 个图像，而不是使用 3 个单独的图像来创建聊天气泡，并且它可以优雅地拉伸。确实是一个非常好的建议:)

尽管我似乎没有太大的速度问题，但我确实按照您的建议部分重写了我的代码，主要是通过在代码的单元格初始值设定项部分中构造单元格的主要部分。我确实注意到速度略有提高，也许在设备上更明显（与模拟器相比）。

目前我仍然使用 ImageView 绘制图像（正如您可能注意到的那样），每当我需要更快的渲染速度时，我都会查看 [UIImage drawInRect:] 。

感谢您的建议，非常感谢。