如何以编程方式使用自动布局排列这三个UILabel?

时间:2013-10-29 15:59:41

标签: ios iphone objective-c ios7 autolayout

我有一个UIView,上面有三个UILabels。我有titlesubtitlesubtitleDescription,所有UILabel属性。我希望我的标题在左上角,标题下方的标题没有间隙,字幕描述在副标题的右边没有间隙,将基线与字幕基线对齐。我希望elipses如果是视图,或者在subtitle / subtitleDescription的情况下查看。我想以编程方式使用自动布局。

与此类似:

  _________________________________
 |[title]                         | 
 |[subtitle][subtitleDescription] |
 |________________________________|

我希望标签转到左上角而不是居中。在我的代码中,它全部居中,所有标签都在彼此之上。

我只是在所有sizeToFit上调用UILabel,除此之外我根本不调整帧。当然这个代码是在我分配并初始化标签并设置文本之后。这是我的代码:

 - (void)setup
 {
[self.title sizeToFit];
[self.subtitle sizeToFit];
[self.subtitleDescription sizeToFit];

[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|[title]-(>=0)-|"
                                                            options:kNilOptions
                                                           metrics:nil
                                                             views:@{ @"title" : self.title }]];

[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|[subtitle]-5-[subdesc]-(>=0)-|"
                                                             options:NSLayoutFormatDirectionLeftToRight
                                                             metrics:nil
                                                               views:@{ @"subtitle" : self.subtitle,
                                                                        @"subdesc"  : self.subtitleDescription }]];

// compR > compR
[self setContentCompressionResistancePriority:900 forAxis:UILayoutConstraintAxisHorizontal];
[self setContentCompressionResistancePriority:500 forAxis:UILayoutConstraintAxisHorizontal];

[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[title]-5-[subtitle]|"
                                                             options:kNilOptions
                                                             metrics:nil
                                                               views:@{ @"title"    : self.title,
                                                                        @"subtitle" : self.subtitle }]];

[self addConstraint:[NSLayoutConstraint constraintWithItem:self.subtitleDescription
                                                 attribute:NSLayoutAttributeBaseline
                                                 relatedBy:NSLayoutRelationEqual
                                                    toItem:self.subtitle
                                                 attribute:NSLayoutAttributeBaseline
                                                multiplier:1.0
                                                  constant:0]];
 }

谢谢!!!

以下是视图的屏幕截图:

enter image description here

更新

正如jrturton向我指出的那样,看起来我的所有约束都是从约束异常中被打破的。我想找出它们为什么坏了。给出的消息是“无法同时满足约束”。

1 个答案:

答案 0 :(得分:3)

首先,通过设置translatesAutoResizingMaskIntoConstraints = NO确保您的标签已启用自动布局。

您不需要任何sizeToFit来电。在增加约束时,它们毫无意义。标签将在布局点使用其内在大小。

为了防止居中,只需不要钉在超视图的两侧。所以不要这样:

"|[title]-(>=0)-|"

这样做:

"|[title]"

或者确实如此:

"|[title]|"

并在标签上设置左对齐。

对于一行中的多个标签,您需要这样:

"|[subtitle]-5-[subdesc]|"

在选项中传递NSLayoutFormatAlignAllBaseline。如果需要,您可以将选项一起(|)。同样,您不需要不等式间距。左对齐标签将占用所需的空间。您可能希望在两个标签上设置压缩阻力/拥抱优先级,因此如果没有足够的空间来显示两个值,则可以规定哪个被截断。

您正在为视图本身设置内容压缩阻力,如果视图本身不受自动布局的限制,这将毫无意义。你也将它设置为两次到两个不同的值,我不确定你希望用它实现什么。

如果超视图具有固定大小,您当前的垂直约束将导致一个或另一个标签被拉伸以填充剩余大小,这将使文本垂直居中,这就是标签在它们太高时所做的事情。

你可以通过不钉在底部来解决这个问题:

"V:[title]-5-[subtitle]"

我已经写了很多关于VFL和自动布局here的文章,并附有其他自动布局相关文章的链接。