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:

enter image description here

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

enter image description here

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:

enter image description here

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

enter image description here

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.

Look around stackoverflow for autolayout spacing suggestions. I'm not finding the right one right off the bat right now. The gist of it is to use dummy views between individual and set the sizing of the dummy views to be equal. There's also an Apple example of the technique somewhere. — David Berry, Mar 14 '14 at 19:46
I also suggest to ditch auto layout. You'll fight it to death, and never win. I went through the same battles with an app of mine that needed to be portrait and landscape. I had to programmatically change the frames in willRotateToInterfaceOrientation (and viewDidLayoutSubviews), just like you mentioned. More code to write, but much better than all the warnings auto layout will throw at you. — klcjr89, Mar 15 '14 at 04:17

score 1 · Answer 1 · answered Jul 02 '16 at 13:29

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:

Set constraints to define the vertical space between each element (so you don't need the dummy views).
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.

score 0 · Answer 2 · answered Mar 14 '14 at 19:58

0

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

enter image description here

answered Mar 14 '14 at 19:58

David Berry

40,941
12
84
95

In this case you're also going to run into the problem that all your elements won't fit vertically on a landscape screen. – David Berry Mar 14 '14 at 20:09

score 0 · Accepted Answer · answered Mar 19 '14 at 16:42

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];
    }
}

XCode iPhone how to handle vertical alignment of UI elements

3 Answers3