使用自动布局（以编程方式）水平对齐 UIButton

Posted 2023-03-15

【中文标题】使用自动布局（以编程方式）水平对齐 UIButton

【英文标题】：Align UIButtons horizontally using Auto layout (programmatically)

【发布时间】：2015-09-18 02:02:36

【问题描述】：

我正在尝试水平放置 2 个 UIButton，但没有成功

我正在以编程方式使用自动布局约束。

我不想将它们放在容器中并将中心与该容器对齐。

NSDictionary *metrics = @@"kLeftPadding":@(kLeftPadding),
                          @"kRightPadding":@(kRightPadding),
                          @"kMiddlePadding":@(kMiddlePadding),
                          @"kBottomPadding":@(kBottomPadding);
NSDictionary *constrainedViews = @@"titleLabel": self.titleLabel,
                                   @"btnToday" : self.btnToday,
                                   @"btnPickaDay" : self.btnPickaDay,
                                   @"dividerView" : dividerView;
NSArray *contraints = @[@"V:|-[titleLabel]-kBottomPadding-[btnToday(==40)]-[btnPickaDay(==btnToday)]-kBottomPadding-[dividerView]-0-|",
                        @"H:|-kLeftPadding-[titleLabel]-|",
                        @"H:|-kLeftPadding-[btnToday]-kMiddlePadding-[btnPickaDay(==btnToday)]-kRightPadding-|",
                        @"H:|-0-[dividerView]-0-|"];

第二个按钮从第一个结束的地方开始，但在下一行，而不是同一行。

【问题讨论】：

能否请您添加屏幕截图您得到什么以及您希望输出什么。

@ios_DK 这里是i.imgur.com/AnXeofz.png

@iOS_DK 上面的链接是当前结果，这里是所需的输出：i.imgur.com/udddlRZ.png

【参考方案1】：

我已经尝试过你的代码，但它已经崩溃了，所以根据你的问题，你只需要编写下面的代码。

UILabel *lblText = [UILabel new];
[lblText setText:@"Some Title Text"];
[lblText setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.view addSubview:lblText];

UIButton *btnRed = [UIButton new];
[btnRed setBackgroundColor:[UIColor redColor]];
[btnRed setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.view addSubview:btnRed];

UIButton *btnGreen = [UIButton new];
[btnGreen setBackgroundColor:[UIColor greenColor]];
[btnGreen setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.view addSubview:btnGreen];

UIView *vwLine = [UIView new];
[vwLine setBackgroundColor:[UIColor blueColor]];
[vwLine setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.view addSubview:vwLine];


NSDictionary *dictViews = @@"red":btnRed,@"green":btnGreen,
                            @"line":vwLine,@"lbl":lblText;

NSDictionary *dictMetrics = @@"height":@(40),@"offset":@(-40);
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[red]-0-[green(==red)]-20-|" options:0 metrics:nil views:dictViews]];

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[line]-20-|" options:0 metrics:nil views:dictViews]];

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[lbl]-20-|" options:0 metrics:nil views:dictViews]];

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(height)-[lbl]-(height)-[red(height)]-(offset)-[green(==red)]-50-[line(2)]" options:0 metrics:dictMetrics views:dictViews]];

结果：

希望它能帮助您解决问题。如果有任何疑问，请告诉我。

【讨论】：

其实我的截图是我不想要的输出，我希望这两个按钮对齐

这里你可以看到标题，两个按钮和一个分隔符，这两个按钮目前没有对齐，它们就像你的结果。 [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[red]-0-[green(==red)]-20-|"选项：0 指标：无意见：dictViews]]； [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[red(height)]-0-[green(==red)]" options:0 metrics:dictMetrics views:dictViews]];以上几行可能有助于让我对齐按钮，但标题和分隔线以某种方式变得混乱

看起来很棒。谢谢+1