UIStackView 中按钮的按比例调整大小
Posted
技术标签:
【中文标题】UIStackView 中按钮的按比例调整大小【英文标题】:Proportional resizing of buttons in UIStackView 【发布时间】:2016-06-08 10:36:30 【问题描述】:我需要像这张图片一样布局 5 个按钮:
我需要它们在不同的设备上按比例调整大小。
我在一个方法中有这个代码,它设置了一个带有 5 个按钮的视图。
UIStackView *stackView = [[UIStackView alloc]init];
// Add buttons to stackView (buttons are initialised)
[stackView addArrangedSubview:_button1];
[stackView addArrangedSubview:_button2];
[stackView addArrangedSubview:_button3];
[stackView addArrangedSubview:_button4];
[stackView addArrangedSubview:_button5];
stackView.translatesAutoresizingMaskIntoConstraints = false;
[self.view addSubview:stackView];
stackView.axis = UILayoutConstraintAxisVertical;
stackView.distribution = UIStackViewDistributionFillEqually;
stackView.spacing = 5;
//Layout Constraints for stackView
[stackView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor].active = true;
[stackView.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor].active = true;
// 80% of screen height should be used for buttons
CGFloat screenHeightAvailableForButtons = 80/100;
// Calculate multiplier for height of the buttons (5 buttons)
CGFloat buttonMultiplier = screenHeightAvailableForButtons /5;
// 25% of screen width should be used for buttons
CGFloat screenWidthMultiplier = 25/100;
[_button1.widthAnchor constraintEqualToAnchor:self.view.widthAnchor multiplier: screenWidthMultiplier].active = true;
[_button1.heightAnchor constraintEqualToAnchor: self.view.heightAnchor multiplier: buttonMultiplier].active = true;
[_button2.widthAnchor constraintEqualToAnchor:self.view.widthAnchor multiplier: screenWidthMultiplier ].active = true;
[_button2.heightAnchor constraintEqualToAnchor: self.view.heightAnchor multiplier: buttonMultiplier].active = true;
[_button3.widthAnchor constraintEqualToAnchor:self.view.widthAnchor multiplier: screenWidthMultiplier ].active = true;
[_button3.heightAnchor constraintEqualToAnchor: self.view.heightAnchor multiplier: buttonMultiplier].active = true;
[_button4.widthAnchor constraintEqualToAnchor:self.view.widthAnchor multiplier: screenWidthMultiplier ].active = true;
[_button4.heightAnchor constraintEqualToAnchor: self.view.heightAnchor multiplier: buttonMultiplier].active = true;
[_button5.widthAnchor constraintEqualToAnchor:self.view.widthAnchor multiplier: screenWidthMultiplier ].active = true;
[_button5.heightAnchor constraintEqualToAnchor: self.view.heightAnchor multiplier: buttonMultiplier].active = true;
此代码返回一个空白视图。我是不是用错了方法? 我无法弄清楚我做错了什么。我需要在目标 c 中以编程方式完成此操作。
谢谢
【问题讨论】:
请详细说明“我需要它们在不同的设备上按比例调整大小。”。就像“如果堆栈视图高度是 xxx 按钮偏移量是 xx 那么按钮高度应该是 xxx”和宽度类似。 @BangOperator 我需要它看起来像在“所有设备上”提供的图像中,我需要以编程方式而不是在 IB 中。因此,在横向模式下,stackView.height = screen.height 从顶部和底部减去 20points,button.height = stackView 的 1/5,每个按钮之间有 5point 间距。并且stackView.width = screen.width 的1/4,距离左边缘20points,button.width = stackView.width。希望这是有道理的 【参考方案1】:对于您的情况,您不需要在堆栈视图中为按钮设置约束。堆栈视图会自动处理。
试试这个
- (void)viewDidLoad
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
UIStackView *stackView = [[UIStackView alloc]initWithFrame:self.view.bounds];
stackView.backgroundColor = [UIColor darkGrayColor];
_button1 = [UIButton buttonWithType:UIButtonTypeSystem];
[_button1 setTitle:@"Button 1" forState:UIControlStateNormal];
_button1.translatesAutoresizingMaskIntoConstraints = NO;
_button1.backgroundColor = [UIColor lightGrayColor];
_button2 = [UIButton buttonWithType:UIButtonTypeSystem];
[_button2 setTitle:@"Button 2" forState:UIControlStateNormal];
_button2.translatesAutoresizingMaskIntoConstraints = NO;
_button2.backgroundColor = [UIColor lightGrayColor];
_button3 = [UIButton buttonWithType:UIButtonTypeSystem];
[_button3 setTitle:@"Button 3" forState:UIControlStateNormal];
_button3.translatesAutoresizingMaskIntoConstraints = NO;
_button3.backgroundColor = [UIColor lightGrayColor];
_button4 = [UIButton buttonWithType:UIButtonTypeSystem];
[_button4 setTitle:@"Button 4" forState:UIControlStateNormal];
_button4.translatesAutoresizingMaskIntoConstraints = NO;
_button4.backgroundColor = [UIColor lightGrayColor];
_button5 = [UIButton buttonWithType:UIButtonTypeSystem];
[_button5 setTitle:@"Button 5" forState:UIControlStateNormal];
_button5.translatesAutoresizingMaskIntoConstraints = NO;
_button5.backgroundColor = [UIColor lightGrayColor];
// Add buttons to stackView (buttons are initialised)
[stackView addArrangedSubview:_button1];
[stackView addArrangedSubview:_button2];
[stackView addArrangedSubview:_button3];
[stackView addArrangedSubview:_button4];
[stackView addArrangedSubview:_button5];
stackView.translatesAutoresizingMaskIntoConstraints = false;
[self.view addSubview:stackView];
stackView.axis = UILayoutConstraintAxisVertical;
stackView.distribution = UIStackViewDistributionFillEqually;
stackView.alignment = UIStackViewAlignmentFill;
stackView.spacing = 5;
//Layout Constraints for stackView
[stackView.layoutMarginsGuide.topAnchor constraintEqualToAnchor:self.view.layoutMarginsGuide.topAnchor].active = true;
[stackView.layoutMarginsGuide.bottomAnchor constraintEqualToAnchor:self.view.layoutMarginsGuide.bottomAnchor].active = true;
// 25% of screen width should be used for buttons
[stackView.widthAnchor constraintEqualToAnchor:self.view.widthAnchor multiplier:25.0/100.0].active = true;
[stackView.layoutMarginsGuide.centerXAnchor constraintEqualToAnchor:self.view.layoutMarginsGuide.centerXAnchor].active = true;
【讨论】:
谢谢先生。我了解到我还可以使用'constraintEqualToAnchor:constant:'进一步向约束添加'constant'值,以便将stackView定位在屏幕上我想要的任何位置!好东西;) @DannyHuseyin 如果这回答了您的问题,请将其标记为已回答。 ?以上是关于UIStackView 中按钮的按比例调整大小的主要内容,如果未能解决你的问题,请参考以下文章