Autolayout / masonry中心有多个视图

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);
    }];
}

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

到目前为止我的方法都失败了。知道怎么用autolayout / Masonry实现这个目标吗？

- 修改

使用像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

通常在使用自动布局时，我发现我必须添加额外的＆＃39; spacer＆＃39;视图实现我想要的布局。请参阅以下示例中的红色视图：

获得所需的布局后，可以将视图设置为隐藏。通常，您的间隔视图（在本例中）所需的约束将是：

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

同等高度位显然是让内容居中的关键！