如何使用iOS Masonry（自動布局）將兩個按鈕彼此相鄰放置

Question

我正在更新一個最初在底部有一個按鈕的屏幕。 我的任務是使用Masonry框架渲染兩個按鈕，這兩個按鈕是一個AutoLayout包裝器。

我想將兩個按鈕放在底部並排放置。 這就是我想出來的：

這是代碼：

- (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

很抱歉以編程方式我無法告訴你，但如果我說的話，用文字說，

如果使用storyboard或XIB設計，​​您可以直接使用拖放功能進行設計。

將“添加站點注釋”按鈕設置為“編輯站點”按鈕的垂直居中，並在兩個按鈕之間提供水平空間。

我希望它會對你有所幫助。

謝謝。

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

}