具有自动布局的水平放置等宽等水平空间按钮

Posted 2023-03-11

【中文标题】具有自动布局的水平放置等宽等水平空间按钮

【英文标题】：Horizontally Placed Equal Width Equal Horizontal Space Buttons With Auto Layout

【发布时间】：2017-06-08 11:29:21

【问题描述】：

我写了如下代码来实现

水平间距等宽固定高度等于水平间距三个按钮，但不知何故无法正常工作。任何人都可以纠正这个问题吗？

UIButton *cancelBtn = [UIButton new];

cancelBtn.frame = CGRectMake(10, 5, (popupView.bounds.size.width-40)/3, 30);

[cancelBtn setTitle:@"Cancel" forState:UIControlStateNormal];

[cancelBtn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];

[cancelBtn setBackgroundColor:[UIColor lightGrayColor]];

[popupView addSubview:cancelBtn];



UIButton *resetBtn = [UIButton new];

resetBtn.frame = CGRectMake(cancelBtn.frame.origin.x+cancelBtn.bounds.size.width+10, 5, (popupView.bounds.size.width-40)/3, 30);

[resetBtn setTitle:@"Reset" forState:UIControlStateNormal];

[resetBtn setTitleColor:[UIColor yellowColor] forState:UIControlStateNormal];

[resetBtn setBackgroundColor:[UIColor darkGrayColor]];

[popupView addSubview:resetBtn];




UIButton *doneBtn = [UIButton new];

doneBtn.frame = CGRectMake(popupView.bounds.size.width-10-((popupView.bounds.size.width-40)/3), 5, (popupView.bounds.size.width-40)/3, 30);

[doneBtn setTitle:@"Done" forState:UIControlStateNormal];

[doneBtn setTitleColor:[UIColor greenColor] forState:UIControlStateNormal];

[doneBtn setBackgroundColor:[UIColor blackColor]];

[popupView addSubview:doneBtn];





cancelBtn.translatesAutoresizingMaskIntoConstraints = NO;

[cancelBtn addConstraint:[NSLayoutConstraint constraintWithItem:cancelBtn attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:1 constant:30]];

[popupView addConstraint:[NSLayoutConstraint constraintWithItem:cancelBtn attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:popupView attribute:NSLayoutAttributeTop multiplier:1.0f constant:5.0f] ];


[popupView addConstraint:[NSLayoutConstraint constraintWithItem:cancelBtn attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:popupView attribute:NSLayoutAttributeLeft multiplier:1.0f constant:10.0f]];
 resetBtn.translatesAutoresizingMaskIntoConstraints = NO;

[resetBtn addConstraint:[NSLayoutConstraint constraintWithItem:resetBtn attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:1 constant:30]];

[popupView addConstraint:[NSLayoutConstraint constraintWithItem:resetBtn attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:popupView attribute:NSLayoutAttributeTop multiplier:1.0f constant:5.0f] ];


[popupView addConstraint:[NSLayoutConstraint constraintWithItem:cancelBtn attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:resetBtn attribute:NSLayoutAttributeLeft multiplier:1.0f constant:10.0f]];


[popupView addConstraint:[NSLayoutConstraint constraintWithItem:doneBtn attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:resetBtn attribute:NSLayoutAttributeRight multiplier:1.0f constant:-10.0f]];



doneBtn.translatesAutoresizingMaskIntoConstraints = NO;


[doneBtn addConstraint:[NSLayoutConstraint constraintWithItem:doneBtn attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:1 constant:30]];

[popupView addConstraint:[NSLayoutConstraint constraintWithItem:doneBtn attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:popupView attribute:NSLayoutAttributeTop multiplier:1.0f constant:5.0f] ];

[popupView addConstraint:[NSLayoutConstraint constraintWithItem:doneBtn attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:popupView attribute:NSLayoutAttributeRight multiplier:1.0f constant:-10.0f]];
[popupView addConstraint:[NSLayoutConstraint     constraintWithItem:cancelBtn attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:resetBtn attribute:NSLayoutAttributeWidth multiplier:1 constant:0]];

