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

时间:2015-04-16 12:50:23

标签: ios swift uiimageview uiimage

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

为此,我使用了

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

有效。

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

非常感谢。

1 个答案:

答案 0 :(得分:3)

我认为最简单的机制是拥有一个单独的视图(与整个屏幕大小相同),你可以在其中拥有一个新的UIImageView以及返回原始表视图所需的任何控件。

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

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

当用户单击单元格时,您将创建叠加控制器并将叠加图像约束设置为与表格单元格中图像的位置完全匹配。然后,您覆盖控制器视图,将叠加图像的约束更改为全屏(0左和上偏移,宽度和高度到屏幕宽度和高度),然后为约束更改设置动画。如何为约束设置动画如下所述:How do I animate constraint changes?

结果将是点击,看起来您看到图像从其位置增长到全屏。为了像Facebook一样,你可以在动画完成时显示任何控件。您可以设置相反的动画并移除叠加层以向后移动。

由于您具有完整的叠加视图,因此捕获所有输入以防止与基础表进行交互。您可以使用叠加视图的alpha来查看更多或更少的底层内容。我注意到Facebook在你展开爆炸图像时会这样做。

看起来Facebook已经添加了一些不错的拖动手势,开始反向过程并在屏幕上移动图像,然后当你移开手指时,会发生完全展开动作。

Facebook似乎也把它放在空白处,让它看起来就像你把它拉到全屏一样。