View issues with v2.20

[sconlon]

I've just installed v2.20 with the intention of replacing most of my designer scripts (in which I set view sizes and positions using % values) with the new Autoscale feature. So I tried it on one simple layout which has a panel (pnlmenu) that fills the screen and a number of buttons and labels as child views. I removed my entire designer script and replaced it with the following

AutoScaleAll
pnlMenu.SetLeftAndRight(0,0)
pnlMenu.SetTopAndBottom(0,0)

When I compiled and ran the project my screen was blank except for the pnlmenu and two buttons at the top. I should add that I have all views visible in the designer. I have just the standard variant (320 x 480) and am running on a Samsung Galaxy S2 (480 x 800). I tried putting the autoscaleall after the set instructions as I was not sure which should go first but it made no difference.

Any ideas what could be wrong?

 

[TheJinJ]

Pnl Menu is front most panel covering others?

Sent from my GT-I9300

 

[TheJinJ]

Sorry mis read that. Your menu panel is 0 size so nothing to scale

Sent from my GT-I9300

 

[sconlon]

Yes indeed. Should I use 100%x and 100%y for right and bottom or is it better to use 320 and 480 dip?

 

[TheJinJ]

I would use % for the panel as it will always need to be full screen size

Sent from my GT-I9300

 

[NJDude]

Yes indeed. Should I use 100%x and 100%y for right and bottom or is it better to use 320 and 480 dip?

If you want to scale a view to fill the screen regardless of size then you do this:

AutoScaleAll
pnlMenu.SetLeftAndRight(0dip, 100%x)
pnlMenu.SetTopAndBottom(0dip, 200dip)

The code above will scale the view to fill the screen HORIZONTALLY regardless of size with a height of 200dip, now, if you want the view to fill the screen horizontally AND VERTICALLY regardless of size then you you something like this:

AutoScaleAll
pnlMenu.SetLeftAndRight(0dip, 100%x)
pnlMenu.SetTopAndBottom(0dip, 50%y)

The code above, will create a view that it will have a height of 50% the size of the screen, regardless of the size of the device's screen

Now, by doing this:

AutoScaleAll
pnlMenu.SetLeftAndRight(0dip, 320dip)
pnlMenu.SetTopAndBottom(0dip, 480dip)

That will create a view that is PROPORTIONALLY scaled to the size of the screen (in percentages).

To better understand is best to play with these values on the designer and seeing the results on the device, it might seem confusing but it's not once you understand the mechanics, but let me stress, that is it better to see it in action.

 

[TheJinJ]

And specify sizes/positions of buttons etc with dip and using other objects to place them

Sent from my GT-I9300

 

[sconlon]

Thanks guys for the clear explanations. I also have some layouts that have a scrollview which I fill in code with row of values contained within panels. I guess the scrollview will be scaled by autoscale but what about the code-added panels? Is it possible to scale those?

 

[Erel]

Views added by code will not be scaled with "AutoScaleAll".

You can add an invisible view in the designer and then use it as a placeholder for dynamically added views.

 

[sconlon]

Not sure how I can do this. Within the code I add a full width scrollview with an initial height of about 70%x. I then add an outer panel in the scrollview and into this panel I add a variable number of 'rows' consisting of labels within a panel. The outer panel may extend higher than the scrollview but if not I adjust the height of it and add buttons immediately below it. (I think I took the code from an example that you posted some time ago).

For the row panels and labels I could add invisible views in the designer and use these to set the heights, widths and text sizes of the real ones but since the scrollview and outer panel heights are variable how can these be scaled or maybe I'm just being stupid here!

 

[klaus]

You can calculate the scale factor used in the AutoScale function.
Then for the views you add in the code you can define the Left, Top, Left, Right and when needed the TextSize properties with the values for the 'standard' layout and multiply these by the calculated scale factor. This will do exactly the same as the AutoScale function from the Designer.

Best reagrds.

 

[sconlon]

Thanks, that sounds just the thing.

I have noticed another thing which is a bit puzzling. In the designer I use a 320x480 variant and have a panel (pnlmenu) that fills the screen. At the top left I have a label that I have defined as 320dip wide and 50dip in height. When I insert the below in the All variants script

AutoScaleAll
pnlMenu.SetLeftAndRight(0,320dip)
pnlMenu.SetTopAndBottom(0,480dip)

