2

I have four buttons inside a view container. I want to have the space between the buttons automatically resized equally depending on the device's screen size.

The view container is constrained as follows:

  • Horizontal and Vertical to Superview
  • Equal With to Superview
  • Leading and Trailing Space to Superview

Then I constrained each button with:

  • Equal With and Height
  • Vertical Space to the view container.

After this point whatever combination I try I can't get the buttons have equal space between them. I tried giving them Horizontal Spacing Constrain but that didn't do the trick. Attached is the effect I would like to create. Can anyone please explain how to accomplish this?

Equally distribute space

u54r
  • 1,657
  • 2
  • 15
  • 26
  • http://stackoverflow.com/questions/18706444/simplest-way-to-evenly-distribute-uibuttons-horizontally-across-width-of-view-co – Gallymon Dec 05 '14 at 06:23

3 Answers3

0

Place empty UIViews between the buttons and give them the following constraints:

  • Leading and trailing space to the adjacent buttons to 0

  • Equal widths

  • Width >= 0

  • Some height constraint

That should do the trick

zisoft
  • 21,200
  • 10
  • 56
  • 72
  • Apple describes it at https://developer.apple.com/library/ios/documentation/userexperience/Conceptual/AutolayoutPG/AutoLayoutbyExample/AutoLayoutbyExample.html search for "Creating Equal Spacing Between Views" – mhunturk Dec 05 '14 at 10:03
0

The simplest way to create such UIButtons with equally divided width is as follows:

Create 6 UIButtons like this:

UIButton *button1 = [UIButton buttonWithType:UIButtonTypeSystem];
button1.translatesAutoresizingMaskIntoConstraints = NO;
[button1 setTitle:@"Btn1" forState:UIControlStateNormal];

... do that 6 times for 6 buttons, however you like then add them to the view:

[self.view addSubview:button1];
[self.view addSubview:button2];
[self.view addSubview:button3];
[self.view addSubview:button4];
[self.view addSubview:button5];
[self.view addSubview:button6];

Fix one button to the bottom of your UIView:

Then,

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:button1 attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:0]];

Then tell all the buttons to be equal width and spread out equally across the width:

NSDictionary *views = NSDictionaryOfVariableBindings(button1, button2, button3, button4, button5, button6);

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[button1][button2(==button1)][button3(==button1)][button4(==button1)][button5(==button1)][button6(==button1)]|" options:NSLayoutFormatAlignAllBottom metrics:nil views:views]];

All the best...

Kanan Vora
  • 230
  • 1
  • 9
  • I have changed the attribute to NSLayoutAttributeTop, now u can check the code, u ll be able to see all the buttons at the top of the UIView – Kanan Vora Dec 05 '14 at 06:32
  • This is not exactly what he asked. That way the buttons will take up all the horizontal space, right? there won't be any blank space between each button. – Gil Sand Oct 31 '15 at 11:02
0

Please refer this link:

Evenly space multiple views within a container view

I think its work for you.

Community
  • 1
  • 1
Ketan
  • 21
  • 4