Arranging UIButtons evenly on 3.5” and 4” display

Question

I have now used a lot of time figuring out - auto layout and how to use it, but haven't found an answer on how to solve this issue.

My issue is that I want to align e.g. 5 vertically placed UIButtons evenly on both iPhone 5 and prior displays, but is there a way to do it with the Interface Builder or is it something which should be done in code. When I want the vertical distance between the buttons to be evenly versus the screen resolution (3.5” and 4” display).

I have tried adding vertical constraints between the buttons, but this only adds a gap in the top or bottom of the layout if 4” display is selected.

I'm of course missing something simple, but can't figure it out.

This may help just one of the ways you could do it http://stackoverflow.com/questions/13287047/naming-convention-for-iphone-5-images/13287481#13287481 — Popeye, Feb 24 '13 at 18:26
@Popeye In what way does that answer address how to layout a set of buttons properly based on the current screen size? — rmaddy, Feb 24 '13 at 18:30
@rmaddy this is why I didn't put it as an answer cause it is only half way there. Would have hoped they could figure the rest out by there self. But if you want me to detail it for you. The link provide shows how to obtain the screen size based on that you can than layout in the code where you want the buttons to be on the screen. I am not a fan of the auto layout as it never works the way you want it to so I would normally advice to do the layout for each individually until it works correctly. — Popeye, Feb 24 '13 at 18:34
@Popeye that makes sense would it not be best to put this as an answer with what you have put in comments. — Popeye, Feb 24 '13 at 18:37
@Popeye OK, when I looked at the question/answer, it talks about image naming conventions. I didn't realize your focus was on getting the screen size. There are so many better example questions/answers related to getting the screen size. But getting the screen size is not at all the proper way to layout buttons. The layout should be based on the frame size of the view controller's view. So none of the code in the answer you referenced is relevant to answering this question. — rmaddy, Feb 24 '13 at 18:51
@rmaddy fair enough was only suggesting this is why I didn't add as answer as I know its not the best/most elegant way I just don't like the auto layout function and was offering an alternative. Thanks for your opinion, everything helps even if its just finding out the way not to do it. — Popeye, Feb 24 '13 at 18:57
@rmaddy what do you suggestions to do the? Can you refer to some example :) — Mabzy, Feb 24 '13 at 20:19

score 1 · Accepted Answer · answered Feb 24 '13 at 19:34

The only way I've gotten this to work is by putting labels (with no titles, so they're invisible) between the edges and between the buttons, so that the buttons and labels take up all the vertical space on the screen. The buttons have an intrinsic size, but the labels don't, so they expand or contract to fill the space correctly.

-(void)viewDidLoad {
    [super viewDidLoad];

    NSMutableDictionary *viewsDict = [NSMutableDictionary dictionary];
    NSArray *titles = @[@"Button 1",@"Button 2",@"Button 3",@"Button 4",@"Button 5"];
    for (int i=1; i<6; i++) {
        UIButton *b = [UIButton buttonWithType:1];
        [b setTitle:titles[i-1] forState:UIControlStateNormal];
        [b setTranslatesAutoresizingMaskIntoConstraints:NO];
        [viewsDict setObject:b forKey:[NSString stringWithFormat:@"b%d",i]];
    }

    for (int i=1; i<7; i++) { // labels for spacing
        UILabel *l = [[UILabel alloc ]init];
        [l setTranslatesAutoresizingMaskIntoConstraints:NO];
        [viewsDict setObject:l forKey:[NSString stringWithFormat:@"l%d",i]];
    }

    for (id obj in viewsDict.allKeys) 
        [self.view addSubview:viewsDict[obj]];

    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[l1][b1][l2(==l1)][b2][l3(==l1)][b3][l4(==l1)][b4][l5(==l1)][b5][l6(==l1)]|"
                                                                   options:NSLayoutFormatAlignAllLeading
                                                                   metrics:nil
                                                                     views:viewsDict];


    NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:@"|-100-[b1]"
                                                                   options:NSLayoutFormatAlignAllLeading
                                                                   metrics:nil
                                                                  views:viewsDict];


    [self.view addConstraints:constraints];
    [self.view addConstraints:constraints2];
}

This aligns all the buttons 100 points from the left edge, with equal spacing between the buttons. This will adjust for screen size as well as rotation.

any idea how this might be done dynamically? like if you didn't know exactly which buttons you'd be showing? say if some condition made it so only button 1, 3 and 5 should be visible... — topwik, Jun 25 '13 at 22:33

Arranging UIButtons evenly on 3.5” and 4” display

1 Answers1