Auto-layout is driving me crazy!

Targets iOS
1

Does anyone else thing that the auto-layout in IOS is way too flakey to rely on?

I get a view all laid out the way I want and then want to move one control to a new location and everything goes out of whack. That control may jump to the top of the screen or the auto-layout settings will change on their own.

In my opinion, it may be easier to not use the auto-layout settings at all and “code” the settings in your OPEN event.

Anyone else experiencing the same problem with auto-layout as me or having better luck with them?

2

I got to the point trying to get AL to work that I just gave up… so far the apps I have don’t have controls that move around, but they do need to be of course sized and located to fit the device. What Autolayout doesn’t seem to do is alter fontsize (unless you use the autofont, in which case you have zero control over what it chooses). So I took the hard road… and calculate or use “Select Case” to choose what I want. Is it more code? yes. Is it harder to “maintain”? yes. Is it more intuitve than AL? heck yes.

But don’t blame it all on XOJO… Xcode Interface Builder is even less intutive. I tried to build a simple form with 3 labels and a picture… everything centered left to right… with two labels at the top, one at the bottom, and the picture centered between the 2nd and 3rd label. Got the labels to work… if the picture appears it is totally in the wrong spot, or it doesn’t appear at all.

3

The “trick” to autolayout is to never drag any of the controls around once you add them to a view. Instead adjust their constraints manually so they are positioned relative to the proper controls and view boundaries. It might seem like a pain to do at first but once you make a view or two like this it makes a lot of sense and eliminates all of the problems you describe.

4

Yes, autolayout clearly needs a bit more preparation. At the start, I encountered similar problems like you describe, John, and I believe every Xojo iOS developer found himself cursing autolayout when suddenly and unexpectedly all his controls disappeared from the view. Instead, like Jason wrote, the trick is indeed to use the constraints from beginning on, maybe together with a sketch of more complicated views in which you note reference controls on which other controls rely on. I very much hope that the Xojo IDE will offer some kind of graphical feedback for autolayout in the future. There are a few iOS methods to check if your layout includes constraints bugs and make them visible. But for now, I found a rough draft for a view clearly helps. When you remember your key objects, you will be alert when moving them.

When you only rely on the internal logic, the constraint references will most probably be the result of wild guesses. So, like Jason said: Don’t rely on the automatic functions, but start with reference objects and assign the appropriate constraints right after adding the next control. That helps a lot and may even make autolayout become your friend!

5

[quote=194205:@John Fatte]Does anyone else thing that the auto-layout in IOS is way too flakey to rely on?

I get a view all laid out the way I want and then want to move one control to a new location and everything goes out of whack. That control may jump to the top of the screen or the auto-layout settings will change on their own.[/quote]

Auto Layout is here to help you but as anything computer, you got to teach the robot.

The layout editor tries to guess where you want to place the control, but instead of doing like the Desktop of Web one, it assumes a bit too much and ends up wrong.

Let us say you drag a canvas in the center of the screen, some 1/3 away from the top.

The constraints end up as

H.Center = Parent.CenterX Height = 200 Top = 70 Width = 200

Auto Layout did pretty much the same as what would have happened in Desktop, except the canvas is horizontally centered. If you rotate the device, it will be smack in the center no matter what.

For each control, look in the Inspector at the constraints. If what you want is ‘the old way’, then instead you can go

Left = Parent.Left*0%+70 Height = 200 Top = 70 Width = 200

That way you are sure the control will not jump on you. But if you rotate, no auto layout, the canvas will stay on the left of the screen.

Sometimes the layout editor gets it wrong, especially when there are several controls on the view. Let us say you place a button under the canvas.

Without anything, here is what happens :

H.Center = Parent.centerX Height = 30 Top = 343 Width = 100

That works fairly well in case of rotation to keep the button in the center, but on an iPHone 5, 343 is far too low and the button will be off screen.

Typical Auto Layout way is to make it relative not to the top, but to the bottom of the screen, change Top to

Top = Parent.Bottom-150

So when the device rotates, the button does not disappear.

The tricky part is to wrap your head around the fact that you can “hang” the control to the top and the left of the screen, but also to its bottom, to its left, or to another control. For instance :

Top = Canvas1.Bottom-+20

As you see, you can completely turn off Auto Layout as you wished by using constraints “the old way”, or take advantage of Auto Layout way of making a control relative to any other part of the view.

The IDE does its best to assume what you are after, but you must check all constraints carefully to avoid controls jumping around.

6

Without scrollable views the whole idea of auto-layout becomes ineffective. I have a button at the bottom of a splash screen that is not visible if they go from portrait to landscape and everything is “linked” using auto-layout. Great feature? I don’t think so.

