How to adjust vertical spacing between controls according to display height.

I am developing an ios app. Everything is working fine.
Only The problem is when i run app on ios devices which are having larger display(in my case iphone X), all controls gets at the top part of the screen and about half bottom screen is left empty. i don’t have any issue in horizontal alignment.

Can anyone tell me how can adjust vertical spacing between the controls according to display height. and also font size according to display size ?

Hi,

I wouldn’t recommend increasing font size on larger screens. iPhone screens are made to have an almost identical text size on all screen sizes.

To increase vertical spacing based on display height, you can set the Auto-Layout relative to “Parent”, Edge set to “Vertical Center” and then adjust the scale / offset. (Scale can be greater than 100%)

In some cases you could also place all controls in a iOSContainerControl and place this container at the vertical center of the iOSView. This would center all controls vertically on all devices.

Could you post a screenshot of the layout so I might be able to give further recommendations?

Hi Jeremie,

Thanks for your reply.
i couldn’t post an image, i will try to use Auto-Layout properties and lets see how it works.

Let’s say you have five controls to distribute vertically.

You would anchor the topmost control’s top constraint anchor to the bottom of the parent’s top (or its ToplayoutGuide’s) bottom and the lowest’s bottom control to its parent’s bottom anchor (") top.

The middle one could get a VerticalCenter layout constraint set to its parent’s vertical center.

The second’s Verticalcenter can be set to its parent’s height, multiplied by 0.25 so it is placed in the middle between first and middle control.

And the fourth the same, now with a multiplier of 0.75.

Hello Ulrich,

Can you please elaborate how to set verticalcenter with multiplier of something.

Can we do that in xojo UI of Auto-layout or we need to set that in code.

You can do that both ways, but in most cases setting constraints in LayoutEditor will be easier and you have direct visual feedback.
As an example the 25% position:
When you put a control on a view, Xojo adds some constraints automatically. You should remove those not necessary and add other ones. Here is the example of the 25% position: