iOS - UITableViewCell图片调整/缩放

Question

iOS - UITableViewCell图片调整/缩放

iosuitableview

14

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

这是我的代码：cell.imageView.image = [UIImage imageNamed:@"test2.jpeg"];

这是它目前的样子： enter image description here

我想要达到的效果是： enter image description here

如何调整表格视图单元格中的图像大小以达到期望的效果？

更新

这是我尝试了下面答案中建议的内容：

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

但现在我得到了这个：在此输入图片描述

- Vanessa

4个回答

4

我花了几个小时的时间研究如何做到这一点，所以我会分享我所发现的。你从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];
    }
}

使用这段代码，你的图像应该和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次。您可以根据需要进行调整，直到达到理想的效果；这只是我在项目中使用的示例。希望能对您有所帮助！

- effendo

非常赞这两行代码 cell.indentationWidth = 10; // 每个缩进所移动的文本量 cell.indentationLevel = 7; // 缩进文本的次数 - Abhilash Reddy Kallepu

应该是removeFromSuperview（没有大写的V） - NoelHunter

1

你能编辑图片本身吗？尝试将图片缩小到所需大小，并手动将角落修圆。然后调用。

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

- T. Cowart

0

最佳实现方法是在调用cell.imageView.image的位置添加以下内容。

cell.imageView.contentMode = UIViewContentModeScaleAspectFill;

对于圆角，需要导入#import <QuartzCore/QuartzCore.h>

cell.imageView.layer.cornerRadius = 8.0;

- jms_g4

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tiago Almeida · Accepted Answer

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

cell.imageView.contentMode = UIViewContentModeScaleAspectFit;

使用此模式时，它将尝试适应您为图像创建的空间，但仍将保持纵横比。

Jackson发布了一张很好的图片，展示了内容模式，可以在这里看到:

enter image description here

对于圆角，您需要使用QuartzCore，并且可以使用以下代码进行设置:

#import <QuartzCore/QuartzCore.h>

...

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

更新

如果您的imageView不是一个outlet，最好自己在单元格中添加一个imageView。您可以通过storyboard/xib实现（建议这么做）。这篇教程可能会对您有所帮助，虽然互联网上有很多类似的教程。这个 stackoverflow 问题提供了其他解决该问题的方法。