IOS: How to create a series of controls with the same percentage width

Question

can I make a line in the interface builder or with the code, for example, three buttons, each with an automatic width of 33%, filling in the entire horizontal viewing space?

I am interested in both automatic and traditional methods.

Answer 1

If you use auto-layout, you can define constraints so that (a) the three subspecies are the same width; (b) the first has an inscription leading upward; and (c) that the latter has the advantage of preparing for supervision. In a visual format language, this means that the layout

@"H:|[view1][view2(==view1)][view3(==view1)]|" 

If you do this in a non-auto-tuning mode, you simply define your frame for the three views so that their width is exactly 1/3, so the width of the surveillance and the corresponding x coordinates are respectively offset.

So the code might look like this:

 UIButton *button1 = [UIButton buttonWithType:UIButtonTypeRoundedRect]; [button1 setTitle:@"1" forState:UIControlStateNormal]; button1.translatesAutoresizingMaskIntoConstraints = NO; [self.view addSubview:button1]; UIButton *button2 = [UIButton buttonWithType:UIButtonTypeRoundedRect]; [button2 setTitle:@"2" forState:UIControlStateNormal]; button2.translatesAutoresizingMaskIntoConstraints = NO; [self.view addSubview:button2]; UIButton *button3 = [UIButton buttonWithType:UIButtonTypeRoundedRect]; [button3 setTitle:@"3" forState:UIControlStateNormal]; button3.translatesAutoresizingMaskIntoConstraints = NO; [self.view addSubview:button3]; NSDictionary *views = NSDictionaryOfVariableBindings(button1, button2, button3); [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[button1][button2(==button1)][button3(==button1)]|" options:0 metrics:0 views:views]]; [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[button1]" options:0 metrics:0 views:views]]; [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[button2]" options:0 metrics:0 views:views]]; [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[button3]" options:0 metrics:0 views:views]]; 

---

In Interface Builder (IB), you can add three buttons, where the first is locked on the left edge, the second on the first button, and the third on the second button:

Then you can select all three buttons and make their width the same:

Then you can select the third button and associate its trailing edge with the add-in:

And you manually set constant for this last constraint to zero:

And when you do, all three will be the same size, spanning the view. You can change the restrictions between the buttons if you want to get rid of these spaces. I have to admit, however, that IB in Xcode 4.6.3 is a bit fussy because it continues to add restrictions that it thinks makes it unambiguous by screwing them to the process, so sometimes it takes some fussy setup. The execution of this code is unambiguous. And I don’t think that I am violating the NDA to say that Xcode 5 is more elegant for this kind of thing.

-

By the way, in iOS 9 this interface can be better displayed using a "stack view". In Xcode 7, select the group of views that will be distributed horizontally, and then click the folded button, . Then specify the desired distribution for the stack view ("equal centering" or "even spacing" works well) and define the constraints for the correct size of the stack view (for example, upper / leading / end constraints).