XCode iPhone how to handle vertical alignment of UI elements

Question

I'm using XCode 5 developing for iOS 7 for an iPhone app. I just started testing on an actual device and right away I noticed the landscape view for every view is not how I want it. Many elements are being hidden.

My view in portrait view:

Ok, that's great, but then this is what it's like in landscape view:

Well that looks awful. So I got everything working how I want horizontally using trailing space to container and leading space to container like so:

Ok, cool. Now the landscape view looks like this:

Ok, I'm getting warmer. Now I can't figure out for the life of me how to set up everything vertically how I want it. Basically I need everything to have an even amount of vertical distance between each UI element starting below the Log Out button and ending at the bottom constraint. How can I do this?

Edit:

At this point, I'm looking into doing this programmatically. With willRotateToInterfaceOrientation and some simple geometry I think I can figure it out.

Answer 1

I ended up using viewDidLayoutSubviews. Then I used setFrame for each UI element to programmatically set the location of each element.

For others with this issue here is what your code might look like:

-(void)viewDidLayoutSubviews
{
    [super viewDidLayoutSubviews];

    CGSize size = [UIScreen mainScreen].bounds.size;
    UIApplication *app = [UIApplication sharedApplication];
    UIInterfaceOrientation orientation = [app statusBarOrientation];

    if (UIInterfaceOrientationIsLandscape(orientation)) size = CGSizeMake(size.height, size.width);
    if (!app.statusBarHidden) size.height -= MIN(app.statusBarFrame.size.width, app.statusBarFrame.size.height);

    if (UIInterfaceOrientationIsLandscape(orientation))
    {
        // code to handle UI elements in landscape view here
        // x and y can be anything from 0 to size.height for y and size.width for x

        // example:

        CGRect logOutFrame = [self logOutButton].frame;
        logOutFrame.origin.y = 10;
        logOutFrame.origin.x = 20;
        logOutFrame.size.width = 80;
        logOutFrame.size.height = 30;            

        [[self logOutButton] setFrame:logOutFrame];
    }
}

Answer 2

I know this is an old thread, so I'm just updating the answer in case someone stumles upon this discussion looking for an easy way to stack items vertically, like I did. Luckily, this is much easier to do now in XCode 7.

You can either:

1. Set constraints to define the vertical space between each element (so you don't need the dummy views).

2. Use a stack view to collect all the elements. A stack view makes it simple to keep the same vertical space between each element, if that is what you are after.

Answer 3

As noted above, the key is to use dummy views with equal spacing. The selected views here are an example.