Auto Layout is driving me bonkers

Hello. After first placing several controls (text areas, text field, and separator) onto a view and running in simulator, I found out the hard way that just plopping them in isn’t enough. So I spent much of yesterday and today fixing all the auto layout properties on each control as they should appear.

Here’s a glimpse of the controls in order going down (just giving the top coordinates):
textfield - toplayoutguide.bottom + standard gap
textarea1 - textfield.bottom + standard gap
separator - textarea1.bottom + standard gap (this one also seems to have a bottom coord of textarea2.top - standard gap. when I remove this coord, everything shifts up in the layout)
textarea2 - parent.top + 195 (when I try to change to separator.bottom + standard gap, again everything shifts upward in the layout)

As with the coordinates above, it all looks correct in the layout, however when run in simulator, there is a large gap between the bottom of textarea1 and the separator. Textarea2 looks to be ok under the separator. Only tried this on iPhone 4s sim, not other iPhones or iPad.

Does anyone have any advice? I’m also not sure what the Priority should be set at in the auto layout properties. Some set to manual and others to auto. Would any of this make a difference?

[quote=157829:@Ryan Hartz]Hello. After first placing several controls (text areas, text field, and separator) onto a view and running in simulator, I found out the hard way that just plopping them in isn’t enough. So I spent much of yesterday and today fixing all the auto layout properties on each control as they should appear.

Here’s a glimpse of the controls in order going down (just giving the top coordinates):
textfield - toplayoutguide.bottom + standard gap
textarea1 - textfield.bottom + standard gap
separator - textarea1.bottom + standard gap (this one also seems to have a bottom coord of textarea2.top - standard gap. when I remove this coord, everything shifts up in the layout)
textarea2 - parent.top + 195 (when I try to change to separator.bottom + standard gap, again everything shifts upward in the layout)

As with the coordinates above, it all looks correct in the layout, however when run in simulator, there is a large gap between the bottom of textarea1 and the separator. Textarea2 looks to be ok under the separator. Only tried this on iPhone 4s sim, not other iPhones or iPad.

Does anyone have any advice? I’m also not sure what the Priority should be set at in the auto layout properties. Some set to manual and others to auto. Would any of this make a difference?[/quote]

If this is your first encounter with Auto Layout, you may want to start “the old way” by setting controls relative to parent left and top. It will be equivalent to locking top and left as well.

You may want to think of toplayoutguide.bottom as screen(0).availableTop. It is probably better than parent.top.

Then start making controls relative to each other. It is relatively easy to decide for instance that a button is 30 px away from the bottom of a TextArea. Etc, etc.

If you proceed slowly, you should see it feel gently into place. Then rotate the simulator and see how you would like horizontal relationship to work.

Like Michel said, start off slow. Once you get used to it then start mucking around with it. Seriously, I did 5 1/2 hours of training video and started on a couple of projects (which means maybe 80 hours worth of iOS work) and I feel that I’m just starting to get my head around AutoLayout. Even then, I’m not sure I have it all figured out.

AutoLayout is…weird…after coming from 15 years of Xojo lock top/left/right/bottom experience.

Thank you both for your replies. I ended up scrapping everything on the view and adding in again, this time being more careful with what I add first and using the layout editor a little better. All seems good when trying on iPhone and iPad simulators.

I didn’t test using landscape. I only will be using this in portrait view. Is that the default, or will I need to make a change somewhere saying portrait only?

[quote=157878:@Ryan Hartz]Thank you both for your replies. I ended up scrapping everything on the view and adding in again, this time being more careful with what I add first and using the layout editor a little better. All seems good when trying on iPhone and iPad simulators.

I didn’t test using landscape. I only will be using this in portrait view. Is that the default, or will I need to make a change somewhere saying portrait only?[/quote]

You can switch off landscape orientation in the iPhoneScreen inspector.

Great! Thanks!

Is there any “detailed” documentation on how XOJO implements and how the developer should interact with AutoLayout that goes beyond the 3/4 of a page that I found in “Getting Started”???

and while we are at it… AutoLayout for FONTSIZE? A bigger or smaller button for example will need a bigger or smaller font