How to set View height as percentage of the screen

Question

I need to design the view like below image and I have tried with fixed heights and also tried compact width and regular height and regular width and compact height but those scenarios did not worked for me.

How can i set View height as percentage of the screen height in Storyboards?

I'm using Xcode 7

Answer 1

Basically you need to act on the multiplier property of an height equal constraint. To do that while pressing CTRL, drag from the view to its superview and select equal heights constraint, later edit this constraint in Size Inspector by setting its multiplier the desired value can be expressed also as 1:25, 1/25, 0,025. If it working on the contrary just reverse items as in the picture.

Answer 2

Programmatic version

- (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];
}