0

This is a question about iOS, XCode, Auto Layout, and Objective-C. I feel like it has an easy answer, but I've searched high and low in SO and can't find a solution.

I want to place a small crosshairs image in the center of a Google Map so that as the user pans around the map, the image remains fixed. I'm doing this by simply adding a UIImageView as a subview to the Google Map view, which is a GMSMapView that I've made an IBOutlet, self.mapView.

I calculate the location to place image with the following:

crosshairs.center = CGPointMake(self.mapView.bounds.size.width / 2, self.mapView.bounds.size.height / 2);

Meanwhile, I've set constraints on the map's view so that its leading and trailing spaces are pegged to the superview. That should make it's width and height liquid -- or so I thought.

In fact, when I NSLog the width and height of the map view at runtime, they reflect the width (600) and height (384) as specified in the size inspector in Xcode -- even though I have NOT pinned the width nor height with constraints.

The result is that the image is centered not to the screen, but to the map view's erroneous width and height (which extend off screen).

I know I'm overlooking something stupid, or I'm missing essential concepts of Auto Layout. Either way, I'd appreciate any guidance.

Will

2
  • Why not just have the UIImageView on the same level as the MapView?
    – hashier
    Mar 17, 2015 at 21:17
  • Where are you adding the crosshairs? You should do it in didLayoutSubviews as before then then frame won't be set - as you are finding, but as @hashier said you can simply add the crosshairs in IB and constrain them there
    – Paulw11
    Mar 17, 2015 at 21:44

1 Answer 1

1

The important thing while using auto layout, is you should not be changing the frame manually anymore (using setCenter: in your case). You should layout everything using constraints.

You could add the UIImage in the storyboard on top of the mapView and center it there, using constraints.

If that is not possible, you can also add the constraints in code, using something like this:

[self.mapView addSubview:crosshairs];
[crosshairs setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.mapView addConstraints:[NSLayoutConstraint constraintWithItem:self.mapView attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:crosshairs attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0]];
[self.mapView addConstraints:[NSLayoutConstraint constraintWithItem:self.mapView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:crosshairs attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0]];

Depending on where you are adding these constraints, you might have to call [self.mapView layoutIfNeeded];.

Using the constraints, the image should always be centered on top of the mapView.

About the wrong frame for the mapView, it depends where you are logging it. If your IBOutlet is in a UIViewController, you should do it in viewWillLayoutSubviews: after the [super viewWillLayoutSubviews]; call.

- (void)viewWillLayoutSubviews {
    [super viewWillLayoutSubviews];
    NSLog(@"Map View frame %@", NSStringFromCGRect(self.mapView.frame));
}

If you have it in a custom UIView class, you should check the frame in layoutSubviews:

- (void)layoutSubviews {
    [super layoutSubviews];
    NSLog(@"Map View frame %@", NSStringFromCGRect(self.mapView.frame));
}

Hope this fixes your problem.

2
  • Thank you @Catalina and Paulw11. Fundamentally my problem was that I was checking the frame in viewDidLoad, I guess before Auto Layout had changed the frame based on the screen's actual dimensions. When I moved the NSLog to viewWillLayoutSubviews, it was correct. Thanks again.
    – Will Smith
    Mar 19, 2015 at 4:13
  • My fundamental mistake as well. Constraints were not set apparently until viewWillLayoutSubviews or at least they were by that time. I am off to research the view lifecycle in greater detail as this killed a few hours for me to figure out.
    – timlint
    Oct 30, 2015 at 1:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.