iOS - 如何正确缩放具有不同图像大小的 UIButton（如 Facebook 新闻提要）？

Posted 2023-03-04

【中文标题】iOS - 如何正确缩放具有不同图像大小的 UIButton（如 Facebook 新闻提要）？

【英文标题】：iOS - How to properly scale UIButton with varying image sizes (like Facebook News Feed)?

【发布时间】：2013-02-19 19:47:46

【问题描述】：

我正在尝试为应用复制 Facebook 的新闻提要，并且将包含应显示的图像。图像会有多种尺寸，那么我应该如何正确缩放它们以适应单元格而不显得奇怪？

单元格包含一个 UIButton，然后将图像设置为它。我正在使用一个按钮，因为我想在按下它时打开全尺寸图像。如果用点击手势更改为 UIImageView 更好，我也可以这样做，只是认为按钮更简单。

想法？

【问题讨论】：

您实际上是在阅读 Facebook 的新闻提要，还是只是想要看起来相似的东西？

不，不读取 facebook 数据。只是模仿他们的新闻提要表来显示我自己的自定义数据。但是，我喜欢他们的“图像单元”的干净程度，并且想模仿这一点，同时允许图像可点击以显示完整尺寸的图像。

【参考方案1】：

+ (UIImage *)imageWithImage:(UIImage *)image scaledToSize:(CGSize)newSize 

UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0);
[image drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();    
UIGraphicsEndImageContext();
return newImage;

使用它来根据大小缩放图像。

【讨论】：

虽然这是一种简单的方法，但它有一些潜在的问题：1) 它不保持图像的纵横比。 2) 如果您将生成的UIImage 保存到磁盘（例如缓存缩略图），它将保存全分辨率图像而不是缩放图像。

尝试this中使用的方法。同时将Interpolationlevel设置为Context。

【参考方案2】：

我假设您将使用UITableView 来显示这些图像。

这会在您滚动表格视图时产生问题，因为图像会随着行的加载而调整大小，并且处理时间过长，导致滚动不流畅。

有两种解决方法：

在创建全尺寸图像时创建适当大小的图像，并以这种方式将它们保存到磁盘。如果这些是静态照片，那么您将在图像编辑程序（即 Photoshop）中创建缩略图，并将它们与全分辨率照片一起包含在内。如果照片是动态下载/生成的，那么您需要在保存全尺寸图像时创建较小的版本。这实际上比听起来更复杂，如果这是您需要走的路线，我可以提供一些代码。关键是您无需在加载 tableview 行时调整图像大小，从而节省 很多 时间。

在后台线程中调整图像大小，并在处理完成时将它们添加到表视图行中。这样做的例子很多，包括来自 Apple 的以下示例项目：https://developer.apple.com/library/ios/#samplecode/LazyTableImages/Introduction/Intro.html

最好的性能是两者都做，但根据我的经验，真正需要的只是其中之一。

【参考方案3】：

为什么不通过 UIImageView 的内置函数处理所有图像大小，然后在它们上方放置一个与它们相同大小（框架）的透明按钮...（*使 UIButton 仅在背景中透明要清除的颜色和按钮类型为Custom（我认为默认是圆角矩形或其他东西）

另一方面，如果您只想检测 UIImageView 上的点击而不在图像上放置透明 UIButton，只需使用 touchesBegan 并检测触摸是否在数组中的 UIImage 上。

【参考方案4】：

您可以在 Quartz 2D 框架中使用[CGAffineTransformMakeScale][1] 非常轻松地缩放视图。

#define X_SCALE_FACTOR 2.5
#define Y_SCALE_FACTOR 2.5
UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"myimage.png"]];
imageView.transform = CGAffineTransformMakeScale(X_SCALE_FACTOR, Y_SCALE_FACTOR);