How do you set the height and width of a mobileControl?

Seems a very silly question. Example: Dragging a MobileCanvas on a container has a default width and height of 200 and 200. But I want it to have it at 100x100. Dragging a corner does not provide life feedback in the inspector pane, so that becomes a trial and error. Setting it in the AutoLayout does seem to work. Typing in the Width field (after double clicking it) does not change its width.

Is it truly a silly question and can someone point that out by providing a step-by-step protocol?

I personally only use Layout Constraints in the IDE for this, placing the object and setting its dimensions, unless I need to change something at run time with code (like a variable row height in a table).

So set the width to 100, and don’t put in conflicting constraints like setting the left AND right as well.

So… you can set all three if at least one of the constraints has a different priority.

I am baffled. When double-clicking on the Width in the AutoLayout pane and type in 100 then hit the button “done”, the name-field becomes 100. And trying to do what both of you said, does not do what I want it to do. I don’t understand what is going on. Apparently, I have to fill it in the offset field. Crazy. So I deleted everything in the AutoLayout, then added height and width and typed the value in offset.

That got rid of the value of 100 in the name field. Result: Left, Top, Width and Height (all are at 100) in Auto layout in the column named Edge. The Priority for each is highest. No Parent stuff.

I get it that AutoLayout is valuable, but at face-value this whole thing can put you off quite easily; even worse, it can turn you off when you are used to design a desktop app with Xojo. And I don’t understand “Rule” in the AutoLayout in combination with Priority and Edge. “Name” ???

The Name field is so you can adjust them in code.

Auto layout is a set of rules. The thing you have to remember is that the rules that you apply to a control on a layout are actually used by the layout with the rules of every other item it contains to figure out where they all go and how they behave if the layout’s dimensions change (like if the device is rotated).

Priority is used to give the auto layout solver some leeway if things become unsolvable. For instance, let’s say the screen is 300px wide and you make three constraints with equal priorities.

  1. Left to left edge of the screen: 100px
  2. Right to the right edge of the screen: 100px
  3. Width: 200px

How would you expect auto layout to deal with this? What happens on a device is that you get a crash because the element is considered over constrained, that is, there are too many equal constraints in effect at the same time. Now, if it were okay that the width be less than 200 in this scenario, you could just set its priority lower than the Left and Right constraints, indicating to the solver that if there is a conflict that the Width constraint can be ignored.

It takes a little while to get used to working with Auto Layout but as soon as you figure it out, you never want to go back to something else.

3 Likes