CODEWITHSUNDEEP
iosinterface-builderalignmentautolayout
Mabzy
Mabzy

Reputation: 25

Arranging UIButtons evenly on 3.5” and 4” display

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.

Upvotes: 1

Views: 447

Answers (1)

rdelmar
rdelmar

Reputation: 104082

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.

Upvotes: 1

Related Questions