简体繁体 English

如何使两个相等大小的图像视图覆盖整个屏幕

[英]How do I make two equally sized imageviews cover the whole screen

原文 2015-10-26 01:35:08 2 2 ios/ uiimageview/ autolayout

I implemented a viewcontroller similar to the one in this question: iOS two views cover exactly half of parent view 我实现了一个类似于此问题中的一个视图控制器： iOS两个视图恰好覆盖了父视图的一半

I get the desired result. 我得到了预期的结果。 The problem is that when I add a UIImageView into those two containers, the result get resized and ruins the symmetry. 问题是，当我将UIImageView添加到这两个容器中时，结果将被调整大小并破坏了对称性。 How do I prevent Imageviews from changing the size of their containers? 如何防止Imageviews更改其容器的大小？ I need to use AspectFill for these images. 我需要对这些图像使用AspectFill。

2 个解决方案

I don't think the containers' sizes are changed. 我认为容器的尺寸没有改变。 You just need to set their clipsToBounds property to true to avoid overflow. 您只需要将其clipsToBounds属性设置为true即可避免溢出。

If you use Reveal you should see the containers' sizes are not changed even if pictures inside them are bigger than themselves. 如果使用“显示”，则即使容器中的图片大于其自身的尺寸，容器的尺寸也不会改变。

I'm unsure I understand what you mean about adding UIImageView into those controllers causing the views to resize, so forgive me if I'm getting this all wrong... 我不确定我了解您的意思是将UIImageView添加到那些导致视图大小调整的控制器中，所以请原谅我，如果我把所有这些都弄错了...

It sounds as though you've created two views of equal height that, together, consume the entire vertical space of the screen. 听起来好像您已经创建了两个等高的视图，它们一起占用了屏幕的整个垂直空间。 After having done that, you want to add one or more UIImageView's to each of the original two views. 完成此操作后，您想要向原始两个视图中的每个视图添加一个或多个UIImageView。 Unfortunately, when you add the UIImageView, the enclosing view is resized. 不幸的是，当您添加UIImageView时，将调整封闭视图的大小。

Assuming I have that correct... 假设我没错...

Are you doing this with Interface Builder either in an XIB or Storyboard file? 您是否正在XIB或Storyboard文件中使用Interface Builder进行此操作？ If so, you ought to be able to achieve this with the proper set of constraints. 如果是这样，您应该能够在适当的约束条件下实现这一目标。

In the following image, I've laid out what I describe above. 在下图中，我列出了上面描述的内容。

As you can see, I have a red view on the top half of the window and a green view on the bottom half. 如您所见，窗口的上半部分有一个红色视图，下半部分有一个绿色视图。 The red view contains a UIImageView that is 75% of the width and height of red view, with its origin at (20, 20) within the red view. 红色视图包含的UIImageView是红色视图的宽度和高度的75％，其原点位于红色视图内的（20，20）。

The scene is configured as shown below: 场景配置如下所示：

The constraints on "Upper View" are: “上视图”的约束为：

You can see from this that Upper View is flush with the left, right, and top of its superview, and that its space to Bottom View is 0. You'll have to trust me that Bottom View is set up the same way. 从中可以看到，上视图与上视图的左，右和顶部齐平，并且其到下视图的空间为0。您必须相信我，下视图的设置方式相同。

The height of the Upper and Lower views is "Proportional" as shown in this constraint: 上视图和下视图的高度为“比例”，如以下约束所示：

To achieve this "Proportional" setting, you first make the height of Upper View equal to the height of the superview, and then edit the constraint, changing "Multiplier" from "1" to "0.5." 要实现此“比例”设置，首先要使“上视图”的高度等于超级视图的高度，然后编辑约束，将“乘数”从“ 1”更改为“ 0.5”。

The height (and width) of the Image View is proportional to that of the Upper view, as shown here: 图像视图的高度（和宽度）与上方视图的高度成正比，如下所示：

If you set it up this way, you ought to be able to accomplish what (I think) you are looking to accomplish. 如果以这种方式进行设置，则应该能够完成您想要完成的（我认为）。

If my original assumption of what you are trying to achieve is incorrect, please post images of what you've got and how it's not working. 如果我对您要实现的目标的最初假设不正确，请发布有关您所拥有的内容以及其工作方式的图像。