ios - 自动布局 - 复杂约束

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]-|"

尽量不要“过度限制”您的观点。在您的代码中，您使用多个约束来约束相同的 View (例如 super View 底部的 descriptionLabel)。

一旦它们被定义，就不需要再次定义。

同样，使用填充。只需使用 padding 而不是 >=padding。 >=20 是指 20、21.5 还是 320？布局时不等式不明确。

此外，在我的约束中，我使用布局选项将日期标签的垂直轴约束到评级 View 。即“与评级 View 垂直保持一致”。而不是限制标题标签和东西......这意味着我只需要定义那行 UI 的位置一次。