自动布局-复杂的约束

Question

我正在尝试使用自动布局以编程方式在表格单元格中显示内容。 我希望内容显示如下：

[标题]
[图片] [日期]
[长字符串，跨越表格的宽度，最多两行]

我的代码如下所示：

-(NSArray *)constraints {
    NSMutableArray * constraints = [[NSMutableArray alloc]init];
    NSDictionary *viewsDictionary = NSDictionaryOfVariableBindings(_titleLabel, _descriptionLabel, _dateLabel, _ratingBubbleView);

    NSDictionary *metrics = @{@"padding":@(kPadding)};

    NSString *const kVertical = @"V:|-(>=0,<=padding)-[_titleLabel]-(<=padding)-[_ratingBubbleView]-(<=padding)-[_descriptionLabel]-(>=0,<=padding)-|";
    NSString *const kVertical2 = @"V:|-(>=0,<=padding)-[_titleLabel]-(<=padding)-[_dateLabel]-(<=padding)-[_descriptionLabel]-(>=0,<=padding)-|";
    NSString *const kHorizontalDescriptionLabel = @"H:|-padding-[_descriptionLabel]-padding-|";
    NSString *const kHorizontalTitleLabel = @"H:|-padding-[_titleLabel]";
    NSString *const kHorizontalDateLabel = @"H:|-padding-[_ratingBubbleView]-padding-[_dateLabel]";

    [constraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:kVertical options:0 metrics:metrics views:viewsDictionary]];
    [constraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:kVertical2 options:0 metrics:metrics views:viewsDictionary]];
    [constraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:kHorizontalDescriptionLabel options:0 metrics:metrics views:viewsDictionary]];
    [constraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:kHorizontalTitleLabel options:0 metrics:metrics views:viewsDictionary]];
    [constraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:kHorizontalDateLabel options:0 metrics:metrics views:viewsDictionary]];

    return constraints;
}

结果如下：

Answer 1

好的，我不会尝试修复您的代码。 我将创建一些约束，以用于实现您的布局。 我将思考过程放在注释中。

首先得到一个不错的垂直布局...

// I'm just using standard padding to make it easier to read.
// Also, I'd avoid the variable padding stuff. Just set it to a fixed value.
// i.e. ==padding not (>=0, <=padding). That's confusing to read and ambiguous.
@"V:|-[titleLabel]-[ratingBubbleView]-[descriptionLabel]-|"

然后逐层添加水平约束...

// constraint the trailing edge too. You never know if you'll get a stupidly
// long title. You want to stop it colliding with the end of the screen.
// use >= here. The label will try to take it's intrinsic content size
// i.e. the smallest size to fit the text. Until it can't and then it will
// break it's content size to keep your >= constraint.
@"|-[titleLabel]->=20-|"

// when adding this you need the option "NSLayoutFormatAlignAllBottom".
@"|-[ratingBubbleView]-[dateLabel]->=20-|"

@"|-[descriptionLabel]-|"

尽量不要“过度约束”您的视图。 在您的代码中，您要使用多个约束来约束相同的视图（例如，superview底部的descriptionLabel）。

定义它们后，就无需再次定义它们。

再次，与填充。 只需使用padding而不是>=padding 。 > = 20表示20、21.5或320？ 布局时，不平等是不明确的。

另外，在我的约束中，我使用了layout选项将日期标签的垂直轴约束到评级视图。 即“与评级视图垂直保持一致”。 而不是限制标题标签和内容……这意味着我只需要定义一次该UI行的位置。