iOS 自动布局:3 列标签布局,中间列具有可变宽度

Posted

技术标签:

【中文标题】iOS 自动布局:3 列标签布局,中间列具有可变宽度【英文标题】:iOS Auto Layout: 3 column label layout, with middle column having variable width 【发布时间】:2013-07-18 16:03:12 【问题描述】:

我正在尝试创建一些我认为使用 ios 自动布局很容易的东西。我已经研究了几天,买了一本书,并尝试了各种关键字搜索组合。以前有人这样做过并且可以为我指明正确的方向吗?

我想要 3 个 UILabel,按列排列,中间的一个(内容更多)根据 iPad 的方向可变宽度。

我可以让它工作,但是一旦 iPad 从横向旋转到纵向(因此减少了中间标签的可用宽度),中间标签的内容就会被切断。 即中间标签高度不会调整大小。

这就是我想要实现的目标:

旋转到纵向后:

这是我的约束和视图层次结构:

如果我给中间的 UILabel 一个高度限制“小于或等于”250(在窄纵向模式下显示所有内容所需的高度),一旦 iPad 回到横向,标签内容就会扩展以适应新的宽度,但也不再与两侧其他标签的顶部很好地对齐。

错误的垂直对齐方式

这是我对中间标签的限制

(高度等于 250 的优先级为 1,因为这是我无法摆脱的生成约束。)

我已经尝试了很多内容拥抱和抗压缩的组合,我确信这就是答案,即需要 UILabel 框架来拥抱内容。我显然不明白这一点。

【问题讨论】:

【参考方案1】:

好的,在找到这个***问题后终于想通了: Link to answer 它现在按我希望的那样工作

我所要做的就是将换行符设置为“自动换行”并更新设备方向上的首选宽度,就像这样

- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation duration:(NSTimeInterval)duration 
    if (UIDeviceOrientationIsLandscape(interfaceOrientation)) 
        self.middleLabel.preferredMaxLayoutWidth = 600;
     else 
        self.middleLabel.preferredMaxLayoutWidth = 314;
    

所以,总而言之,它是增加内容拥抱、降低高度约束的优先级和更新设备方向上的 preferredMaxLayoutWidth 的组合。 尽管如此,将硬编码值放入布局代码中感觉不对。能想出更好的办法吗?

【讨论】:

【参考方案2】:

以编程方式更改灰框大小,在界面生成器上,为

设置此属性

左文本字段 https://dl.dropboxusercontent.com/u/1172778/left.png

中间文本字段 https://dl.dropboxusercontent.com/u/1172778/middle.png

文本将填充一个容器(图像中的灰色框)。

对不起,我的英语不好。

【讨论】:

我使用的是自动布局,而不是旧的弹簧和支柱,或者你是说我应该为那个 UILabel 关闭自动布局? 如果您使用的是 xib,请禁用。使用情节提要,您将禁用所有屏幕。 谢谢,但我改用自动布局来帮助布局主要内容视图中的元素。我真的很想知道这是否可以使用自动布局

以上是关于iOS 自动布局:3 列标签布局,中间列具有可变宽度的主要内容,如果未能解决你的问题,请参考以下文章

iOS自动布局,列对齐

3 列布局,中间列有页眉和页脚

布局:一列根据需要宽,另一列占用剩余空间

使用自动布局在 UIScrollView 中将可变宽度的文本列居中

具有自动布局的 UITableView 中的动态列

自动布局:具有可变高度和两个标签的表格单元格