如何使用 XCode 7 在情节提要中将视图高度设置为屏幕高度的百分比

Question

我需要设计如下图所示的视图，我尝试过使用固定高度，还尝试过紧凑宽度和常规高度以及常规宽度和紧凑高度，但这些方案对我不起作用。

如何在情节提要中将视图高度设置为屏幕高度的百分比？

我正在使用 Xcode 7

Answer 1

基本上你需要对高度相等约束的 multiplier 属性进行操作。为此，请在按住 CTRL 的同时，从视图拖动到其父视图，然后 select equal heights constraint，稍后通过设置其 multiplier 在 Size Inspector 中编辑此约束，所需的值也可以表示为 1:25, 1/25, 0,025。如果相反，则如图所示反转项目。

Answer 2

程序化版本

- (void)overallViewConstratints {

_firstView = [[UIView alloc]init];
[_firstView setTranslatesAutoresizingMaskIntoConstraints:NO];
_firstView.backgroundColor = [UIColor grayColor];
[self.view addSubview:_firstView];

NSLayoutConstraint *firstViewTop = [NSLayoutConstraint constraintWithItem:_firstView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:0.0];

NSLayoutConstraint *firstViewLeading = [NSLayoutConstraint constraintWithItem:_firstView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1.0 constant:0.0];

NSLayoutConstraint *firstViewTrailing = [NSLayoutConstraint constraintWithItem:_firstView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:0.0];

NSLayoutConstraint *firstViewHeight = [NSLayoutConstraint constraintWithItem:_firstView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeHeight multiplier:0.15 constant:0.0];

NSArray *firstViewConstraints = @[firstViewTop, firstViewLeading, firstViewTrailing, firstViewHeight];
[self.view addConstraints:firstViewConstraints];

_secondView = [[UIView alloc]init];
_secondView.backgroundColor = [UIColor darkGrayColor];
[self.secondView setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.view addSubview:_secondView];

NSLayoutConstraint *secondViewTop = [NSLayoutConstraint constraintWithItem:_secondView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:_firstView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0.0];

NSLayoutConstraint *secondViewLeading = [NSLayoutConstraint constraintWithItem:_secondView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1.0 constant:0.0];

NSLayoutConstraint *secondViewTrailing = [NSLayoutConstraint constraintWithItem:_secondView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:0.0];

NSLayoutConstraint *secondViewHeight = [NSLayoutConstraint constraintWithItem:_secondView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeHeight multiplier:0.25 constant:0.0];

NSArray *secondViewConstraints = @[secondViewTop, secondViewLeading, secondViewTrailing, secondViewHeight];
[self.view addConstraints:secondViewConstraints];


_thirdView = [[UIView alloc]init];
_thirdView.backgroundColor = [UIColor lightGrayColor];
[_thirdView setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.view addSubview:_thirdView];


NSLayoutConstraint *thirdViewTop = [NSLayoutConstraint constraintWithItem:_thirdView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:_secondView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0.0];

NSLayoutConstraint *thirdViewLeading = [NSLayoutConstraint constraintWithItem:_thirdView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1.0 constant:0.0];

NSLayoutConstraint *thirdViewTrailing = [NSLayoutConstraint constraintWithItem:_thirdView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:0.0];

NSLayoutConstraint *thirdViewHeight = [NSLayoutConstraint constraintWithItem:_thirdView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeHeight multiplier:0.40 constant:0.0];

NSArray *thirdViewConstraints = @[thirdViewTop, thirdViewLeading, thirdViewTrailing, thirdViewHeight];
[self.view addConstraints:thirdViewConstraints];


_fourthView = [[UIView alloc]init];
_fourthView.backgroundColor = [UIColor brownColor];
[_fourthView setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.view addSubview:_fourthView];


NSLayoutConstraint *fourthViewTop = [NSLayoutConstraint constraintWithItem:_fourthView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:_thirdView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0.0];

NSLayoutConstraint *fourthViewLeading = [NSLayoutConstraint constraintWithItem:_fourthView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1.0 constant:0.0];

NSLayoutConstraint *fourthViewTrailing = [NSLayoutConstraint constraintWithItem:_fourthView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:0.0];

NSLayoutConstraint *fourthViewHeight = [NSLayoutConstraint constraintWithItem:_fourthView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeHeight multiplier:0.20 constant:0.0];

NSArray *fourthViewConstraints = @[fourthViewTop, fourthViewLeading, fourthViewTrailing, fourthViewHeight];
[self.view addConstraints:fourthViewConstraints];
}

Answer 3

您可以简单地将每个高度设置为 UI 高度的比例，15% 高度就是；

.frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height * 0.15)

如何使用 XCode 7 在情节提要中将视图高度设置为屏幕高度的百分比

How to set View height as percentage of the screen height in Storyboards with XCode 7

interface-builder

storyboard

ios

uistoryboard

autolayout