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;
}

上面的代码导致如下布局,并且在表格视图中滚动时图像有时会发生变化.

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

我对这个ReusableCell做错了什么？

EDIT1:

我正在尝试创建一个imageView并将此imageView作为superview添加到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.图像将在一维或两维中拉伸,以填充整个图像视图边界.

你真的需要子类化UITableViewCell才能做到这一点.

Thre是一个懒惰的解决方案,添加一个新的UIImageView和使用垫片,凯勒在他的回答中告诉你(随意接受他的回答,这只是缺少的代码).

提取物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];
...

该表将如下所示:

您需要spacer.png在现有单元格图像视图中设置占位符(上方).它会将文本标签推向右侧.

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

iv.contentMode =  UIViewContentModeScaleAspectFill;

该表看起来不对,因为图像是在边界外绘制的:

只需剪切到边界即可获得更好的结果:

iv.clipsToBounds = YES;