iOS - UITableViewCell图像调整/调整大小

Question

我创建了一个表格视图，并在其单元格中填充了文本。我想要做的是向细胞添加一个图像，但是发生的事情是图像覆盖了整个细胞并且看起来很糟糕......

这就是我正在做的事：cell.imageView.image = [UIImage imageNamed:@"test2.jpeg"];

这就是它的样子：

我想让它看起来像是：

如何调整表格视图单元格的图像以获得所需的结果？

更新

这是我在下面的答案中尝试过的建议：

cell.imageView.frame = CGRectMake(0.0f, 0.0f, 30.0f, 30.0f);
cell.imageView.layer.cornerRadius = 8.0;
cell.imageView.contentMode = UIViewContentModeScaleAspectFit;
cell.imageView.layer.masksToBounds = YES;
cell.imageView.image = [UIImage imageNamed:@"test2.jpeg"];

但我得到的输出仍然是：

更新2.0

我尝试了其他一些方法：

UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(30, 30, 30, 30)];
imageView.backgroundColor = [UIColor clearColor];
[imageView.layer setCornerRadius:8.0f];
[imageView.layer setMasksToBounds:YES];
[imageView setImage:[UIImage imageNamed:@"test2.jpeg"]];
[cell.contentView addSubview:imageView];

但现在我得到了这个：

Answer 1

首先，您需要将单元格的imageView设置为所需的最大尺寸。然后通过Interface Builder或通过代码确保您拥有正确的内容模式：

cell.imageView.contentMode = UIViewContentModeScaleAspectFit;

基本上在这种模式下，它会尝试适合您为图像创建的空间，但它会保持纵横比。

Jackson发布了一张展示内容模式here的好图片：

对于角落，您将需要QuartzCore，您可以使用以下代码进行设置：

#import <QuartzCore/QuartzCore.h>

...

cell.imageView.layer.cornerRadius = 4;
cell.imageView.layer.masksToBounds = YES;

<强>更新

如果您的imageView不是插座，最好自己将一个imageView添加到单元格中。您可以（并且您应该）通过storyboard / xib执行此操作。 This tutorial might help you就此而言，虽然互联网上有很多。 This stackoverflow question为该问题提供了其他解决方案。

Answer 2

我花了最后几个小时搞清楚如何做到这一点，所以我会分享我发现的东西。您在Update 2.0中的代码是一个良好的开端：

UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(30, 30, 30, 30)];
imageView.backgroundColor = [UIColor clearColor];
[imageView.layer setCornerRadius:8.0f];
[imageView.layer setMasksToBounds:YES];
[imageView setImage:[UIImage imageNamed:@"test2.jpeg"]];
[cell.contentView addSubview:imageView];

你可以搞乱第一行中的数字，让图像出现在你需要的地方;为了我的目的，我使用了(20, 5, 40, 40)。

在[cell.contentView addSubview:imageView]之前添加此行：

[imageView setTag:99];

我们需要此标记来标识我们刚刚添加的子视图。如果每次重新加载单元格时都不删除图像，则图像将开始堆积在那里。对于您的情况，这并没有太大的区别，因为它将继续使用相同的图像，所以它看起来一样。但是，如果您的用户喜欢向上和向下滚动很多，则可能会遇到一些问题，其中包含数百个或更多的图像。如果你的细胞将有不同的图像，它们将开始显示在彼此之上，如果它们的大小不同，它们看起来会非常糟糕。因此，在初始化*imageView之前，请运行此循环：

for (UIImageView *subview in cell.contentView.subviews)
{
    if (subview.tag == 99)
    {
        [subview removeFromSuperView];
    }
}

使用此代码，您的图像应该与Update 2.0中的图像相同，但它应该运行得更好。要移动文字，请使用cell.indentationLevel和cell.indentationWidth。确保您的细胞样式设置为“基本”（看起来像你的样式），并在返回细胞之前的某处，使用

cell.indentationWidth = 10; // The amount each indentation will move the text
cell.indentationLevel = 7;  // The number of times you indent the text

所以这段代码将文本移动10点7次。你可以玩它，直到你看起来正确;这正是我在项目中使用的内容。希望这有帮助！

Answer 3

实现此目的的最佳方法是在您调用cell.imageView.image

的位置添加以下内容

cell.imageView.contentMode = UIViewContentModeScaleAspectFill;

圆角#import <QuartzCore/QuartzCore.h>

cell.imageView.layer.cornerRadius = 8.0;

Answer 4

你可以自己编辑图像吗？尝试按照您喜欢的尺寸编辑图像并手动四舍五入角。然后拨打

  cell.imageView.image = [UIImage imageNamed:@"test3.jpeg"];