ios - 自动布局/砌体中心多个视图

Question

我使用Masonry在代码中创建自动布局约束。

这是我到目前为止所拥有的：

使用以下代码：

- (void)viewDidLoad {
    [super viewDidLoad];

    [self.view setBackgroundColor:[UIColor whiteColor]];

    UIView *container = [[UIView alloc] init];
    [self.view addSubview:container];

    UIView *itemContainer = [[UIView alloc] init];
    [itemContainer setBackgroundColor:[UIColor colorWithWhite:0.9 alpha:1.0]];
    [container addSubview:itemContainer];

    UIImageView *itemImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Test"]];
    [itemContainer addSubview:itemImage];

    UILabel *itemTitle = [[UILabel alloc] init];
    [itemTitle setNumberOfLines:1];
    [itemTitle setText:@"Lorem ipsum dolor sit amet."];
    [itemTitle setFont:[UIFont boldSystemFontOfSize:12]];
    [itemTitle setTextColor:[UIColor blackColor]];
    [itemContainer addSubview:itemTitle];

    UILabel *itemText = [[UILabel alloc] init];
    [itemText setNumberOfLines:2];
    [itemText setText:@"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt"];
    [itemText setTextColor:[UIColor blackColor]];
    [itemText setFont:[UIFont systemFontOfSize:10]];
    [itemContainer addSubview:itemText];

    [container makeConstraints:^(MASConstraintMaker *make) {
        UIView *topLayoutGuide = (id)self.topLayoutGuide;
        make.top.equalTo(topLayoutGuide.bottom);
        make.left.right.bottom.equalTo(self.view).insets(UIEdgeInsetsMake(10, 10, 10, 10));
    }];

    [itemContainer makeConstraints:^(MASConstraintMaker *make) {
        make.top.left.right.equalTo(container);
        make.height.equalTo(@80);
    }];

    [itemImage makeConstraints:^(MASConstraintMaker *make) {
        make.top.bottom.left.equalTo(itemContainer);
        make.width.equalTo(itemImage.height);
    }];

    [itemTitle makeConstraints:^(MASConstraintMaker *make) {
        make.top.right.equalTo(itemContainer);
        make.left.equalTo(itemImage.right).offset(5);
    }];

    [itemText makeConstraints:^(MASConstraintMaker *make) {
        make.left.right.equalTo(itemTitle);
        make.top.equalTo(itemTitle.bottom).offset(5);
    }];
}

现在我想将标签垂直居中，如下所示：

到目前为止，我的方法都失败了。知道如何通过自动布局/砌体实现这一目标吗？

- 编辑

建议使用像 chris838 这样的间隔视图是有效的。这是更新的代码：

- (void)viewDidLoad {
    [super viewDidLoad];

    [self.view setBackgroundColor:[UIColor whiteColor]];

    UIView *container = [[UIView alloc] init];
    [self.view addSubview:container];

    UIView *itemContainer = [[UIView alloc] init];
    [itemContainer setBackgroundColor:[UIColor colorWithWhite:0.9 alpha:1.0]];
    [container addSubview:itemContainer];

    UIImageView *itemImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Test"]];
    [itemContainer addSubview:itemImage];

    UIView *spacer1 = [[UIView alloc] init];
    [itemContainer addSubview:spacer1];

    UIView *spacer2 = [[UIView alloc] init];
    [itemContainer addSubview:spacer2];

    UILabel *itemTitle = [[UILabel alloc] init];
    [itemTitle setNumberOfLines:1];
    [itemTitle setText:@"Lorem ipsum dolor sit amet."];
    [itemTitle setFont:[UIFont boldSystemFontOfSize:12]];
    [itemTitle setTextColor:[UIColor blackColor]];
    [itemContainer addSubview:itemTitle];

    UILabel *itemText = [[UILabel alloc] init];
    [itemText setNumberOfLines:2];
    [itemText setText:@"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt"];
    [itemText setTextColor:[UIColor blackColor]];
    [itemText setFont:[UIFont systemFontOfSize:10]];
    [itemContainer addSubview:itemText];

    [container makeConstraints:^(MASConstraintMaker *make) {
        UIView *topLayoutGuide = (id)self.topLayoutGuide;
        make.top.equalTo(topLayoutGuide.bottom);
        make.left.right.bottom.equalTo(self.view).insets(UIEdgeInsetsMake(10, 10, 10, 10));
    }];

    [itemContainer makeConstraints:^(MASConstraintMaker *make) {
        make.top.left.right.equalTo(container);
        make.height.equalTo(@80);
    }];

    [itemImage makeConstraints:^(MASConstraintMaker *make) {
        make.top.bottom.left.equalTo(itemContainer);
        make.width.equalTo(itemImage.height);
    }];

    [spacer1 makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(itemContainer.top);
        make.height.equalTo(spacer2);
    }];

    [itemTitle makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(spacer1.bottom);
        make.right.equalTo(itemContainer);
        make.left.equalTo(itemImage.right).offset(5);
    }];

    [itemText makeConstraints:^(MASConstraintMaker *make) {
        make.left.right.equalTo(itemTitle);
        make.top.equalTo(itemTitle.bottom).offset(5);
        make.bottom.equalTo(spacer2.top);
    }];

    [spacer2 makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.equalTo(itemContainer.bottom);
        make.height.equalTo(spacer1);
    }];
}

Answer 1

通常在使用自动布局时，我发现我必须添加额外的“间隔”视图来实现我想要的布局。请参阅以下示例中的红色视图：

一旦你有了你想要的布局，你可以将视图设置为隐藏。通常，间隔视图（在这种情况下）需要的约束是：

• 将相邻视图（或父视图）的顶部和底部空间设置为零。
• 等高。
• 固定宽度。
• 在容器中水平居中。

等高位显然是使内容居中的关键！