自动版式，约束和旋转

Question

I'm having an issue with auto layout and constraints and could use some help.

I am running this application on an iPad. I have a window that contains two views, a UIWebView and an MKMapView. Both of those views are set up in IB, and Auto Layout is turned on. The UIWebView is positioned at the top of the window and the MKMapView is at the bottom. Each view takes up almost half of the window. The UIWebView has the following constraints set up in IB: NSLayoutAttributeTop to Superview equal to 0, Leading Edge to Superview equal to 0, Trailing Edge to Superview equal to 0, and NSLayoutAttributeBottom to Superview equal to 480. The MKMapView has the following constraints set up in IB: NSLayoutAttributeTop to Superview equal to 480, Leading Edge to Superview equal to 0, Trailing Edge to Superview equal to 0, and NSLayoutAttributeBottom to Superview equal to 0.

When the window is loaded, the MKMapView is actually removed, since I want the UIWebView to take up the entire screen, because there is no data to display in the map view. This is done in my updateDetailViews function:

- (void)updateDetailViews
{
displayHeight = self.maximumUsableFrame.size.height;
viewDistance=displayHeight/2+centerMapButton.frame.size.height/2+16;

[detailMapView setTranslatesAutoresizingMaskIntoConstraints:NO];
[directoryWebView setTranslatesAutoresizingMaskIntoConstraints:NO];

if (mapViewVisible==true) {
    webViewDistFromBottomDefault=viewDistance;
    webViewDistFromBottom.constant=viewDistance;
    mapViewDistFromTopDefault=viewDistance;
    mapViewDistFromTop.constant=viewDistance;

}
else {
    [detailMapView removeFromSuperview];
    webViewDistFromBottomDefault=0;
    webViewDistFromBottom.constant=0;
    mapViewDistFromTopDefault=viewDistance;
    mapViewDistFromTop.constant=viewDistance;
}

[detailMapView setNeedsUpdateConstraints];
[UIView animateWithDuration:0.25f animations:^{
    [self.detailMapView layoutIfNeeded];
}];

}

After the MKMapView is removed, the NSLayoutAttributeBottom attribute of UIWebview is set to 0, and it fills the entire screen. Once there is actual data to show in the map, the MKMapView is then added, and the UIWebView repositioned, along with the necessary constraints, in my displayMapView function:

- (void)displayMapView
{
double dblLatitude;
double dblLongitude;


[detailMapView setTranslatesAutoresizingMaskIntoConstraints:NO];
if ([self isMapViewDisplayed]==FALSE) {

    [detailView addSubview:detailMapView];

    NSLayoutConstraint *myConstraint =[NSLayoutConstraint
                                       constraintWithItem:detailMapView
                                       attribute:NSLayoutAttributeTop
                                       relatedBy:NSLayoutRelationEqual
                                       toItem:detailView
                                       attribute:NSLayoutAttributeTop
                                       multiplier:1.0
                                       constant:mapViewDistFromTopDefault];

    [detailView addConstraint:myConstraint];

    //mapViewDistFromTop.constant = mapViewDistFromTopDefault;

    myConstraint =[NSLayoutConstraint
                   constraintWithItem:detailMapView
                   attribute:NSLayoutAttributeBottom
                   relatedBy:NSLayoutRelationEqual
                   toItem:detailView
                   attribute:NSLayoutAttributeBottom
                   multiplier:1.0
                   constant:0];

    [detailView addConstraint:myConstraint];

    myConstraint =[NSLayoutConstraint
                   constraintWithItem:detailMapView
                   attribute:NSLayoutAttributeLeading
                   relatedBy:NSLayoutRelationEqual
                   toItem:detailView
                   attribute:NSLayoutAttributeLeading
                   multiplier:1.0
                   constant:0];

    [detailView addConstraint:myConstraint];

    myConstraint =[NSLayoutConstraint
                   constraintWithItem:detailMapView
                   attribute:NSLayoutAttributeTrailing
                   relatedBy:NSLayoutRelationEqual
                   toItem:detailView
                   attribute:NSLayoutAttributeTrailing
                   multiplier:1.0
                   constant:0];

    [detailView addConstraint:myConstraint];
    [detailMapView setNeedsUpdateConstraints];

}
[UIView animateWithDuration:.5
                 animations:^{
                     webViewDistFromBottom.constant=webViewDistFromBottomDefault;
                     mapViewDistFromTop.constant=mapViewDistFromTopDefault;
                     [self.directoryWebView layoutIfNeeded];
                     [self.detailMapView layoutIfNeeded];
                 }];

[self updateDetailViews];

...

if ((dblLatitude != 0) && (dblLongitude != 0)) {
    zoomLocation.latitude = dblLatitude;
    zoomLocation.longitude = dblLongitude;

    MKCoordinateRegion viewRegion = MKCoordinateRegionMakeWithDistance(zoomLocation, METERS_PER_MILE, METERS_PER_MILE);
    MKCoordinateRegion adjustedRegion = [detailMapView regionThatFits:viewRegion];
    [detailMapView setRegion:adjustedRegion animated:YES];
}
CLLocationCoordinate2D coordinate;
coordinate.latitude = dblLatitude;
coordinate.longitude = dblLongitude;

...

[detailMapView addAnnotation:annotation];
}

