带有图像和文本字段的 Xcode 约束？

Posted 2023-03-11

【中文标题】带有图像和文本字段的 Xcode 约束？

【英文标题】：Xcode constraints with images and text fields?

【发布时间】：2016-06-15 03:33:17

【问题描述】：

我对 xcode 不太熟悉，我正在尝试在情节提要中创建帐户创建表单，但是，我似乎无法弄清楚布局在 iPhone 4、iPhone 5 上工作的限制，等等。我尝试添加缺少的约束，但这并没有太大帮助。这就是在不同尺寸上运行的样子。我真的希望文本字段适合表单图像所在的任何位置，但它并不总是对齐。谁能给我任何提示或帮助？

iPhone 6 Simulator

iPhone 4 Simulator

【参考方案1】：

这真的很容易学习，流程是从最顶部的组件对齐自动布局，最好的部分是尝试对齐约束并在助手编辑器的预览选项中并行检查（您可以在其中检查所有屏幕尺寸） .

-对齐文本框和按钮，使其位于屏幕中心。

-尝试添加第一个标签的上边距和“centre horizontally in the container”约束，将其链接到超级视图。

-现在将width and height 约束添加到该标签。

-将vertical spacing添加到所有文本框（&按钮）的顶部组件和底部组件。

-选择“First”文本框并控制选择以下所有文本框并添加“leading”约束。

-选择“Last”文本框并控制选择以下所有文本框并添加“trailing”约束。

-选择所有相似的文本框并给出“equal widths”和“equal heights”约束。

-将width and height添加到“phonenumber”教材中。

-Center align“create account”按钮并为其提供leading,trailing and height约束。

-Center align the cancel button，将width, height and vertical spacing添加到“create account”按钮和底部空间以超级视图约束。

-通过双击底部约束蓝线，将“cancel”按钮的底部约束优先级设置为500。

如需进一步参考，请查看我创建的sampleproject。请尝试这个，如果您遇到任何困难，请告诉我。

附：在查看 UI 时您会知道，此按钮的 width & height 必须与下一个按钮的类似，您必须在此处添加 Equal widths 和 Equal heights 约束，您还会看到所有这些文本字段都应该有一个相同的 x 值（起点），您应该选择所有这些文本字段并向其添加 leading 约束，trailing 约束类似。

这就是您真正理解 UI 组件位置的方式。

【参考方案2】：

下载 main.storyboard 并设置您的设计：

https://github.com/BhadreshKathiriya/AutoLayoutSignin

您设置了两个不同的文本字段空间：