流体垂直布局,动态标签和自动布局

时间:2014-05-15 09:20:07

标签: ios text autolayout

我正在尝试使用ios7中的autolayout复制流畅的垂直布局。 问题是我使用UILabels(和其他元素)与AttributedStrings的堆栈(但这似乎不会干扰问题,因为它也带有纯文本)和文本中的标签是动态添加的,但是框架或更好的约束似乎不会自动以正确的方式适应(不指定标签的高度),因为标签保留了xib中给出的尺寸。

Initial configuration in the Xib, blue are setted equality constraints

  

Xib中的初始配置,蓝色是设置的等式约束

相同,如果我用来设置一个大的高度约束常量,其值低于压缩和拥抱优先级。什么都没有改变。

After adding text and resizing constraint value (the text should have 5 rows)

  

添加文本并调整约束值后(文本应该有   5行

每当文本以这种方式或使用CoreText或许多其他方法更改时,我终于尝试重新创建约束

[self.view setAutoresizesSubviews:NO];
label.lineBreakMode = NSLineBreakByWordWrapping;
label.numberOfLines = 0;
label.preferredMaxLayoutWidth = label.frame.size.width;

[label removeConstraint:oldConstraint];

NSInteger height = ceil([label.attributedText
               boundingRectWithSize:CGSizeMake(label.frame.size.width, 10000)
               options:(NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading)
               //TODO 20 or 1.5 is an hardoced value. find solution to workaround
               //attributes:@{NSFontAttributeName:[UIFont fontWithName:kFontCrimsonText_Roman size:17]}
               context:nil].size.height) + 1;

NSLayoutConstraint * newConstraint = [NSLayoutConstraint constraintWithItem:label
                                                                  attribute:NSLayoutAttributeHeight
                                                                  relatedBy:NSLayoutRelationEqual
                                                                     toItem:nil
                                                                  attribute:NSLayoutAttributeNotAnAttribute
                                                                 multiplier:1.0f
                                                                   constant:height];
[label addConstraint:newConstraint];

这次标签的尺寸看似正确,但其中的文字显示不正确:

假设我有一个 5行的文本,只显示第一行,并且尽管框架看起来完全符合所需的尺寸,但最后只是切割。

the red space remains in any case

将高度乘以2(或另一个常数)似乎可以解决问题,但显然现在文本比框架更小,而顶部和底部仍留有大量空白

尝试使用[label fitToSize]似乎完美无缺,但很明显,这些约束会使帧恢复正常。

使用动态UIlabels和autolayout实现垂直流体布局的最佳实践是什么?

2 个答案:

答案 0 :(得分:2)

创建"流畅的垂直布局" ... UITableView的最佳方式。

说真的,这看起来像是使用UITableView的完美候选人。

它不仅仅是显示数据列表。例如,在iOS的Contacts应用中,个人联系人(您可以在其中添加号码和电子邮件等)使用UITableView来布局界面。

除了必须计算标签等的高度和位置之外,所有这些都是麻烦...

使用UITableViewCell之一的正确布局定义自定义UILabels,然后您只需将正确的文本放入右侧行。

对于像这样的事情,

UITableView是一个非常强大的工具。

答案 1 :(得分:0)

我最终发现这是一个错误,因为在ios7中启用了Autolayout的UILabel中使用了AttributedText。

另一个问题中出现的临时解决方法是在属性字符串中添加换行符并减少“底部边距”。

另一个是使用textview。

Bug也报道:
- Lines missing from tall UILabel when embedding NSTextAttachment
- iOS 7 BUG - NSAttributedString does not appear