All of this works like I intend. The problem occurs when the device is rotated. If I start with the iPad in portrait mode, the webViewDistFromBottom and mapViewDistFromTop constraints are set to 490, due to the updateDetailViews function above which has the following calculations:

displayHeight = self.maximumUsableFrame.size.height;
viewDistance=displayHeight/2+centerMapButton.frame.size.height/2+16;

If the iPad is rotated to landscape, the willAnimateRotationToInterfaceOrientation function is called, which then calls updateDetailViews, which sets viewDistance to 367 (and correspondingly webViewDistFromBottom.constant and mapViewDistFromTop.constant). The UIWebView on top looks as it should, however, the MKMapView on bottom does not. The mapViewDistFromTop constraint is set to 367 (if I output the value to the log), however it appears that it is still set to 490. My updateDetailViews function calls [self.view layoutIfNeeded] (and I have also tried [detailMapView layoutIfNeeded], [detailMapView setNeedsLayout]), but that view does not show up correctly. The distance from the top is too large. If I rotate the iPad back to portrait, it looks fine.

I also have the same problem if the iPad is started in landscape mode, then rotated to portrait. In landscape mode, the mapViewDistFromTop and webViewDistFromBottom values are 367, and are set to 490 once rotated to portrait. However, the MKMapView on the bottom looks as those the distance from the top is still 367, covering too much of the display.

Any idea what I'm doing wrong? Thanks in advance for any assistance!!!

Answer 1

If I understand the question correctly, when in portrait you want a map view, 480 points tall, at the bottom, and if in landscape, you want the web view to take up the whole screen. An alternative approach would be to just modify the height of the map view (480 in portrait, 0 in landscape). Don't remove the map view, just set its height to 0. And let the existing constraints take care of everything else. Then there are no adding of modifying of constraints, views, etc. All you need to do is adjust one constant on rotation. Does that do the job?

To illustrate this, in this scenario I'm suggesting you set up your constraints (I'll only focus on the vertical constraints) so that they are equivalent to

V:|[webView][mapView(480)]|

(I'm not suggesting you use VFL to specify the constraints, but it's just the most concise way to articulate the series of constraints I used.) Note, make sure you don't have any extraneous constraints floating around (eg web view bottom constraint to super view, etc.). I'm proposing, in the vertical dimension, just these constraints (web view top to super view, web view bottom to map view top, map view height, and map view bottom to super view).

Then, define and link an outlet for the height constraint of the mapView :

@property (weak, nonatomic) IBOutlet NSLayoutConstraint *mapViewHeightConstraint;

Finally, on rotation, just change the constant for that constraint:

- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
    [super willRotateToInterfaceOrientation:toInterfaceOrientation duration:duration];

    if (UIInterfaceOrientationIsPortrait(toInterfaceOrientation))
        self.mapViewHeightConstraint.constant = 480.0;
    else
        self.mapViewHeightConstraint.constant = 0.0;
}

If I understand the UI you're shooting for, I think that's all you need, eliminating all of that other code in your question. I just tested it and it seems to work fine.