7

One other question, is there a way to detect if a device is changed from portrait to landscape in real time so you can have different views for different orientations?

8

I am not sure I follow you. Auto Layout insures a better rendition when a view shape changes from Portrait to Landscape than the regular fixed properties. But as I tried to explain at length, these properties are still available. You do not have to use Auto Layout, although IMHO it would be a waste.

Though maybe for training purposes you can start with familiar left, top, width and height, until you feel comfortable enough with other constraints relative to other controls, or proportional.

A possibly overlooked feature of Auto Layout is the possibility to have the same view for different resolutions, a bit like RubberViews does for Desktop and Web. Instead of having to touch left and top, if you set them in proportions of Parent, the layout will accommodate all resolutions. Same thing for Width and Height. Used correctly, your controls will have the same place and relative size on iPhone 4 and iPhone 6, for instance.

Now like any feature, it is just as great as the skill of the user who employs it. If you make your button relative to the view bottom as I tried to explain in details in the post just before your post, it will not disappear.

The View Resized event tells you.

See the attached project for an example of view switching when the device rotates :
http://fontmenu.com/xojo/Buddha.zip

9

As others have said, the “trick” to using auto-layout is all in the drag. I have two tips:

  1. When you drag a control on to a view, ensure its boundaries “connect” with another, related control before you drop it onto the view so that auto-layout can make a smarter decision about the position of the new control relative to other controls * (see note below)

  2. Avoid moving a control by dragging it. Instead, as others have said, always change the auto-layout settings in code to move your control and, if you need to move other controls relative to it, also change those auto-layout settings in code.

This second point might seem like a huge PITA at first but you should find that you get quite quick at this.

  • Note: there is a problem with this and at some point it would be helpful if the IDE could get a bit smarter about the decisions it makes around your intentions when you do drag a control. For example, if you drag a new label towards the left margin of a view and stop at the first gap indicator, the IDE will set it to Left = Parent.Left + StandardGap. Now if you drag a second label to the same left margin of the view, this time the IDE will set Left = Label1.Left instead of repeating Left = Parent.Left + StandardGap. So it relates Label2 to Label1 for you. The problem with this, in my experience, is that a subsequent move of Label1 will of course move Label2. So in all cases such as this I go in and change Label2’s Left = Parent.Left + StandardGap (i.e. I remove any relationship between Label2 and Label1) so as to make later moves easier.
10

Excellent example of the IDE assuming wrong :slight_smile:

11

[quote=194308:@Jason Tait]

  • Note: there is a problem with this and at some point it would be helpful if the IDE could get a bit smarter about the decisions it makes around your intentions when you do drag a control. For example, if you drag a new label towards the left margin of a view and stop at the first gap indicator, the IDE will set it to Left = Parent.Left + StandardGap. Now if you drag a second label to the same left margin of the view, this time the IDE will set Left = Label1.Left instead of repeating Left = Parent.Left + StandardGap. So it relates Label2 to Label1 for you. The problem with this, in my experience, is that a subsequent move of Label1 will of course move Label2. So in all cases such as this I go in and change Label2’s Left = Parent.Left + StandardGap (i.e. I remove any relationship between Label2 and Label1) so as to make later moves easier.[/quote]

And filed a feature request/bug report about this ? Right ? :stuck_out_tongue:

12

Now @Norman Palardy that seems a strange point to be making? I was just attempting to assist the OP. I didn’t say that I had filed a Feedback case that had been ignored. I just said, quite gently I think, that “…at some point it would be helpful if the IDE could…”. I believe that I do contribute to Feedback in a meaningful and positive way and I have filed other Auto-Layout suggestions previously. :stuck_out_tongue:

13

I get that
If you’d like it to do that some day an FR would be in order
That’s all I’m suggesting

While I read and post a LOT I don’t remember every post on here or every time someone says “Gee it’d be nice if …” or “Hey there’s this bug”
Sounds like a FR for God to improve norms memory maybe :slight_smile:

14

Sure. I don’t want to get into a war here Norman :slight_smile: but, to me at least, Xojo’s reliance on Feedback seems kind of an old-fashioned constraint/approach to customer-centricness. In my company, if somebody stops me in the hallway and says “Hey you know what would be good - if when I tapped refresh on one of the tabs in our mobile app that everything was refreshed. As a user, that’s what I expect would happen.” And, because I am invested/take pride in/want the best for my product, I make a note in Trello right away (we use Trello for our backlog) and then it gets done pretty quickly after that. Then you don’t need a Feedback Report for God to improve your memory which, when you think about it, just reinforces the point I’m making here :).

