使用动态约束对齐文本字段

Posted

技术标签:

【中文标题】使用动态约束对齐文本字段【英文标题】:Align text fields using dynamic constraints 【发布时间】:2016-09-03 08:53:38 【问题描述】:

我一直在学习如何制作 ios 应用,但遇到了一点小烦恼。我找不到一种简单的方法来对齐我的文本输入。

看看下面的截图,你会看到我已经成功地对齐了我的文本字段,这正是我想要的。

但是,我通过更改每个标签和文本字段之间的单独前导空格来手动完成此操作。

我的问题是,如何动态对齐文本字段?

【问题讨论】:

您需要根据标签修复前导空间并检查所有文本字段对齐空间。 【参考方案1】:

Anand 发布了很好的方法,但我个人在这种情况下使用相等的宽度和高度。那么我们来做一个简单的介绍:

1) 首先,在年龄标签上设置约束:

左前导 c. 顶部领先的 c. 宽度 c. 身高 c.

2) 将约束放在顶部右文本字段

右尾随 c. 顶部领先的 c. 身高 c. 约束,这将与标签和文本字段之间的间距有关,因此 CTRL 从文本字段拖动以标记选择 horizontal spacing c.

3) 然后,制作第二行元素 - 在情节提要中放置大约相同宽度和高度的第二个标签和第二个文本字段(使用 IB,您可以稍后使用魔术函数修复它更新帧 )。

4) 然后,为您的weight 标签设置这个:

左前导 c. 顶部领先的 c. 然后选中两个标签并选中相等宽度复选框和相等高度复选框。

5) 第二个文本字段的重复宽度相同。第二步不必做间距约束。

FINISH现在所有四个项目都对齐了。

例如,如果您想更改标签的高度,只需选择它的高度约束,您的其他标签也会跟随此更改。

所以最后的体验就在这个动画中:

【讨论】:

【参考方案2】:

需要固定每个标签的宽度,每个文本字段的 X 坐标距离应该根据底部文本字段的相同,确保每个标签的宽度应该相同,然后向文本字段添加约束。

【讨论】:

感谢您的帮助,这是一个不错的简单解决方案

以上是关于使用动态约束对齐文本字段的主要内容,如果未能解决你的问题,请参考以下文章

宽度约束动画时UITextfield文本位置没有动画

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

使用自动布局约束旋转后对齐 UILabel 文本

当 TextView 是匹配约束时,如何对齐 TextView 中的文本?

DoJo 增强的网格动态更新约束不起作用

iPhone 6+ 的约束打破了动态调整单元格的大小