and run the script this top label seems to extend about 3dip beyond the right edge of pnlmenu and a few buttons that I have in this panel seem also to move a bit to the right. In fact when I toggle between the Main and Designer scripts tabs every view on the layout seems to move slightly. Then when I install to my 480 x 800 phone the top label runs off the right edge and the other views are effected similarly. What gives?

 

[klaus]

What exactly do you expect with these two lines ?

pnlMenu.SetLeftAndRight(0,320dip)
pnlMenu.SetTopAndBottom(0,480dip)

Your code set the width to 320dip and the height to 480dip on any screen.
Is this what you expect ?

If you want the panel cover the whole screen then you should use

pnlMenu.SetLeftAndRight(0,100%x)
pnlMenu.SetTopAndBottom(0,100%y)

If you want the panel autoscaled but centered on the screen you should use

AutoScaleAll
pnlMenu.HorizontalCenter = 50%x
pnlMenu.VerticalCenter = 50%y

Best regards.

 

[sconlon]

I was going on the advice offered by NJDude earlier in this thread where he wrote that by using

AutoScaleAll
pnlMenu.SetLeftAndRight(0dip, 320dip)
pnlMenu.SetTopAndBottom(0dip, 480dip)

That will create a view that is PROPORTIONALLY scaled to the size of the screen (in percentages). I did think that I should use 100%x and !00%y but decided to take the advise of someone more expert than me.

I have now tried

AutoScaleAll
pnlMenu.SetLeftAndRight(0dip, 100%x)
pnlMenu.SetTopAndBottom(0dip, 100%y)

and it doesn't seem to make much difference. However, when I put the autoscaleall at the end it seems to scale properly. Which is correct? And why when I run the script should the designer view change anyway?

 

[klaus]

Now, by doing this:

AutoScaleAll
pnlMenu.SetLeftAndRight(0dip, 320dip)
pnlMenu.SetTopAndBottom(0dip, 480dip)

That will create a view that is PROPORTIONALLY scaled to the size of the screen (in percentages).

Sorry, but this is wrong.
As the two lines are after AutoScaleAll, pnlMain will be set to a width of 320dip and a height of 480dip !

Best regards.

 

[sconlon]

So, just to clarify, I should set the necessary view sizes including text sizes before I insert the Autoscaleall line as this will then calculate the correct dimensions for the device on which the app is running. Can I ask also if it makes a difference if you have the activity set to use the full screen and/or include a title as this obviously reduce the size of the screen available to the activity.

 

[klaus]

So, just to clarify, I should set the necessary view sizes including text sizes before I insert the AutoScaleAll line ...

It depends on what you mean with this.
Set the positions and sizes of the Views correctly in the 320 x 480 layout and use AuoScale to adapt the views to the device size and if necessary adjust some views afterwards.
If you already have adjusted the positions and sizes of the Views with %x and %y for different screen sized you should not use AutoScale because if you add AutoScale after this it would strech the Views more.

... the AutoScaleAll line as this will then calculate the correct dimensions for the device on which the app is running.

AutoScaleAll does the following:
- It calculates a scaling factor with the formulas below:

Delta = ((100%x + 100%y) / (320dip + 430dip) - 1)
Rate = 0.5 'value between 0 to 1. 
Scale = 1 + Rate * Delta

- Then it applies this scaling factor to all Views and the TextSize when relevant like:

View.SetLayout(View.Left * Scale, View.Top * Scale, View.Width * Scale, View.Height * Scale)
If View Is Label Then 'this will catch ALL views with text (EditText, Button, ...)
  Dim lbl As Label = View
  lbl.TextSize = lbl.TextSize * Scale
End If

Depending on the Rate value the Views will be streched more or less.
Streching with %x and %y can look too streched on big screens so with AutoScale you can play with the rate value.
Rate = 0 no stretching
Rate = 1 almost similar to %x / %y

Can I ask also if it makes a difference if you have the activity set to use the full screen and/or include a title as this obviously reduce the size of the screen available to the activity.

It makes a small difference because the reference value of 430 in the above formula should be 455 or 480.
That means with full screen the original layout will be streched a bit up to 7% with Rate = 1.

Best regards.

 

[sconlon]

It does sound very complicated but essentially I should put the overall size definitions based on %x and %y in the All variants script and then check how the layout looks on each screen variant and possibly make some adjustments in the variant specific script.