Any easy layout examples?

[IanMc]

It's complicated trying to get universal layouts to look good on all devices.

The designer script seems to go a long way to help but can anyone demonstrate something easy like say we have three panels.

One small square panel which will always appear up and to the left then two other panels which will appear depending on orientation as either:

Portrait: Two horizontal panels below

Lansdcape: One horizontal panel below and one vertical to the right

I think one has to be a master of layouts and it's almost like a whole language in it's own right

I'm getting there slowly and will post my results but meanwhile any examples would be most welcome.

 

[IanMc]

Layout1Test

Am I on the right track here?

As in, will this look reasonable on all devices?

I think the Panels chop up the areas into more easily manageable chunks but boy does it look different on the UI Cloud devices

Perhaps an improvement might be to have Panel1 change size too?

 

[GMan]

Maybe you can set the Panel1.Size to a percentage of the screen width ?

 

[IanMc]

That may be the answer,

The next problem is that I put a button on Panel1 set it's width and height to 30 in the designer with the idea of making a phonepad type array of buttons but when I test it that button is massive on my tablet

Takes up more than a quarter of Panel1

Slow going.

added: Hmmm... the button is small when I change to portrait in the designer and on my tablet, then it grows to over a quarter of the size of panel1 if I switch to landscape.

 

[GMan]

Yeah, with Buttons the problem will always be the textsize...maybe Erel codes some AutoButton-Lib (like the AutoLabel) which makes the textsize to a percentage of the heigth/width of the button

 

[IanMc]

well the text size in the designer is left at the default, 14 I think.

I thought It might be because I had AutoScaleAll selected but it turns out that because I had Two Variants, it had saved the button bigger in the landscape Variant.

When I removed the second Variant it all works well again and the button is small in both orientations.

 

[klaus]

You should explain a bit more in detail what exactly you want to do with the layouts and what you want to show.
In the code you posted in post #2 there are no buttons, but then in post #4 you speak about buttons.
Show us a more complete layout.

Did you have a look at chapters:
8.9 Designer Scripts
8.10 AutoScale
in the Beginner's Guide?

You haven't specified an AutoScaleRate so you are using 0.3 which is the default value.
When you use AutoScale you reposition the views, increase their dimensions and increase also their text size if relevant with a calculated scale factor which depends on the AutoScaleRate with following equations:
delta = ((100%x + 100%y) / (320dip + 430dip) - 1)
rate = 0.3 'value between 0 to 1.
scale = 1 + rate * delta

AutoScale is equivalent to ( v is a view)
v.Left = v.Left * scale
v.Top = v.Top * scale
v.Width = v.Width * scale
v.Height = v.Height * scale
v.Text = v.Text * scale ' if relevant

Then you can play with the AutoScaleRate.
Rate = 0 means no change
Rate = 1 is almost equivalent to %x and %y but not exactly.

The main problem is what do you want to show on a 3.5'', a 7'' and a 10'' screen.
A layout designed for a 3.5'' screen and then stretched proportionnaly to fit in a 10'' screen would not look that well on a 10'' screen.
Depending on what you want to show on small screens and on big screens can completely change the layout definitions.

Best regards.

 

[IanMc]

Hi Klaus,

Did you have a look at chapters:
8.9 Designer Scripts
8.10 AutoScale
in the Beginner's Guide?

Yes I did and I must say I think the beginners guide is really really good!

I've had an idea which might do what I want and I'll post the code when I've done it.