Expand views on changing orientation and screen size in auto layout

Question

I have a UIImageView which I need to expand (height and width) on changing orientation and screen size. I am using auto layout constraints for that.

    topImageView.contentMode = UIViewContentModeScaleAspectFit;
    topImageView.backgroundColor = [UIColor clearColor];
    topImageView.layer.cornerRadius = 5.0f;
    topImageView.clipsToBounds = YES;
    topImageView.translatesAutoresizingMaskIntoConstraints = NO;

    if(login_DO.logoPath)
        [topImageView loadImage:login_DO.logoPath];

    [self.view addSubview:topImageView];

    NSArray *horizontalConstraints =
    [NSLayoutConstraint constraintsWithVisualFormat:[NSString stringWithFormat:@"H:|-(%i)-[topImageView(%f)]",X_OFFSET,VIEW_FRAME_WIDTH-X_OFFSET*2]
                                            options:0 metrics:nil views:@{@"topImageView": topImageView}];

    NSArray *verticalConstraints =
    [NSLayoutConstraint constraintsWithVisualFormat:[NSString stringWithFormat:@"V:|-(%f)-[topImageView(80)]",navHeight]
                                            options:0 metrics:nil views:@{@"topImageView": topImageView}];

    [self.view addConstraints:horizontalConstraints];
    [self.view addConstraints:verticalConstraints];    

    NSLayoutConstraint *leadingMarginForImageConstraint = [NSLayoutConstraint
                                                 constraintWithItem:topImageView attribute:NSLayoutAttributeLeadingMargin
                                                 relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:self.view attribute:
                                                 NSLayoutAttributeLeadingMargin multiplier:1.0 constant:X_OFFSET];

    NSLayoutConstraint *topMarginForImageConstraint = [NSLayoutConstraint
                                                           constraintWithItem:topImageView attribute:NSLayoutAttributeTopMargin
                                                           relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:self.view attribute:
                                                           NSLayoutAttributeTopMargin multiplier:1.0 constant:VIEW_FRAME_WIDTH-X_OFFSET*2];

    [self.view addConstraints:@[ leadingMarginForImageConstraint,
                                 topMarginForImageConstraint]];

But the image is not expanding. I am new to auto layouts. Am I missing any constraint?

Answer 1

you can change the imageBottomConstraint from -navHeight to some other value from bottom. avoid using VIEW_FRAME_WIDTH cause it change when you change orientation.

UIView *superview = self.view;
 NSLayoutConstraint *imageTopConstraint = [NSLayoutConstraint
                                                  constraintWithItem:topImageView attribute:NSLayoutAttributeTop
                                                  relatedBy:NSLayoutRelationEqual toItem:superview
                                                  attribute:NSLayoutAttributeTop multiplier:1.0 constant:navHeight];
    NSLayoutConstraint *imageBottomConstraint = [NSLayoutConstraint
                                                     constraintWithItem:topImageView attribute:NSLayoutAttributeBottom
                                                     relatedBy:NSLayoutRelationEqual toItem:superview
                                                     attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-navHeight];
    NSLayoutConstraint *imageLeftConstraint = [NSLayoutConstraint
                                                   constraintWithItem:topImageView attribute:NSLayoutAttributeLeft
                                                   relatedBy:NSLayoutRelationEqual toItem:superview attribute:
                                                   NSLayoutAttributeLeft multiplier:1.0 constant:X_OFFSET];
    NSLayoutConstraint *imageRightConstraint = [NSLayoutConstraint
                                                    constraintWithItem:topImageView attribute:NSLayoutAttributeRight
                                                    relatedBy:NSLayoutRelationEqual toItem:superview attribute:
                                                    NSLayoutAttributeRight multiplier:1.0 constant:-X_OFFSET];
[superview addConstraints:@[imageBottomConstraint ,
                            imageLeftConstraint, imageRightConstraint,
                            imageTopConstraint]];

for more help check http://www.tutorialspoint.com/ios/ios_auto_layouts.htm

or try using https://github.com/marcoarment/CompactConstraint

let me know if it helped.