UIView的调整与自动布局 [英] Resize Uiview with Auto Layout

问题描述

现在我正在学习的自动布局和我面对我解决不了的问题。

Right now I'm studying auto layout and I'm facing a problem that I can't solve.

我有一个观点，即正确加载在一个4英寸设备（左视图）和我试图适应它的3.5英寸设备，使酷似图像右侧视图：

I have a view that loads correctly in a 4 inch device (left view) and I'm trying to adapt it for a 3.5 inch device, to make exactly like the right view on the image:

唯一的区别是，绿，橙，黑色和粉色意见应缩一点以保持相同的尺寸为上述的两个视图。

The only difference is that the green, orange, black and pink views should shrink a little to maintain the same size for the two above views.

我的问题是，我不能想出一个办法做到这一点使用的约束。

My problem is that I can't figure out a way to do that using the constraints.

这是与我已经有限制会发生什么：

This is what happens with the constraints that I already have:

我已经尝试过的底部空间的黑色和粉色的意见上海华引脚为0跳跃的意见将缩小以适合屏幕，但是这并不工作，并给了我很多的警告在X code

I already tried to pin the bottom space to superview of the black and pink views to 0 hopping that the views would shrink to fit the screen, but this does not work and give me a lot of warnings on Xcode.

推荐答案

您所需要的绿色和黑色视图之间平等的高度限制，橙色和粉红色视图之间。

You need equal-height constraints between the green and black views, and between the orange and pink views.

让我们从头开始构建布局。它通常是容易设置的限制，如果你做出比你希望你的看法更小，并编辑约束常量大小起来。因此，我们开始有五个观点：

Let's construct your layout from scratch. It's usually easier to set up constraints if you make your views smaller than you want, and edit the constraint constants to size them up. So we start with five views:

的意见这种布局在这里是很重要的！需要注意的是橙色视图，例如，它是严格的绿色视图的右侧。这意味着，如果我问X code到创建绿色视图的后缘制约其最近的邻居，该邻居是橙色的观点，而不是上海华。

This layout of the views here is important! Note that the orange view, for example, is strictly to the right of the green view. This means if I ask Xcode to create a constraint from the green view's trailing edge to its nearest neighbor, that neighbor is the orange view, not the superview.

这是有帮助的名字在文档大纲的意见。要命名之一，单击其在大纲条目，preSS回报，然后键入名称：

It is helpful to name the views in the document outline. To name one, click its entry in the outline, press return, then type the name:

选择蓝色。给它以恒定0约束的顶部，领导和后缘，以及高度约束：

Select Blue. Give it constraints with constant 0 on the top, leading, and trailing edges, and a height constraint:

如果您更新它的框架（如我在对话框中所做的那样），X code将为它是这样的：

If you update its frame (as I did in the dialog), Xcode will lay it out like this:

接下来，选择绿色。给它以恒定0制约四边。顶部应该去蓝，导致应该去上海华，尾随应该去Orange和底部应去黑头。您可以通过点击三角形检查哪个观点是对约束的另一端：

Next, select Green. Give it constraints with constant 0 on all four edges. Top should go to Blue, leading should go to superview, trailing should go to Orange, and bottom should go to Black. You can check which view is on the other end of the constraint by clicking the disclosure triangle:

不更新格林的框架呢！它应该是这样的：

Don't update Green's frame yet! It should look like this:

接下来，做橙色，黑色和粉红色一样的。

Next, do the same for Orange, Black, and Pink.

一旦你创建了边缘约束的底部看法四个，选择这些意见（绿色，橙色，黑色和粉红色）四个。它应该是这样的：

Once you've created the edge constraints for all four of the bottom views, select all four of those views (Green, Orange, Black, and Pink). It should look like this:

选中所有四个，创造平等，宽度和等高约束：

With all four selected, create equal-width and equal-height constraints:

请注意，这是矫枉过正。我们并不真正需要的左和右列之间的等高约束，我们不需要在顶部和底部行之间的等宽限制。但这个答案已经是一英里长，它是更短的一个动作创建所有大小相等的约束。

Note that this is overkill. We don't really need the equal-height constraints between the left and right columns, and we don't need the equal-width constraints between the top and bottom rows. But this answer is already a mile long and it's much shorter to create all the equal-size constraints in one action.

现在它应该看起来甚至混乱：

Now it should look even messier:

选择顶层视图或视图控制器和视图控制器选择更新所有帧：

Select the top-level view or the view controller and choose Update All Frames in View Controller:

X code必须制定出这样的观点：

Xcode should lay out the views like this:

如果您单击外形切换按钮，X code应该制定出这样的观点：

If you click the form factor toggle button, Xcode should lay out the views like this:

我上传最后的故事板来这一主旨。

I've uploaded the final storyboard to this gist.

这篇关于UIView的调整与自动布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！