Resizable Modal Views in iOS iPad Apps

There are many circumstances where you want to present modal views in an iOS app. The one that confronted me was a Login form the first time a user opened the application (and technically, any time thereafter if she never successfully logged in).

AppDelegate

First, the context. When the application first launches, I check a BOOLean NSUserDefaults setting called USER_IDENTIFIED. If that is "NO", then I want to present a login form. The key here is to present the view and then update the frame of that controller's view's superview.

Partial Listing: RockCollectionAppDelegate.m

- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    ...

    BOOL isUserIdentified = [[NSUserDefaults standardUserDefaults] boolForKey:USER_IDENTIFIED];

    if (! isUserIdentified)
    {
        LoginFormController *loginFormController = [[LoginFormController alloc] init];
        [loginFormController setModalPresentationStyle:UIModalPresentationFormSheet];
        [[[self window] rootViewController] presentModalViewController:loginFormController animated:YES];

        loginFormController.view.superview.frame = CGRectMake(0,0,300,200);
        loginFormController.view.superview.center = self.window.center;
    }

    ...
}

That solves the problem. Instead of the default size for the form sheet (which can be overkill depending on what information and options you want to present), it will now be 300 px wide and 200 px high, centered in the iPad window.

Interface Builder

The next (slight) obstacle is that when you create a xib file in Interface Builder, your first impression is that you cannot resize the view. You go over to the Size Inspector and the width and height of the "Frame Rectangle" are not editable.

This is not a bug: By default, Interface Builder assumes that there will be a Status Bar in the view. That locks its size. So, to make the view resizable, you go to the Attributes Inspector and make sure that Status Bar under "Simulated Metrics" has "None" selected (by default, it will typically be "Black").

Now, you can return to the Size Inspector and change the width and height. This makes it much nicer for building the layout of your modal view.