[popupView addConstraint:[NSLayoutConstraint constraintWithItem:resetBtn attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:doneBtn attribute:NSLayoutAttributeWidth multiplier:1 constant:0]];

如何解决这个问题？

我想实现这样的弹出窗口。

enter image description here

【问题讨论】：

什么是弹出视图？是 UIView 吗？

@_elk_cloner 是的，它是一个 uiview，其中有一个 UIDatePicker，看起来很好。

@KoustavBasu 你能分享一下你目前如何获得输出的截图吗

如何在这里发布图片？

请检查我已经发布了一个带有两个图片链接的答案，以解释事情是如何出现的。 @AravindAR

【参考方案1】：

使用 stackView 代替 UIView 有很多灵活性。

您不必在 stackView 中考虑子视图的自动布局。

Stack View 有很多功能可以满足您的需求

代码：

-(void)createStackViewWithButton 

UIButton *doneBtn = [UIButton new];
[doneBtn setTitle:@"Done" forState:UIControlStateNormal];

[doneBtn setTitleColor:[UIColor greenColor] forState:UIControlStateNormal];

[doneBtn setBackgroundColor:[UIColor blackColor]];

[doneBtn.heightAnchor constraintEqualToConstant:40].active = true;
[doneBtn.widthAnchor constraintEqualToConstant:100].active = true;


UIButton *doneBtn2 = [UIButton new];
[doneBtn2 setTitle:@"Cancel" forState:UIControlStateNormal];

