Arrange horizontal space between items in a bar using autolayout

Question

I'm currently has a View like this, how can I setup the constraint to display the items equally like the Iphone 7 review in all size of screen?. I've tried so many constraint including stackView but no use. Thank you very much and have good day ahead.

I've tried, but its seem not good. the Done button still missing apart and i also wanna know another solutions. — Duy Khanh Nguyen, Jul 19 '17 at 09:54
@DuyKhanhNguyen you need bottom icons to be equally aligned?Try giving equal width and height constraint if they have one else better option stack view. — Tushar Sharma, Jul 19 '17 at 09:56
What constraints have you set up? Are these in a UIToolbar or just 5 UIButtons in a containing view? — Paulw11, Jul 19 '17 at 10:01
Refer :https://stackoverflow.com/questions/32862142/how-to-add-equal-spacing-and-equal-width-for-button-in-ios-auto-layout — Piyush, Jul 19 '17 at 10:02
Actually i'm not setting any constraint, after tried various ways — Duy Khanh Nguyen, Jul 19 '17 at 10:15
If you don't want to use a stack view then you will either need to use spacer `UIView`s between each button (You can do this in interface builder) or use a `UILayoutGuide` (You can only do this programatically). — Paulw11, Jul 19 '17 at 10:36

Cristina · Answer 1 · 2017-07-19T10:05:55.533

You can use five view in the black view:

Constraint for first view:

leading space to superview : 0
Bottom and top space to superview : 0
trailing space to second view : 0

Constraint for second, third and fourth view:

leading space to left view : 0
Bottom and top space to superview : 0
trailing space to right view : 0
equal with and equal height with first view

Constraint for last(5th) view:

leading space to left view (4th) : 0
Bottom and top space to superview : 0
trailing space to superview : 0
equal with and equal height with first view

Then insert your button or element in these view with their constraint (eg. horizontal center / vertical center)

meaning-matters · Answer 2 · 2017-07-19T10:06:45.903

Use a UIToolbar which features a UIBarButtonSystemItemFlexibleSpace item that you can place in between your 5 regular items.

In Obj-C code you'd do something like:

- (void)viewDidLoad
{
    [super viewDidLoad];

    [self.navigationController setToolbarHidden:NO];

    UIBarButtonItem* spaceItem1 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace
                                                                                target:self
                                                                                action:nil];

    ... create other items ...

    self.toolbarItems = @[ item1, spaceItem1, item2, spaceItem2, ... ];

    ...
}

Arrange horizontal space between items in a bar using autolayout

2 Answers2