CODEWITHSUNDEEP
iosiphoneobjective-ccocoa-touchautolayout
Mark W
Mark W

Reputation: 3909

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:

enter image description here

Upvotes: 0

Views: 626

Answers (2)

Austin
Austin

Reputation: 5655

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

Upvotes: 3

BooRanger
BooRanger

Reputation: 1526

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 )

|-[

Upvotes: 1

Related Questions