Percentage iOS mockup

Question

I am trying to replicate the layout that I have in an Android application, but I don’t know how to do it in iOS, especially because of the height of the iPhone 5.

I know how to explain this in terms of “Android,” but I have been trying to do this in iOS over the past few days, but I can't get it to work.

The best way to explain this:

• I want two layouts. The top layout should occupy 40%, and the bottom should occupy 60%.
• In the top layout, they should be three buttons that fill all possible space (essentially 1/3 of the space).
• In the bottom layout, I want an imageView, and then a textView on top of this.

This is a paint layout. Can this be done in iOS? I find layouts a lot harder to create than android.

Answer 1

Using Xcode 6.0, you can now specify the proportional width or height in Interface Builder. Steps for percentage growth from the supervisor:

If both the child view and its supervisor are selected, add a "equal height" constraint (or "equal width" if you want to have a proportional width).

Then change the “multiplier” of the constraint you just added to the desired proportion. For example, change it to 50% by 2.

If you want to specify the internal view as a percentage of the supervisor, you can undo the elements in the restriction:

Now you can use the factor of 0.5 (or any other proportion you need):

In your particular case, you can define a constraint of equal height between two child views and change the factor to 1.5 (the lower size is 1.5 to the top) or 0.6667 if the elements are canceled.

Answer 2

Contrary to other answers, I think you should at least consider the automatic layout system. It was created to make it easier to create predictable layouts like the one you described. Autolayout is controlled by the constraints that you impose on the views in the layout. You can create these restrictions visually or programmatically. Visually, your first view will look something like this:

The blue lines that you see contain a number of restrictions that indicate the interval between the buttons, the space around the buttons and the height and width of the buttons. You can see a couple of restrictions that have = on them - I selected all three buttons and gave them a restriction of equal height.

Here is a good visual format syntax that lets you describe constraints as strings. Take a moment to look at the linked document - you won’t need much more time to find out that you can read the lines. For example, your top layout can be specified as follows:

 V:[button1]-[button2(==button1)]-[button3(==button1)] 

In parentheses ==button1 indicates that the layout system makes button2 and button3 the same height as button1 . - indicates that a standard interval should be used between the buttons; you can specify a different interval if you want. For a 10-point interval, do the following:

 V:|-10-[button1]-10-[button2(==button1)]-10-[button3(==button1)]-10-| 

Once you have such a string, you can turn it into a constraint using the method: +[NSLayoutConstraint constraintsWithVisualFormat:options:metrics:views:]

Some restrictions cannot be indicated either visually or by the lines described above. Chief among them are those where you want to establish a constant (but unequal) relationship between the two views, as with your top and bottom layouts. You want one of them to occupy 40% of the available vertical space, and the other 60%. Do this using the method: +[NSLayoutConstraint constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:] . For example:

 NSLayoutConstraint *c = [NSLayoutConstraint constraintWithItem:bottomView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:topView multiplier:1.5 constant:0]; 

This gives you a constraint that sets the height of the bottomView to 1.5 times the height of the topView (this is what you want, since 60/40 = 1.5).

If you create constraints programmatically, you can add them to the corresponding view when creating (or loading) a hierarchy of views. Your color management method -viewDidLoad is a great place to do this.

Answer 3

I do not know about using autolayout, since I do not use it, but in the code without it you can create two UIViews and set their frames to:

 CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height * 0.4f); CGRectMake(0, self.view.frame.size.height * 0.4f, self.view.frame.size.width, self.view.frame.size.width * 0.6f); 

And then in the top view you can add buttons with frames (provided that the view is called view1 ):

 CGRectmake(0, 0, self.view.frame.size.width, view1.frame.size.height * (1.0f/3.0f)); CGRectmake(0, view1.frame.size.height * (1.0f/3.0f), self.view.frame.size.width, view1.frame.size.height * (1.0f/3.0f)); CGRectmake(0, view1.frame.size.height * (2.0f/3.0f), self.view.frame.size.width, view1.frame.size.height * (1.0f/3.0f)); 

Answer 4

You need to add a few restrictions to make it work. So, here is a brief description of what you need:

• You will need horizontal restrictions. One, if for the top view, because it has zero distance to the top. Another view from below, because its distance to the bottom is zero. Another limitation between the two representations, since they also have a zero interval between them.

• The same principle will apply to buttons inside the top view. Place your buttons with the correct size inside the top view and add similar restrictions, but now you have three elements (instead of two). Thus, the restrictions for the zero interval in the upper, lower and between the buttons.

When you add components to your view, this will create several limitations for you. Adding one top and the other below, he will create as an interval between the vertices and between them. To edit them, just go to the inspector, the fifth tab (ruler), and you will see a list of restrictions. Finally, you can try using the restrictions menu (I don’t know if there is a known name there). It is located in the lower right corner of the Interface Builder canvas. See Image:

Please let me know if you need further assistance.

Answer 5

This can be done automatically when using storyboards (you may need to change a parameter or two here and there). When you create your GUI, you can switch between screen sizes (3.5 and 4 inches) to make sure it looks good on both. See the answer to this question .

You can also see this tutorial . This should give you an idea of ​​how to work with GUI layouts.