objective-c - 具有不同尺寸图像的 UITableViewCell

Question

我正在尝试将我的 ReusableCell 用于具有不同尺寸图像的单元格。图像放在一个 220x150 的黑盒子里，带有缩放 UIViewContentModeScaleAspectFit。

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

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

    NewsItem *item = [self.fetchedResultsController objectAtIndexPath:indexPath];

    NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:item.imageUrl]];
    [cell.imageView setImage:[[UIImage alloc] initWithData:data]];
    [cell.imageView setBackgroundColor:[UIColor blackColor]];
    [cell.imageView setContentMode:UIViewContentModeScaleAspectFit];

    CGRect imageViewFrame = cell.imageView.frame;
    imageViewFrame.size.width = 220;
    imageViewFrame.size.height = 150
    [cell.imageView setFrame:imageViewFrame];

    [cell.textLabel setText:item.title];

    return cell;
}

上面的代码导致如下所示的布局，并且在表格 View 中滚动时图像有时会发生变化。

我希望图像像这样对齐，而不是这种非结构化布局:

我在这个ReusableCell 上做错了什么？

编辑 1:

我正在尝试创建一个 imageView 并将此 imageView 作为 super View 添加到 cell.contentView。

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

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

    NewsItem *item = [self.fetchedResultsController objectAtIndexPath:indexPath];

    UIImage *placeholderImage = [UIImage imageNamed:@"ImagePlaceholderThumb"]; //220x150

    UIImageView *imageView = [[UIImageView alloc] initWithImage:placeholderImage];

    NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:item.imageUrl]];
    [imageView setImage:[[UIImage alloc] initWithData:data]];
    [imageView setBackgroundColor:[UIColor blackColor]];
    [imageView setContentMode:UIViewContentModeScaleAspectFit];

    CGRect imageViewFrame = imageView.frame;
    imageViewFrame.size.width = placeholderImage.size.width;
    imageViewFrame.size.height = placeholderImage.size.height;
    [imageView setFrame:imageViewFrame];

    [cell.contentView addSubview:imageView];

    [cell.textLabel setText:item.title];

    return cell;
}

以上代码的结果如下:

这就像一些图像在两个单元格中可见。看起来它们没有保持我在 imageViewFrame 中设置的尺寸。你知道为什么吗？

Answer 1

快速解决方法是使用内容模式 UIViewContentModeScaleAspectFill。图像将在一个或两个维度上拉伸(stretch)以填满整个 ImageView 边界。

您确实需要子类化 UITableViewCell 才能正确执行此操作。

这是一个惰性解决方案，添加一个新的 UIImageView 并使用一个间隔符，正如 Keller 在他的回答中告诉您的那样(请随意接受他的回答，这只是缺少代码)。

tableView:cellForRowAtIndexPath: 的摘录:

...
cell.textLabel.text = [NSString stringWithFormat:@"Cell #%i", indexPath.row];
cell.imageView.image = [UIImage imageNamed:@"spacer.png"]; /* spacer is 64 x 44 */
/* image view width should be ~ 64 px, otherwise it will overlap the text */
UIImageView *iv = [[UIImageView alloc] initWithFrame:(CGRect){.size={64, tableView.rowHeight}}];
switch (indexPath.row) {
    case 0:
        iv.image = [UIImage imageNamed:@"waterfall.png"];
        break;
    /* etc... */
}
if (indexPath.row < 3) {
    /* add black bg to cell w/ images */
    iv.backgroundColor = [UIColor blackColor];
}
iv.contentMode =  UIViewContentModeScaleAspectFit;
[cell.contentView addSubview:iv];
...

表格将如下所示:

您需要在现有的单元格 ImageView 中设置占位符(上面的spacer.png)。它会将文本标签推到右边。

您可以使用纵横比填充并移除背景颜色位:

iv.contentMode =  UIViewContentModeScaleAspectFill;

表格会看起来不对，因为图像是在边界之外绘制的:

只需剪辑到边界以获得更好的结果:

iv.clipsToBounds = YES;