OthmanT
OthmanT

Reputation: 223

Can't get a UIImageView fill the parent UIView with autolayout

I'm trying to fill a UIView with a UIImageView using auto layout. I've tried several thing, but the most obvious, equalSize with parent view only works when I set the correct size in "Simulated metric". If I let Freeform (the point of autolayout isn't it ?) I get messed up.

I'm testing on an iPhone 4S and a 6 plus.

Thanks for any leading tracks.

EDIT FOR @mittens

enter image description here

enter image description here

I've seen your edit. I still can get it working. As you see I have 4 margin constraints, the same as in your code (I did not need the rest because I only use the main UIView). Anyway, when I change the size on xcode, the layout is perfect, when I send it to my 4S, I only get Top and left margins.

Upvotes: 3

Views: 8055

Answers (2)

mittens
mittens

Reputation: 746

I'd double check the constraints on the UIView you're trying to fill with the UIImageView to make sure it is filling up its parent view as it should be when the storyboard/xib is set to freeform. Also if you're adding/creating the views programmatically double check that the views 'translatesAutoresizingMaskIntoConstraintsis set toNO`. That always trips me up.

I made a super quick view and added some constraints to both a view inside the View Controllers view and an Image view to show one way to do it -- hopefully it helps at least a little

- (void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];
    self.backdropView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];
    self.backdropView.backgroundColor = [UIColor colorWithRed:0 green:1 blue:0 alpha:0.5];
    self.backdropView.translatesAutoresizingMaskIntoConstraints = NO; // Make sure this is set to NO if the view is being added programmatically
    [self.view addSubview:self.backdropView]; // Always add the view into the hierarchy _before_ constraints are added (again, if creating & adding programmatically)

    NSLayoutConstraint *backdropViewWidth = [NSLayoutConstraint constraintWithItem:self.backdropView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.backdropView.superview attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];
    NSLayoutConstraint *backdropViewHeight = [NSLayoutConstraint constraintWithItem:self.backdropView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.backdropView.superview attribute:NSLayoutAttributeHeight multiplier:0.5 constant:0];
    NSLayoutConstraint *backdropViewCenterX = [NSLayoutConstraint constraintWithItem:self.backdropView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.backdropView.superview attribute:NSLayoutAttributeCenterX multiplier:1 constant:0];
    NSLayoutConstraint *backdropViewCenterY = [NSLayoutConstraint constraintWithItem:self.backdropView attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.backdropView.superview attribute:NSLayoutAttributeCenterY multiplier:1 constant:0];

    [self.backdropView.superview addConstraints:@[backdropViewWidth, backdropViewHeight, backdropViewCenterY, backdropViewCenterX]];

    self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];
    self.imageView.translatesAutoresizingMaskIntoConstraints = NO;
    self.imageView.backgroundColor = [UIColor colorWithRed:1 green:0 blue:1 alpha:0.5];
    [self.backdropView addSubview:self.imageView];

    NSLayoutConstraint *imageViewTop = [NSLayoutConstraint constraintWithItem:self.imageView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.imageView.superview attribute:NSLayoutAttributeTop multiplier:1 constant:8];
    NSLayoutConstraint *imageViewLeft = [NSLayoutConstraint constraintWithItem:self.imageView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.imageView.superview attribute:NSLayoutAttributeLeft multiplier:1 constant:8];
    NSLayoutConstraint *imageViewRight = [NSLayoutConstraint constraintWithItem:self.imageView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.imageView.superview attribute:NSLayoutAttributeRight multiplier:1 constant:-8];
    NSLayoutConstraint *imageViewBottom = [NSLayoutConstraint constraintWithItem:self.imageView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.imageView.superview attribute:NSLayoutAttributeBottom multiplier:1 constant:-8];

    [self.imageView.superview addConstraints:@[imageViewTop, imageViewLeft, imageViewRight, imageViewBottom]];

    [self.view layoutIfNeeded];
}

That produces View in Portrait in iPhone6 simulator and View in Landscape in iPhone6 simulator

Again, hopefully this helps.

EDIT: how to add them in storyboard

Note on photo 3, I select the view I want to constrain and then shift select the view I want to constraint it to. So I selected the inside UIView (because it width/height will be constrained to the parent view) then shift selected its parent view (the view it is nested inside of) to enable those options of Equal Width & Equal Height

Add constraints to UIImageView nested inside the UIView Add constraints to UIImageView nested inside the UIView Center UIView inside its parent view Center UIView inside its parent view Add width/height constraints equal to parent -- Note: I select the view I want to constrain and then shift select the view I want to constraint it to. So I selected the inside UIView (because it width/height will be constrained to the parent view) then shift selected its parent view (the view it is nested inside of) to enable those options of Equal Width & Equal Height Add width/height constraints equal to parent Change multiplier in constraint to be whatever you want, 0.5 in this case Change multiplier in constraint to be whatever you want, 0.5 in this case Celebrate Celebrate

Upvotes: 5

Sampayo
Sampayo

Reputation: 38

i'm not sure but try this in your imageview.

[imgView clipToBounds:YES]; 

I hope it's work for you

Upvotes: 0

Related Questions