Objective-C中使用NSLayoutConstraint实现双按钮居中布局

嘿，我懂你要实现的效果——两个按钮保持固定宽度和间距，整体在父视图里水平居中对吧？你的现有代码已经定义了按钮之间的关系，但缺少和父视图的关联，所以没法自动居中。下面给你两种靠谱的实现方式：

方法一：直接修改Visual Format Language（VFL）实现居中 #

这个方法最直接，只需要调整你的VFL字符串，让按钮组和父视图的左右边缘之间保留弹性间距（>=0），系统会自动平分左右的空白，从而让整个按钮组水平居中。另外别忘了给按钮关闭自动 autoresizing mask，否则Auto Layout会失效。

完整代码示例：

// 先关闭按钮的自动布局转换，必须加！
_startbutton.translatesAutoresizingMaskIntoConstraints = NO;
_resetbutton.translatesAutoresizingMaskIntoConstraints = NO;

// 构建视图字典
NSDictionary *viewsDictionary2 = NSDictionaryOfVariableBindings(_startbutton, _resetbutton);

// 修改VFL，添加左右弹性边距，同时让两个按钮垂直居中对齐
NSArray *buttonHorConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(>=0)-[_startbutton(50)]-30-[_resetbutton(50)]-(>=0)-|" 
                                                                        options:NSLayoutFormatAlignAllCenterY 
                                                                        metrics:nil 
                                                                          views:viewsDictionary2];

// 激活约束
[NSLayoutConstraint activateConstraints:buttonHorConstraints];

// 别忘了设置垂直方向的约束，比如让按钮组垂直居中（可选，根据你的布局需求调整）
NSLayoutConstraint *centerYConstraint = [NSLayoutConstraint constraintWithItem:_startbutton
                                                                      attribute:NSLayoutAttributeCenterY
                                                                      relatedBy:NSLayoutRelationEqual
                                                                         toItem:self.view
                                                                      attribute:NSLayoutAttributeCenterY
                                                                     multiplier:1.0
                                                                       constant:0];
[NSLayoutConstraint activateConstraints:@[centerYConstraint]];

方法二：用容器视图包裹按钮（更灵活） #

如果后续你可能需要调整整个按钮组的位置、添加背景等，用一个容器视图来包裹两个按钮会更方便。思路是先让容器在父视图中居中，再把按钮放在容器里设置它们之间的约束：

// 创建容器视图
UIView *buttonContainer = [[UIView alloc] init];
buttonContainer.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:buttonContainer];

// 把按钮添加到容器里
[buttonContainer addSubview:_startbutton];
[buttonContainer addSubview:_resetbutton];
_startbutton.translatesAutoresizingMaskIntoConstraints = NO;
_resetbutton.translatesAutoresizingMaskIntoConstraints = NO;

// 让容器在父视图中水平+垂直居中（垂直方向可根据需求调整）
[NSLayoutConstraint activateConstraints:@[
    [buttonContainer.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
    [buttonContainer.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor]
]];

// 设置容器内两个按钮的水平约束（固定宽度+间距）
NSDictionary *viewsDict = NSDictionaryOfVariableBindings(_startbutton, _resetbutton);
NSArray *innerConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[_startbutton(50)]-30-[_resetbutton(50)]" 
                                                                    options:NSLayoutFormatAlignAllCenterY 
                                                                    metrics:nil 
                                                                      views:viewsDict];
[NSLayoutConstraint activateConstraints:innerConstraints];

// 让容器自适应按钮的大小（可选，也可以给容器固定大小）
[NSLayoutConstraint activateConstraints:@[
    [buttonContainer.topAnchor constraintEqualToAnchor:_startbutton.topAnchor constant:-8],
    [buttonContainer.bottomAnchor constraintEqualToAnchor:_startbutton.bottomAnchor constant:8],
    [buttonContainer.leadingAnchor constraintEqualToAnchor:_startbutton.leadingAnchor constant:-8],
    [buttonContainer.trailingAnchor constraintEqualToAnchor:_resetbutton.trailingAnchor constant:8]
]];

两种方法都能实现你要的效果，第一种适合简单场景，第二种扩展性更强。你可以根据自己的需求选～

内容的提问来源于stack exchange，提问作者Sophian Achiba