Need good tutorial - Auto Layout

Targets iOS
1

Hi,

I wish someone would put together a Demo or Tutorial that covered:

  1. Running on iPhone 6, moving to the iPhone 5, it is necessary to Shrink some controls, and make font’s smaller, how?

  2. When running on iPad take the iPhone layout and totally rearrange controls. Place them in totally different locations. Make Labels smaller and Text input fields smaller. How does one even begin to do this. What would be the best way? I think the examples as they exist now are sorely lacking.

Is it possible to change the row height and font of tables?

Also explain exactly what priority does. And how to use the Min/Max in Constraints.

I think @Paul Lefebvre could do a multi part webinar on this.

Thanks for reading…

2

I have a screen that I just can’t get to fit on anything smaller than an iPhone 6. I would like to say the Minimum device is a iPhone 5.

The table seems to waste so much space.

3

Apple won’t let you do that… you must support ALL iPhone devices AND/OR iPad
but you cannot subset the support you provide for iPhone…
but there are somethings that just won’t fit on 4s/5s but would be fine on 6/6+

and my standing opinion is AL is the worst idea anyone ever came up with. Just saying, there has to be a “better” way

4

Not sure about Apple won’t let you do that. The first version of this was done in Adobe Flash Builder with Flex and you could change things their, but they were not the iOS controls.

That entire environment is a kludge though.

5

Actually they do.
Any app must run on all devices… an iPhone app must even be able to run on an iPad (albeit it with zoomed screen).
The ONLY restrictions you can apply to you app is that it must support certain hardware, microphone, acceloratmeter etc.

but that pretty much just leaves out old Iphone3/4… screen resolution is NOT one of the allowed restrictions

6

It is possible to indirectly drop support for older hardware by designating the minimum OS for your app. You can, if you choose, to say that you’re app is only compatible with the latest version of iOS. This will drop off very old devices such as the iPhone 4 (not the 4s!), iPad 1 and old iPod touches (pre-5th gen).

Unfortunately, I think auto-layout is a necessary evil, with so many device types and resolutions and more on the way. Whether or not it could be done better is another matter :slight_smile:

7

I still need to know:

[quote]Also explain exactly what priority does. And how to use the Min/Max in Constraints.
[/quote]

And how do you use percent?

I Decided to go with a different View for iPad. All the code in both the iPad and iPhone screen call methods in a separate module.

I have about 6 views I’m going to have to do this for. The iPhone ones after all values are selected and a button is pushed, shows a new view with the results in an html table. The iPad version can have the results table right on the same view as they input the values.

8

[quote=206922:@Richard Albrecht] how to use the Min/Max in Constraints.
And how do you use percent?[/quote]

Let me start by percent, because that is where it starts (for me at least).

In a Desktop project, you have Left, Top, Width and Height. Setting these values in absolute work just fine for a fixed width window, and you can do that very precisely in the layout editor.

If the window is resized, you can use the locks, but it is not always perfect. The solution is to make the properties relative to the size of the window instead of absolute.

In Desktop there are no percentage, but you can use something similar, like this in the Resize event :

me.left = (self.width/100)*20 me.Top = (self.width/100)*30
and so on. That way when you resize the window, the control will resize accordingly.

That is what my class RubberViews does. Plus a lot more things, but the basic principle remains.

Now, in iOS, it is assumed that the user will rotate the device. So, let us imagine you have a circle in the view, and you want it to remain a circle when the user rotates, but you also want it to grow or shrink according to the portrait or landscape position.

Let us start by Height :

Height = Parent.Height * 25%

So on a phone 414x736 our circle will be 184 pixels high in Portrait, and 103 in Landscape.

Now, we want it to remain a circle, and not become an oval. So here comes the notion of relative to another control. Here, we want the width to always be the same as the height. Then

Width = Oval1.Height // Offset = zero

Here comes the priority.

We want first the height to be set relative to the parent. So Priority is required.

Then we want our width to be relative to that Height. Priority High.

Now, Min and Max.

Finally, what is this Scale thing in constraints ? I usually leave it at 100% for comfort, but it can be used to change the value of the constraint in proportions.

No matter if my app runs on iPad at 1024 x 768 or the iPhone 4 I was talking about above, I never want the circle to have a diameter of more than 200. If I let the previous height constraint go, 25% of 1024 would be 256.

I will then add a new width

Width < = 200 / Width Max Offset 200
Priority High

I apologize to Xojo engineers if for some reason my description did not do justice to every detail of the way Auto Layout works. That is a pretty complex feat of engineering. But this is how I understand it. I hope this short example will help.

9

OMG Thank You! This more what I was hoping. They should put this in the docs with illustrations!

How about it XoJo !

Once again thank you for such a detailed post. I am going to study this as now my head hurts.

10

[quote=207037:@Richard Albrecht]OMG Thank You! This more what I was hoping. They should put this in the docs with illustrations!

How about it XoJo !

Once again thank you for such a detailed post. I am going to study this as now my head hurts.[/quote]

Take it easy. Start slow, play with it, use the Rotate feature of the simulator to see what happens.

And never quite trust the layout editor. It often assumes wrong. The constraints inspector is much more trustworthy.