How to mimic iOS Mail app's autolayout changes during rotations?

Question

I would like to mimic the behavior of the iOS Mail app in regard to the left pane for sifting through mails with the use of a tableview, and the right pane which previews the mail for easier reading.

I notice that in landscape mode, the tableview with the mail items on the left side is present. But when the user switches to portrait mode, the left pane disappears completely, and the reading pane on the right expands smoothly to take up the extra space.

When the user reverts back to landscape mode, the left pane reappears again, and everything is restored to normal.

I'm trying to do the same with the code below:

-(void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{

    UIToolbar *toolbar = self.toolbar;
    UITableView *tableView = self.tableView;
    UIWebView *webView = self.webView;

    if (UIInterfaceOrientationIsPortrait(toInterfaceOrientation)) {
        [self.toolbar setHidden:YES];
        [self.tableView setHidden:YES];

        [self.view removeConstraint:self.equalWidthsToolbarWebviewConstraint];

        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|-[webView]-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(webView)]];
    } else if (UIInterfaceOrientationIsLandscape(toInterfaceOrientation)) {
        [self.toolbar setHidden:NO];
        [self.tableView setHidden:NO];



        //TODO: Set up views to have equal widths
        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"[toolbar][webView(==toolbar)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(toolbar,webView)]];

    }
}

When I put the iPad in portrait mode from landscape, the left pane views disappear, and the right pane eventually expands. But when I bring it back to landscape, the left and right panes don't go back to the layout they once had.

This is what I got in the debugger:

2014-11-17 15:16:02.721 Citta Streams iOS[2366:17353693] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
    "<NSLayoutConstraint:0x7c971df0 UITableView:0x7c1b8800.leading == UIToolbar:0x7c976f90.leading>",
    "<NSLayoutConstraint:0x7c971e50 H:|-(0)-[UITableView:0x7c1b8800]   (Names: '|':UIView:0x7c971780 )>",
    "<NSLayoutConstraint:0x7c971eb0 H:[UIWebView:0x7c9f91a0]-(0)-|   (Names: '|':UIView:0x7c971780 )>",
    "<NSLayoutConstraint:0x7caa58f0 'UIView-Encapsulated-Layout-Width' H:[UIView:0x7c971780(768)]>",
    "<NSLayoutConstraint:0x7c9e06b0 UIWebView:0x7c9f91a0.leading == UIView:0x7c971780.leadingMargin>",
    "<NSLayoutConstraint:0x7b6c41a0 H:[UIToolbar:0x7c976f90]-(0)-[UIWebView:0x7c9f91a0]>",
    "<NSLayoutConstraint:0x7b6c6150 UIWebView:0x7c9f91a0.width == UIToolbar:0x7c976f90.width>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x7b6c41a0 H:[UIToolbar:0x7c976f90]-(0)-[UIWebView:0x7c9f91a0]>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.

score 1 · Accepted Answer · answered Nov 17 '14 at 20:21

1

Don't waste your time replicating this with standard UI components - apple has this functionality built into UISplitViewController:

https://developer.apple.com/library/ios/documentation/uikit/reference/uisplitviewcontroller_class/index.html

answered Nov 17 '14 at 20:21

Adam Jenkins

51,445
11
72
100

So, you mean all this time I've spent trying to finagle tableview and uiwebview side by side with autolayout has been in vain? – NYC Tech Engineer Nov 17 '14 at 21:11
I notice that UISplitViewController has to be the root view controller. That seems a bit inflexible considering that I have preceding views like a login and such. Is it even possible to have more than one UISplitViewController? – NYC Tech Engineer Nov 18 '14 at 16:05
You can call `[window setRootViewController:]` at any time (as long as you have a reference to `window` - so why is it inflexible? You could always add a control to the detailView tab bar to perform some action that would set a different `rootViewController` – Adam Jenkins Nov 18 '14 at 16:16
so, if I have a login view, as I modally segue to the split view controller, I have to set the it as the rootViewController right then and there? – NYC Tech Engineer Nov 20 '14 at 20:17
Hey, I finally got what you meant. I set it as rootVC, and it magically appears from the login page, cool. But, is there a way to perform that transition with an animation so it's not that jarring? – NYC Tech Engineer Nov 21 '14 at 05:45
1

@NYCTechEngineer - SO to the rescue: http://stackoverflow.com/questions/8053832/rootviewcontroller-animation-transition-initial-orientation-is-wrong – Adam Jenkins Nov 21 '14 at 13:04
Thanks man, I swear, I did try looking for the answer and tried out a few things, but the one you gave me worked out great. – NYC Tech Engineer Nov 21 '14 at 15:29
1

@NYCTechEngineer - no worries, I found a quite a few bad answers on SO before I came to that one – Adam Jenkins Nov 21 '14 at 15:36

How to mimic iOS Mail app's autolayout changes during rotations?

1 Answers1