[doneBtn2 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

[doneBtn2 setBackgroundColor:[UIColor greenColor]];

[doneBtn2.heightAnchor constraintEqualToConstant:40].active = true;
[doneBtn2.widthAnchor constraintEqualToConstant:100].active = true;



UIButton *doneBtn3 = [UIButton new];
[doneBtn3 setTitle:@"Edit" forState:UIControlStateNormal];

[doneBtn3 setTitleColor:[UIColor greenColor] forState:UIControlStateNormal];

[doneBtn3 setBackgroundColor:[UIColor blueColor]];

[doneBtn3.heightAnchor constraintEqualToConstant:40].active = true;
[doneBtn3.widthAnchor constraintEqualToConstant:100].active = true;




UIStackView *stackView = [[UIStackView alloc] init];

stackView.axis = UILayoutConstraintAxisHorizontal;
stackView.distribution = UIStackViewDistributionEqualSpacing;
stackView.alignment = UIStackViewAlignmentCenter;
stackView.spacing = 0;

[stackView addArrangedSubview:doneBtn];
[stackView addArrangedSubview:doneBtn2];
[stackView addArrangedSubview:doneBtn3];

stackView.translatesAutoresizingMaskIntoConstraints = false;
[self.view addSubview:stackView];


//Layout for Stack View
[stackView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor].active = true;
[stackView.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor].active = true;

输出：

【讨论】：

我已经在那个视图中实现了很多东西。是不是可以像我在上面的代码中尝试的那样做这件事。 ?

你是如何添加图片的？我的图片仅显示为超链接。

【参考方案2】：

Image 1

Image 2

他们一个接一个地出现。

【讨论】：

你复制粘贴了我的代码吗？我的代码工作正常。只需获取另一个示例视图控制器并删除我编写的函数

@elk_cloner 我想堆栈视图不可能实现我想要的东西。 Y 位置距离 pope-view 顶部 5 px 和最左侧按钮 x 的三个按钮，所有三个按钮之间的间距为 10，最右侧按钮和 pope-view 边缘之间的尾随空间为 10。当中间按钮在某些情况下消失，左右按钮宽度增加并保持前导尾随和 10px 之间的空间。如果我旋转屏幕，事情将是相同的。 P.S：按钮宽度将相等。

【参考方案3】：

已解决！修复它。

UIButton *cancelBtn = [UIButton new];

cancelBtn.frame = CGRectMake(10, 5, (popupView.bounds.size.width-40)/3, 30);

[cancelBtn setTitle:@"Cancel" forState:UIControlStateNormal];

[cancelBtn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];

[cancelBtn setBackgroundColor:[UIColor lightGrayColor]];

[popupView addSubview:cancelBtn];



UIButton *resetBtn = [UIButton new];

resetBtn.frame = CGRectMake(cancelBtn.frame.origin.x+cancelBtn.bounds.size.width+10, 5, (popupView.bounds.size.width-40)/3, 30);

[resetBtn setTitle:@"Reset" forState:UIControlStateNormal];

[resetBtn setTitleColor:[UIColor yellowColor] forState:UIControlStateNormal];

[resetBtn setBackgroundColor:[UIColor darkGrayColor]];

[popupView addSubview:resetBtn];




UIButton *doneBtn = [UIButton new];

doneBtn.frame = CGRectMake(resetBtn.frame.origin.x+resetBtn.bounds.size.width+10, 5, (popupView.bounds.size.width-40)/3, 30);

[doneBtn setTitle:@"Done" forState:UIControlStateNormal];

[doneBtn setTitleColor:[UIColor greenColor] forState:UIControlStateNormal];

[doneBtn setBackgroundColor:[UIColor blackColor]];

[popupView addSubview:doneBtn];





cancelBtn.translatesAutoresizingMaskIntoConstraints = NO;

[cancelBtn addConstraint:[NSLayoutConstraint constraintWithItem:cancelBtn attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:1 constant:30]];

[popupView addConstraint:[NSLayoutConstraint constraintWithItem:cancelBtn attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:popupView attribute:NSLayoutAttributeTop multiplier:1.0f constant:5.0f] ];


[popupView addConstraint:[NSLayoutConstraint constraintWithItem:cancelBtn attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:popupView attribute:NSLayoutAttributeLeading multiplier:1.0f constant:10.0f]];




resetBtn.translatesAutoresizingMaskIntoConstraints = NO;

[resetBtn addConstraint:[NSLayoutConstraint constraintWithItem:resetBtn attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:1 constant:30]];

[popupView addConstraint:[NSLayoutConstraint constraintWithItem:resetBtn attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:popupView attribute:NSLayoutAttributeTop multiplier:1.0f constant:5.0f] ];




[popupView addConstraint:[NSLayoutConstraint constraintWithItem:resetBtn attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:cancelBtn attribute:NSLayoutAttributeRight multiplier:1.0f constant:10.0f]];


[popupView addConstraint:[NSLayoutConstraint constraintWithItem:resetBtn attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:doneBtn attribute:NSLayoutAttributeLeft multiplier:1.0f constant:-10.0f]];



 doneBtn.translatesAutoresizingMaskIntoConstraints = NO;


[doneBtn addConstraint:[NSLayoutConstraint constraintWithItem:doneBtn attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:1 constant:30]];

[popupView addConstraint:[NSLayoutConstraint constraintWithItem:doneBtn attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:popupView attribute:NSLayoutAttributeTop multiplier:1.0f constant:5.0f] ];

[popupView addConstraint:[NSLayoutConstraint constraintWithItem:doneBtn attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:popupView attribute:NSLayoutAttributeTrailing multiplier:1.0f constant:-10.0f]];

// +++++++ 等宽约束 +++++++

[popupView addConstraint:[NSLayoutConstraint constraintWithItem:cancelBtn attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:resetBtn attribute:NSLayoutAttributeWidth multiplier:1.0f constant:0]];

[popupView addConstraint:[NSLayoutConstraint constraintWithItem:resetBtn attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:doneBtn attribute:NSLayoutAttributeWidth multiplier:1.0f constant:0]];