如何使用 iOS Masonry（自动布局）将两个按钮放置在一起

Question

我正在更新一个最初在底部有一个按钮的屏幕。我的任务是使用自动布局包装器 Masonry 框架呈现两个位于底部居中的按钮。

我想让两个按钮在底部居中并并排放置。这就是我想出的：

代码如下：

- (void)createConstraints {

    // Map View
    [self.mapView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.left.and.right.equalTo(self);
        make.bottom.equalTo(self.mas_centerY).multipliedBy(0.9);
    }];

    // Information TextView
    [self.informationTextView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(self.mapView.mas_bottom); //.with.offset(kTableViewCellPadding);
        make.left.and.right.equalTo(self);
    make.bottom.equalTo(self.editSiteButtonBackground.mas_top);//.with.offset(-kTableViewCellPadding);
    }];

    // Edit  Site Button Background
    [self.editSiteButtonBackground mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.bottom.and.right.equalTo(self);
        make.height.equalTo(@54);
    }];

  // Add  Site Comments Button Background
  [self.addSiteCommentsButtonBackground mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.equalTo(self.editSiteButton.mas_right);
    make.bottom.equalTo(self.editSiteButton);
    make.height.equalTo(@54);
  }];

    // Edit  Site Button
    [self.editSiteButton mas_makeConstraints:^(MASConstraintMaker *make) {
        UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
        make.edges.equalTo(self.editSiteButtonBackground).with.insets(padding).with.priorityHigh();
        make.width.lessThanOrEqualTo(@260);
        make.centerX.equalTo(self.editSiteButtonBackground);
    }];

  // Add  Site Comments Button
  [self.addSiteCommentsButton mas_makeConstraints:^(MASConstraintMaker *make) {
    UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
        make.edges.equalTo(self.addSiteCommentsButtonBackground).with.insets(padding).with.priorityHigh();
    make.width.lessThanOrEqualTo(@270);
    make.top.equalTo(self.addSiteCommentsButton);
    make.centerX.equalTo(self.addSiteCommentsButtonBackground);
  }];

  // Navigation
  [self.navigationButton mas_makeConstraints:^(MASConstraintMaker *make) {
      make.right.equalTo(self.mapView).with.offset(-20);
      make.bottom.equalTo(self.mapView).with.offset(-20);
  }];

}

如何并排显示按钮并在底部居中显示？

Answer 1

抱歉，我无法以编程方式向您说明，但如果我说的话，

如果是用故事板或 XIB 设计的，您可以直接使用拖放功能进行设计。

将 "Add site comments" 按钮设置为 "Edit Site" 按钮的垂直中心，并在两个按钮之间设置水平 space。

希望对你有所帮助

谢谢。

Answer 2

这是一种可能的解决方案：

- (void)createConstraints {

    // Map View
    [self.mapView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.left.and.right.equalTo(self);
        make.bottom.equalTo(self.mas_centerY).multipliedBy(0.9);
    }];

    // Information TextView
    [self.informationTextView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(self.mapView.mas_bottom); //.with.offset(kTableViewCellPadding);
        make.left.and.right.equalTo(self);
    make.bottom.equalTo(self.editSiteButtonBackground.mas_top);//.with.offset(-kTableViewCellPadding);
    }];

    // Edit  Site Button Background
    [self.editSiteButtonBackground mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.bottom.and.right.equalTo(self);
        make.height.equalTo(@54);
    }];

  // Add  Site Comments Button Background
  [self.addSiteCommentsButtonBackground mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.equalTo(self.editSiteButton.mas_right);
    make.bottom.equalTo(self);
    make.height.equalTo(@54);
  }];

    // Edit  Site Button
    [self.editSiteButton mas_makeConstraints:^(MASConstraintMaker *make) {
        UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
        make.edges.equalTo(self.editSiteButtonBackground).with.insets(padding).with.priorityHigh();
        make.width.lessThanOrEqualTo(@260);
        make.centerX.equalTo(self).multipliedBy(0.5);
    }];

  // Add  Site Comments Button
  [self.addSiteCommentsButton mas_makeConstraints:^(MASConstraintMaker *make) {
    UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
    make.edges.equalTo(self.addSiteCommentsButtonBackground).with.insets(padding).with.priorityHigh();
    make.width.lessThanOrEqualTo(@260);
    make.top.equalTo(self.editSiteButton);
    make.centerX.equalTo(self).multipliedBy(1.5);
  }];

  // Navigation
  [self.navigationButton mas_makeConstraints:^(MASConstraintMaker *make) {
      make.right.equalTo(self.mapView).with.offset(-20);
      make.bottom.equalTo(self.mapView).with.offset(-20);
  }];

}

如何使用 iOS Masonry（自动布局）将两个按钮放置在一起

How to use iOS Masonry (Auto Layout) to position two buttons next to each other

objective-c

ios

masonry-ios-osx