【问题标题】:Resize Uiview with Auto Layout使用自动布局调整 Uiview 大小
【发布时间】:2014-08-22 21:42:53
【问题描述】:

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

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

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

我的问题是我无法找到使用约束的方法。

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

我已经尝试将黑色和粉红色视图的超级视图的底部空间固定为 0,以使视图缩小以适应屏幕,但这不起作用,并且在 Xcode 上给了我很多警告。

【问题讨论】:

    标签: ios uiview autolayout


    【解决方案1】:

    您需要绿色和黑色视图之间以及橙色和粉红色视图之间的等高约束。

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

    这里的视图布局很重要!请注意,例如,橙色视图严格位于绿色视图的右侧。这意味着,如果我要求 Xcode 创建一个从绿色视图的后沿到其最近邻居的约束,则该邻居是橙色视图,而不是超级视图。

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

    选择蓝色。给它顶部、前缘和后缘的常量 0 和高度约束:

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

    接下来,选择绿色。在所有四个边上给它一个常数 0 的约束。顶部应该去蓝色,领先应该去superview,尾随应该去橙色,底部应该去黑色。您可以通过单击显示三角形来检查哪个视图位于约束的另一端:

    暂时不要更新格林的框架!它应该是这样的:

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

    为所有四个底部视图创建边缘约束后,选择所有四个视图(绿色、橙色、黑色和粉红色)。它应该是这样的:

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

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

    现在看起来应该更乱了:

    选择顶层视图或视图控制器,然后选择 Update All Frames in View Controller:

    Xcode 应该像这样布置视图:

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

    我已将最终的故事板上传到this gist

    【讨论】:

    • 哇,这就像在学习自动布局课程。非常感谢您提供的信息!
    • 我什至无法形容这个答案有多棒,你太棒了 Rob !非常感谢,工作就像一个魅力,现在我要研究这个并尝试吸收所有信息:)
    • 惊人的答案。谢谢你。完美运行。
    • @rob-mayoff 你能说出这个问题的场景吗stackoverflow.com/questions/34523257/…