15

I strongly believe in Auto Layout. So much so I put it in RubberViewsWE. But it may be too much too early for people who come from Desktop or Web. Then they do not grasp the concept and simply complain it does things they were not expecting.

I did not file a feature request for that, but from the reaction of a lot of long time Xojo users against Auto Layout, it seems they are expecting from the layout editor the same behavior as what they are accustomed to in the other platforms.

iOS is almost doing the same thing when there is only one control, ie setting left, top, width and height. It becomes less evident when other controls are dropped, as in the example of the two labels, where if one aligns tops all the sudden the left of the second becomes relative to the other’s right. Sometimes that works great, sometimes that creates strange side effects.

Maybe it would be better to originally use the same behavior as the old layout editor, and add a “prepare for auto layout” feature, button or menu option, that would infer the controls relations as it does now, but since it would be optional, it would be much less unsettling.

I do believe Auto Layout is not described in enough details to really do justice to that wonderful feature. That does not help.

Also, I remember when I was developing Elementary Letters, sometimes the layout editor showed one thing while constraints were actually different. So upon run controls shifted away from the place I had put them visually. I believe it must be a bug. Unfortunately I worked around and forgot the specifics since.

16

I followed some of the advice in this thread and things seem to be getting better. I think perhaps I was trying to move things around too much (which is still an issue), but if I use the auto-layout options to move things around it seems to work better.

It also seems that once you get your auto-layout settings correctly entered, the control will move into the proper location. Definitely a little frustrating at first, but I’m getting the hang of it. Thanks for all the advice.

17

I have tried “simple” things using AL in Interface Builder, and it took me 1/2 a day to lay out 3 labels horizontally centered with two tied to the top and one to the bottom of the screen. There is also an image, and I’m STILL trying to figure out why it doesn’t show at run time

18

I have spent 3 hours (more?) trying to do a job that should have taken 5 minutes. AND I AM STILL NOT FINISHED. I have tried using the auto layout editor controls with not much success. The control interface does not make sense at times. For example I go to edit the height property. In the editor there is a field labeled ‘Height’ but entering a number in that field does not seem to affect the height. I figured out that entering a number in the field marked ‘Offset’ sets the height of the label to that number. This is not what I would expect the ‘Offset’ field to do.

Then there is this field that comes and goes named ‘Parent’. I have no idea how an label gets assigned to that parent. dragging a label inside a parent object like an iOSRectangle does not cause that ‘Parent’ field to appear for that label. I also have no idea how to de-parent a label. changing the text in the ‘Parent’ field does not seem to help.

I am trying to lay out a few labels in a neat order and they keep jumping around randomly. It is very frustrating.

19

Parent is Self. The edges of the device screen.

If you want to get an equivalent of desktop, you can keep only left, top, width and height relative to Parent.

When you got that working, you will probably feel relieved.

Now, just an example of how Auto Layout is better : say you have three labels you want stacked vertically 20 pixels away from each other. In Desktop, you would use different top value relatives to Parent.Top. In Auto Layout, you can set Label2.Top relative to Label1.Bottom by 20 pixels, and so on. All labels will keep at 20 pixels. To make sure they keep aligned, you can set Label2.Left relative to Label1.Left by zero pixel.

Now imagine the user rotates the view. If you have used a fixed Top relative to Parent for Label 1, all labels will end up much too low. In Auto Layout, you can set a percentage instead of a fixed value. Say Parent.20%. When you rotate, the labels will be nicely positioned higher without extra coding.

May I suggest you take it step by step. It will be a whole lot less frustrating. And do not trust the layout editor. It assumes far too much for its own good.

20

It would be really cool if there was a webinar just on Auto Layout. I have tried several times to make iOS versions of some simples app I made for my business, but for close to a year now I have never been able to get past the issues with auto layout. It is by far the most frustrating part of iOS development using Xojo (not having tried other iOS development software yet. The help document would be more helpful if gave some relation examples for say three labels next to each other with X relationship features.

I wished there was a option to completely turn off auto layout so I can get the ui layout setup correctly, they have the ability to add the needed auto layout features, one by one.

I have a row of eight labels that I want each to be a fixed width and fixed distant from each other and all of them as a unit to be centered on the row. Then below each label I want a button set up same way. It seems no matter what I try and do they end up all over the place or just gone into never never land. I have been coming back to this project every couple months only to frustrated into a crazy state each time.

Yes, Auto Layout has stopped me completely from developing in iOS. In fact, I am looking into doing the app with swift now. A friend told me it handles they layout much, much better.

JMW