使用自动布局使 UILabel 和 UITextField 彼此相邻

Posted

技术标签:

【中文标题】使用自动布局使 UILabel 和 UITextField 彼此相邻【英文标题】:Using Auto Layout to have UILabel and UITextField next to each other 【发布时间】:2013-09-17 09:25:34 【问题描述】:

我正在尝试将 UILabel 实例标签放置在 UITextField 实例文本字段旁边,就像在 ios 设置对话框中所做的那样。我在 Florian Kuglers FLKAutoLayout 扩展 (https://github.com/dkduck/FLKAutoLayout) 的帮助下使用自动布局和约束。

当我只为标签设置前导约束并在标签和文本字段之间设置空间约束时,标签和文本字段的宽度会根据它们的内容进行调整。 (下图)

但是,当我还为文本字段设置尾随约束时,只有文本字段的宽度会根据其内容进行调整,但标签会被拉伸。 (上图)

我想反其道而行之,这样文本字段就会被拉伸,并且标签会根据其内容进行调整。为什么 iOS 决定拉伸标签而不是文本字段?

[self addSubview:self.label];
[self addSubview:self.textField];

[self.label alignLeadingEdgeWithView:self predicate:@"10"];
[self.textField constrainLeadingSpaceToView:self.label predicate:@"10"];

// difference between top and bottom pciture
// [self.textField alignTrailingEdgeWithView:self predicate:@"-25"];

【问题讨论】:

设置固定宽度UILabel [self.label constrainWidth:@"==40" height:@"==20"]; 但我不想修复它。我希望它像它一样适应标签内容,并将剩余的空间留给文本字段。只是在我的示例中名字和姓氏等于 with,但也可能有其他标签。因此,使用固定宽度约束不是答案。 :( 【参考方案1】:

已编辑:所以在 Rahul 的评论之后,我使用了宽度和优先级。添加以下宽度约束会导致方向有些错误,因为输入了一些非常长的值,标签的大小调整得太小了。

[self.label constrainWidth:@"0@1"];

所以我终于阅读了“抗压性和内容拥抱”(http://www.objc.io/issue-3/advanced-auto-layout-toolbox.html),解决方案是将标签的水平内容拥抱优先级设置为更高的值。

[self.label setContentHuggingPriority:500 forAxis:UILayoutConstraintAxisHorizontal];

那么即使输入较大的值也会让标签保持与其内容一样的宽度!

解决方案不是添加具有优先级的宽度约束,而是为 UIView 的固有内容大小设置 Compression Resistance 和 Content Hugging 属性。

【讨论】:

干得好。你应该看看优先级的含义。您可以将优先级上下更改 1(即 499、500、501)以使其生效。然后您可以使用常量并使用... (UILayoutPriorityRequired - 1) 等... developer.apple.com/library/ios/documentation/AppKit/Reference/… 是的,我使用内容拥抱,特别是对于“想要”占用文本字段空间的标签和按钮。我不知道为什么有时它们会增长,有时会保持其固有大小。行为并不总是相同的。例如,[label][field][button] label 太大但按钮很小,而[field][button] 按钮想要增大。一个谜。【参考方案2】:

我在情节提要中设置的约束完全符合您的要求。

标签和超级视图之间的水平空间限制。(默认) 文本字段和超级视图之间的水平空间限制。 (默认) 文本字段和标签之间的水平空间限制。

【讨论】:

我用代码做所有事情。可能是您在 Storyboard 中为标签指定了宽度?

以上是关于使用自动布局使 UILabel 和 UITextField 彼此相邻的主要内容,如果未能解决你的问题,请参考以下文章

自动布局约束使 UILabel 对点击更敏感

UILabel 自动布局适合

如何使用自动布局约束为移动 UILabel 设置动画?

UILabel 大小的自动布局问题(附项目)

使 UILabel 以不断变化的内容和 AutoLayout 为中心

如何使自动布局与 XIB 中的自定义 UIView 一起使用?