Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iOS Auto Layout: Equal Spaces to Fit Superviews Width [duplicate]

Possible Duplicate:
Autolayout Even Spacing

I'm trying to create a scrollable bar with buttons (similar to a UISegmentedControl). The superview is an UIScrollView. As soon as the buttons don't fit into the scrollview, the scrollview should be scrollable. So far, almost everything works fine:

With a lot of buttons (scrolled to the right):

Scrolled View

Not so many buttons:

View is not scrolling

Now, my goal is that if there is room for all buttons, they should be equally spread across the whole 320px view. How can I define constrains for the spaces in between the buttons?

Right now, I'm using the following constraints (self is a UIScrollView):

UIView *firstButton = self.buttons[0];

[self.buttonConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"|-(5)-[firstButton]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(firstButton)]];

UIView *lastButton = [self.buttons lastObject];

[self.buttonConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"[lastButton]-(5)-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(lastButton)]];

UIView *previousView = nil;

for (UIView *view in self.buttons) {
    if (previousView) {
        [self.buttonConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"[previousView]-(5)-[view]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(previousView, view)]];
    }
    previousView = view;
}

If I change the type of the superview from UIScrollView to an UIView, I get the following result, still not what I want, but at least it looks for the constraint of the last button that ties it to the right edge (makes sense, that this doesn't happen for the scrollview, as the content size is automatically set):

UIView as the superview

Any ideas?

like image 350
denbec Avatar asked Dec 03 '12 09:12

denbec


1 Answers

- (void) viewWillLayoutSubviews {
    // UIButton *button1, *button2, *button3, *button 4 ;
    // NSMutableArray *constraintsForButtons ;

    float unusedHorizontalSpace = self.view.bounds.size.width - button1.intrinsicContentSize.width - button2.intrinsicContentSize.width - button3.intrinsicContentSize.width - button4.intrinsicContentSize.width ;
    NSNumber* spaceBetweenEachButton=  [NSNumber numberWithFloat: unusedHorizontalSpace / 5 ] ;

    [self.view removeConstraints:constraintsForButtons] ;
    [constraintsForButtons removeAllObjects] ;
    [constraintsForButtons addObjectsFromArray: [NSLayoutConstraint constraintsWithVisualFormat: @"H:|-(space)-[button1]-(space)-[button2]-(space)-[button3]-(space)-[button4]-(space)-|"
                                                                                        options: NSLayoutFormatAlignAllCenterY
                                                                                        metrics: @{@"space":spaceBetweenEachButton}
                                                                                          views: NSDictionaryOfVariableBindings(button1,button2,button3,button4) ] ] ;
    [constraintsForButtons addObjectsFromArray: [NSLayoutConstraint constraintsWithVisualFormat: @"V:|[button1]"
                                                                                        options: 0
                                                                                        metrics: nil
                                                                                          views: NSDictionaryOfVariableBindings(button1) ] ] ;
    [self.view addConstraints:constraintsForButtons] ;
}

This isn't as pretty as yours, and it assumes there are 4 buttons, but it equally spaces them. That is, the empty spaces between the buttons all have the same width. This does not mean that the distance between the NSLayoutAttributeLeading of button1 and button2 is the same as the distance between button2 & button3's.

portraitlandscape

like image 92
John Sauer Avatar answered Nov 06 '22 15:11

John Sauer