ios - 使用自动布局调整 Uiview 的大小

标签 ios uiview autolayout

现在我正在研究自动布局,但我遇到了一个我无法解决的问题。

我有一个在 4 英寸设备(左 View )中正确加载的 View ,我正在尝试将其调整为 3.5 英寸设备,以使其完全像图像上的右 View :

enter image description here

唯一的区别是绿色、橙色、黑色和粉红色的 View 应该缩小一点以保持上述两个 View 的相同大小。

我的问题是我无法找到一种使用约束来做到这一点的方法。

这是我已有的约束所发生的情况:

enter image description here

我已经尝试将底部空间固定到黑色和粉红色 View 的 super View 到 0 跳跃, View 会缩小以适合屏幕,但这不起作用并在 Xcode 上给我很多警告。

最佳答案

您需要在绿色和黑色 View 之间以及橙色和粉色 View 之间进行等高约束。

让我们从头开始构建您的布局。如果您使 View 比您想要的小,并且编辑约束常量以增大它们的大小,那么设置约束通常会更容易。所以我们从五个 View 开始:

five views no constraints

这里的 View 布局很重要!请注意,例如,橙色 View 严格位于绿色 View 的右侧。这意味着如果我要求 Xcode 创建一个从绿色 View 的后缘到它最近的邻居的约束,那个邻居是橙色 View ,而不是父 View 。

在文档大纲中命名 View 很有帮助。要命名一个,请单击大纲中的条目,按回车键,然后键入名称:

names in outline

选择蓝色。给它在顶部、前导和尾部边上加上常数 0 的约束,以及一个高度约束:

blue constraints

如果你更新它的框架(就像我在对话框中所做的那样),Xcode 会像这样布局它:

blue laid out

接下来,选择绿色。在所有四个边上给它一个常数 0 的约束。顶部应该去 Blue,leading 应该去 superview,trailing 应该去 Orange,bottom 应该去 Black。您可以通过单击显示三角形来检查约束的另一端是哪个 View :

green constraints dialog

先不要更新 Green 的框架!它应该看起来像这样:

green constraints

接下来,对橙色、黑色和粉红色执行相同的操作。

为所有四个底部 View 创建边缘约束后,选择所有四个 View (绿色、橙色、黑色和粉红色)。它应该看起来像这样:

constraints on bottom views

选中所有四个,创建等宽和等高约束:

equal width/height dialog

请注意,这是矫枉过正。我们真的不需要左右列之间的等高约束,也不需要顶行和底行之间的等宽约束。但是这个答案已经是一英里长了,而且在一次操作中创建所有大小相等的约束要短得多。

现在看起来应该更乱了:

messy

选择顶层 View 或 View Controller 并选择更新 View Controller 中的所有框架:

update menu item

Xcode 应该像这样布置 View :

good layout 4 inch

如果您单击外形规范切换按钮,Xcode 应该像这样布置 View :

good layout 3.5 inch

我已将最终 Storyboard上传到 this gist .

关于ios - 使用自动布局调整 Uiview 的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25455945/

相关文章:

android - 如何看待用户提出的问题,我们这边无法模拟

ios - Xcode 更改存储库

android - 将来自不同 Firebase 项目的两项 Firebase 服务用于一个移动应用程序

swift - Material swift : UIView with Searchbar and TabBar moves out of view swift 3

ios - UITextField 子类,下方有栏 : bar not going all the way

ios - 使用自动布局自动旋转时如何重新排列 View ?

ios - 添加到 iPhone 的主屏幕时,Web 应用感觉响应速度较慢

uiview - 无法在 ImageView 拉伸(stretch)到其边界的图层上设置cornerRadius和阴影?

ios - 嵌入固有大小的 View 会破坏动画

swift - 在 UIView 内部设置 UITableView 的约束