具有 3 个等宽标签的自动布局

Posted

技术标签:

【中文标题】具有 3 个等宽标签的自动布局【英文标题】:Autolayout with 3 labels equally width 【发布时间】:2015-06-01 07:17:40 【问题描述】:

我需要显示 3 个这样的标签:“|-15-[Label1]-0-[Label2]-0-[Label3]-15|”。label1、label2、label3 的宽度应该相等。怎么可能我使用带有编码的自动布局来实现这一点。感谢任何建议。

我尝试了以下方法,但在我的 headerview 上看不到任何内容。

NSDictionary *views2 = NSDictionaryOfVariableBindings(label1, label2, label3);

[headerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-leftPadding-[label1]-0-[label2]-0-[label3]-rightPadding-|" options:0 metrics:@@"leftPadding":[NSNumber numberWithInt:15],@"rightPadding":[NSNumber numberWithInt:15] views:views2]];

[headerView addConstraint:[NSLayoutConstraint constraintWithItem:label1
                                                       attribute:NSLayoutAttributeWidth
                                                       relatedBy:NSLayoutRelationEqual
                                                          toItem:label2
                                                       attribute:NSLayoutAttributeWidth
                                                      multiplier:1
                                                        constant:0]];

[headerView addConstraint:[NSLayoutConstraint constraintWithItem:label1
                                                       attribute:NSLayoutAttributeWidth
                                                       relatedBy:NSLayoutRelationEqual
                                                          toItem:label3
                                                       attribute:NSLayoutAttributeWidth
                                                      multiplier:1
                                                        constant:0]];

[headerView addConstraint:[NSLayoutConstraint constraintWithItem:label2
                                                       attribute:NSLayoutAttributeWidth
                                                       relatedBy:NSLayoutRelationEqual
                                                          toItem:label3
                                                       attribute:NSLayoutAttributeWidth
                                                      multiplier:1
                                                        constant:0]];


[headerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[label1]|" options:0 metrics:nil views:views2]];
[headerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[label2]|" options:0 metrics:nil views:views2]];
[headerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[label3]|" options:0 metrics:nil views:views2]];

【问题讨论】:

您的代码可以用这种格式缩短:@"H:|-leftPadding-[label1]-0-[label2(==label1)]-0-[label3(==label2)]-rightPadding-|" 【参考方案1】:

如果您希望某些视图具有相同的宽度,而不管它们之间的距离如何。您应该使用间隔视图的概念。有关 Spacer 视图的更多信息,请参阅 Apple 文档。我认为 spacer 将是解决此问题的最佳方法。使用垫片后,您需要对垫片视图应用约束,这将导致标签的宽度相等。

【讨论】:

以上是关于具有 3 个等宽标签的自动布局的主要内容,如果未能解决你的问题,请参考以下文章

等宽和设置优先级的自动布局

具有自动布局的水平放置等宽等水平空间按钮

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

如何在 ios swift 中以编程方式创建自动布局等宽约束?

具有固定高度的表格单元格中的自动布局多行标签

如何使用自动布局更改标签位置