Aligning a UIImageView with Auto Layout

What I want is to add an image as a subview, then align it centered along the X axis and 10 points from the bottom of the superview. I need to use Auto Layout only, and preferably visual formatting language.

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.imageView = [[UIImageView alloc] initWithFrame:CGRectZero];
    [self.imageView setTranslatesAutoresizingMaskIntoConstraints:NO];
    [self.imageView setImage:[UIImage imageNamed:@"06-arrow-south"]];
    self.imageView.contentMode = UIViewContentModeScaleAspectFit;
    [self.view addSubview:self.imageView];
    [self addConstraints];

    self.imageView.layer.borderColor = [[UIColor redColor] CGColor];

    self.imageView.layer.borderWidth = 1.0;
}

- (void)addConstraints {

    NSDictionary *viewsDictionary = @{@"arrowImage":self.imageView};

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[arrowImage(==40)]-|"
                                                                 options:0
                                                                 metrics:nil
                                                                   views:viewsDictionary]];

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[arrowImage(==40)]-10-|"
                                                                 options:0
                                                                 metrics:nil
                                                                   views:viewsDictionary]];
}

Here's what I'm getting:

Answers


V:|-[arrowImage]-10-|

This aligns the image view so that it is the standard length (20pt) from the top of its superview, and 10 from the bottom. What you want is to PIN it to the bottom only:

V:[arrowImage]-10-|

I'm not sure that centering in the superview can be done with visual format, but you can create a single constraint to center it:

[self.view addConstraint:
 [NSLayoutConstraint
  constraintWithItem:self.imageView
  attribute:NSLayoutAttributeCenterX
  relatedBy:NSLayoutRelationEqual
  toItem:self.view
  attribute:NSLayoutAttributeCenterX
  multiplier:1
  constant:0]];

There's no need to set the height or width of the image view; its size will be determined from its content.

So, here's the full code for your addConstraints method:

- (void)addConstraints {

    [self.view addConstraint:
     [NSLayoutConstraint
      constraintWithItem:self.imageView
      attribute:NSLayoutAttributeCenterX
      relatedBy:NSLayoutRelationEqual
      toItem:self.view
      attribute:NSLayoutAttributeCenterX
      multiplier:1
      constant:0]];

    NSDictionary *viewsDictionary = @{@"arrowImage":self.imageView};

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[arrowImage]-10-|"
                                                                 options:0
                                                                 metrics:nil
                                                                   views:viewsDictionary]];
}

What you currently doing is saying arrowImage should be the full size of the view minus 20px on left, right and top but be minus 10px from bottom.

The to center on x do the following.

 [self.view addConstraint:[NSLayoutConstraint constraintWithItem:arrowImage attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0];

Then as @Austin points out remove the need to be minus 8 from top and be minus 10 from the bottom:

V:[arrowImage]-10-|

Btw its minus 20 as default when you connect a sibling view to a parent: (see comment below )

|-[


Need Your Help

iOS9 Beta and MusicTrackLoopInfo

loops ios8 midi

Has anyone been able to loop a MIDI file without problems on IOS9 Beta?

Select objects with negative conditions on association and groups associated

sql ruby-on-rails postgresql activerecord

I guess I wasn't very clear in the title, but I find it hard to describe exactly what I'm after. So it's better to start with an example: