在像 Twitter 这样的 UIImageView 中缩放图像

Scaling an image in a UIImageView like Twitter

我在 UITableViewCell 中的 UIImageView 中有一个图像。我想要做的是让图像的宽度等于 tableviewcell 的宽度,高度与宽度成比例,但剪裁到边界,以便图像填充 tableviewcell。

为此我使用了

image.contentMode = UIViewContentMode.ScaleAspectFill
image.clipsToBounds = true

有效。

但是,当我单击 tableviewcell 时,我想像在 Twitter 或 Facebook 应用程序中一样将 imageview 扩展到全屏。当图像全屏时,它不应再使用 .ScaleAspectFill,而应使用 .ScaleAspectFit,以便整个图像都在屏幕上。如何在流畅的动画中实现这一点?目前,在设置动画时在两个缩放选项之间切换会使其在它们之间跳转。

非常感谢。

我认为这样做的最简单机制是有一个单独的视图(与全屏大小相同),在其中有一个新的 UIImageView 和任何需要返回到原始视图的控件table 查看。

要对此进行编码,一个简单的机制是在情节提要中使用单独的视图控制器,其中包含您的 UIImageView 和图像控件等。然后您可以在单击单元格时创建该控制器的实例,而不是推送或呈现控制器,提取新的控制器视图并将其直接拼接到 table 视图层次结构中。我将其用于弹出式气泡帮助,我想在控制器上显示内容并将其定位。我使用了以下示例,它显示了创建控制器并使用它方便地覆盖内容的一般方法:http://blog.typpz.com/2013/12/09/ios-sdk-create-a-pop-up-window/

在您的情况下,您将向叠加层 UIImageView 添加左右偏移、宽度和高度的约束。使用 CTRL 拖动将它们分配给覆盖控制器中的 IBOutlets。然后,您可以根据需要在代码中设置这些,以使图像全屏显示或原始大小与它在您的单元格中显示的位置完全相同。

当用户单击单元格时,您将创建覆盖控制器并设置覆盖图像约束以与 table 单元格中图像的位置完全匹配。然后覆盖控制器视图,将覆盖图像的约束更改为全屏(左侧和顶部偏移为 0,宽度和高度为屏幕宽度和高度),然后为约束更改设置动画。此处介绍了如何为约束设置动画:How do I animate constraint changes?

结果将是在点击时,您会看到图像从其所在位置扩大到全屏。与 Facebook 一样,您可以在动画完成时显示任何控件。您设置反向动画并移除叠加层以向后移动。

由于您有一个完整的叠加视图,所有输入都会被捕获,从而防止与底层交互 table。您可以使用叠加视图的 alpha 来查看或多或少地看到下面的内容。我注意到 Facebook 会在您拖动分解图像时执行此操作。

Facebook 似乎添加了一些不错的拖动手势,可以启动相反的过程并在屏幕上移动图像,然后当您移开手指时,就会发生完全展开的动作。

而且 Facebook 似乎还留了一个空白,让您看起来像是将它拉到全屏。