Locating an image to centre of a view with auto layout programatically

Question

I'm trying to locate a picture to centre of an view using NSLayoutConstraint like below:

NSInteger userPictureRadius = 50.0F;

UIImageView *imgv = [[UIImageView alloc] initWithFrame:CGRectMake(self.view.bounds.size.width / 2 - userPictureRadius,
                                                                  self.topArea.bounds.size.height / 2 - userPictureRadius + 20,
                                                                  userPictureRadius * 2,
                                                                  userPictureRadius * 2)];

NSString *urlString= [NSString stringWithFormat:@"%@%@",[[Parameters sharedInstance] BASE_URL], [[MyCredentialStore sharedInstance] getPicturePath]] ;

[imgv sd_setImageWithURL:[NSURL URLWithString:urlString]  placeholderImage:nil];
imgv.layer.cornerRadius = imgv.frame.size.height / 2;
imgv.layer.masksToBounds = YES;
imgv.layer.borderWidth = 0;
[imgv.layer setBorderColor: [[UIColor blackColor] CGColor]];
[imgv.layer setBorderWidth: 2.0];
[imgv setTranslatesAutoresizingMaskIntoConstraints:NO];

...

[self.topArea addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[imgv(100)]-|"
                                                                       options:0
                                                                       metrics:nil
                                                                         views:elementsDictionary]];

[self.topArea addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[imgv(100)]-|"
                                                                       options:0
                                                                       metrics:nil
                                                                         views:elementsDictionary]];

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[_topArea]-|"
                                                                       options:0
                                                                       metrics:nil
                                                                         views:elementsDictionary]];

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[_topArea]-[_tableView]-|"
                                                                  options:0
                                                                  metrics:nil
                                                                    views:elementsDictionary]];

I have two problems here:

1. The image appears on the top left side of the screen.

2. There is a blank space between top area and the screen borders.

Could you tell me what's wrong with my code?

Answer 1

Centering as such can't be done using the auto layout Visual Format Language (VFL). The VFL strings you've provided relate the edges of the image view to its superview by the standard distance. For example, H:|-[imgv(100)]-| establishes three constraints: the image view's leading edge equals its superview's leading edge plus the standard distance, the image view's width is 100 points, and the superview's trailing edge equals the image view's trailing edge plus the standard distance. That will have the result of dictating the size of both the image view and its superview. I guess the image view will be centered in its superview, but its superview may not be the size that you were expecting.

To center one view within another horizontally, use something like:

NSLayoutConstraint* constraint = [NSLayoutConstraint constraintWithItem:imgv
                                                              attribute:NSLayoutAttributeCenterX
                                                              relatedBy:NSLayoutRelationEqual
                                                                 toItem:imgv.superview
                                                              attribute:NSLayoutAttributeCenterX
                                                             multiplier:1
                                                               constant:0];
[imgv.superview addConstraint:constraint];

You would do something similar for the vertical orientation. If you want to force the image view to a particular size, you can use separate constraints for that. (You could use VFL for that, if you prefer. It would be something like H:[imgv(100)]. Note that there's no relation to another view in there, just the width.)

Answer 2

If you are choosing Autolayouting makes no sense to use the manual coordinates

UIImageView *imgv = [[UIImageView alloc] initWithFrame:CGRectMake(self.view.bounds.size.width / 2 - userPictureRadius,
                                                                  self.topArea.bounds.size.height / 2 - userPictureRadius + 20,
                                                                  userPictureRadius * 2,
                                                                  userPictureRadius * 2)];

Should become just

UIImageView *imgv = [[UIImageView alloc] init]; 

Show the code how you construct the elementsDictionary so I can try to help further.

Also would be better to post a small screenshot of what visual issue you are facing.