AutoScale Code Module

[klaus]

The AutoScale function in the Designer Scripts scales only views added in the Designer but not views added in the code.

To overcome this drawback I wrote a Scale Code module, the first version is already included in the Desiger Scripts & AutoScale Tutorial.

There are two other drawbacks :

• the internal Labels of ListViews are not scaled.
• with the Designer Scripts AutoScale function for some smartphone screen sizes especially the 480 x 800 scale 1.5 screen the scaling is not optimal (at least for me).
  With AutoScale on a screen with a resolution of 480 x 800 scale 1.5 (the standard screen is 320 x 480 scale 1) the views are stretched too much horizontally and not enough vertically because of the different width/height ratio.

I added in the Scale Module a new set of equations with two scale factors one for X and one for Y. For smartphone screens (< 6'') the views are scaled according to the screen width and the screen height without the rate factor. For bigger screens the scale factors are modified with the rate factor. For the big screens a rate value of 0 means no scaling and a value of 1 is equivalent to a scaling with %x and %y.

The AutoScale function in the code module scales also the internal views in ScrollViews, ListViews and scales the TextSize property of Spinners.

The Scale code module contains following functions:

• Initialize Calculates the scale factors
• SetRate(Rate) Sets a new Rate value and calculates the scale factors
• ScaleView(View) Scales the given view with its child views
  with the new equations.
• ScaleViewDS(View) Scales the given view with its child views
  with the Designer Scripts equations
• ScaleAll(Activity, True) Scales all views of the given Activity or Panel
  with the new equations.
• ScaleAllDS(Activity, True) Scales all views of the given Activity or Panel
  with the Designer Scripts equations
• GetDivicePhysicalSize Gets the approximate physical size of the device
• GetScaleDS Returns the Disigner Scripts scale factor
• GetScaleX Returns the X scale factor
• GetScaleX_L Returns the X scale landscape factor
  independant of the current orientation
• GetScaleX_P Returns the X scale portrait factor
  independant of the current orientation
• GetScaleY Returns the Y scale factor
• GetScaleY_L Returns the Y scale landscape factor
  independant of the current orientation
• GetScaleY_P Returns the Y scale portrait factor
  independant of the current orientation
• Bottom(View) Returns the Bottom coordinate of the View
• Right(View) Returns the Right coordinate of the View
• HorizonzalCenter(View, x1, x2) Centres the View horizontally the view between two coordinates
• HorizonzalCenter2(V1, V2, V3) Centres the View V1 horizontally between two views V2 and V3
• VerticalCenter(View, x1, x2) Centres the View horizontally the view between two coordinates
• VerticalCenter2(V1, V2, V3) Centres the View V1 horizontally between two views V2 and V3
• IsActivity(View) Returns True if the View is an activity
• IsPanel(View) Returns True if the View is a Panel
• SetRight(View, xRight) Sets the Left propety of the view according to the given right coordinate xRight and the views Width property.
• SetBottom(View, yBottom) Sets the Top propety of the view according to the given bottom coordinate yBottom and the views Height property.
• SetLeftAndRight(View, xLeft, xRight) Sets the Left and Width properties of view View according to the xLeft and xRight coordinates.
• SetLeftAndRight2(V1, VL, dxL, VR, dxR) Sets the Left and Width properties of view V1 between the views VL and VR with the given spaces dxL and dxR.
• SetTopAndBottom(View, yTop, yBottom) Sets the Top and Height properties of view View according to the yTop and yBottom coordinates.
• SetTopAndBottom2(V1, VT, dyT, VB, dyB) Sets the Top and Height properties of view V1 between the views VT and VB with the given spaces dyT and dyB.
• SetReferenceLayout(Width, Height, Scale) sets a new layout as the reference layout, allows downscaling. AutoScaleRate has no influence in this case !

The project contains following activities showing different examples of the use of either Designer Scripts AutoScale or scaling with the Code Module.
Activities:

• Main Main screen with an image and buttons.
• Setup The setup screen from the GPSExample program.
• About An about screen example.
• DBWebView A database table in a WebView with a modified DBUtils version
  scaling the table text size.
• DBScrollView A database table in a ScrollView.
• Keyboard A keyboard with views added in the code.
• ListView A ListView with the internal Labels and Bitmap scaled.
• Calculator A calculator layout from the RPNCalc project without the functions
  scaled with the new equations.
• Calculator1 Same as Calculator but scaled with the Designer Scripts equations.
• Positioning Example with the different positioning routines.

Code modules:

• Scale The scaling module
• DBUtils The modified DBUtils module

If you run Calculator and Calculator1 on a 480 x 800 scale 1.5 device you'll see the difference between Designer Scripts scaling and the scaling with the new equations.

If you don't need all routines in the Scale module you can remove those not needed.
The Scale module scales also ScrollView2D views, if you don't use such a view you must comment the corresponding lines or remove them.

I think the code is enough self explanatory.

Best regards.

EDIT: 2013.09.27
Added SetReferenceLayout
Added HorizontalScrollView

EDIT: 2014.11.20
Amended error reported HERE.

 

[Roberto P.]

Hello Klaus
here is a small project, derived from the full, where you can see the different behavior of the scale module if using StdViewPager.

Thank you

 

[klaus]

I had a look at your project.
I don't really understand the logic behind your layout variants:
- 320 x 480 scale 1, m_pnlDatiTicket Panel has a width of 610 and a height of 1330, no relation with the layout screen.
- 800 x 1280 scale 1, m_pnlDatiTicket Panel has a width of 800 and a height of 1230 this is logic.
- 1280 x 800 scale 1, m_pnlDatiTicket has a width of 800 and a height of 990 this looks strange to me.

You are using DesignerScripts, Script General and Script Variants.
Mixing DesignerScripts and the AutoScale module will for sure give unexpected results.
What do you expect from the AutoScale module.
If you set in the DesignerScripts a width of 100%x and then use the AutoScale module the widht will become bigger than the screen size if the screen of the device is bigger than the layout variant size !

You might read these chapters in the B4A Beginner's Guide.
5 Screen sizes and resolutions
8.10 Designer Scripts
8.11 Anchors
8.12 AutoScale

The AutoScale module is explained in this chapter:
8.12.3 AutoScale more advanced examples

 

[Roberto P.]

Hello Klaus
I thank you for response and considerations. In fact in the points panels 1 and 3 have inconsistent values, but I did not think it would create problems.
By autoscale, I expect a better ability to manage the proportion of controls than Designer script and I wanted to try to replace the Designer management.

However, AutoScale fails to work with StdViewPager, you believe that you can integrate?

 

[klaus]

Sorry for answering only today but I had operation in one eye so no computer.
I tried to add StdViewPager in the Sacle module, but I have not yet found how to get the panel views from the StdViewPager.

 

[Roberto P.]

No problem Klaus.
I tried but I also have not found a way to extract the panel.

Hopefully someone can give an indication.
Thank you

 

[LucaMs]

Mah, I remember problems also to get the views contained in pages of TabHosts, for this reason I pretend that this View does not exist.

 

[LucaMs]

Good luck for you eye, Klaus

 

[klaus]

Good luck for you eye, Klaus

Thank you, the operation was yesterday, everything is OK.

 

[watesoft]

Thank you Klaus! I use your Auto Scale Module to test my project, was confused by some questions：
In visual designer, main layout(Frm_Main) includes 1 panel(Pan_Main) and some button. pic_main.png fill the panel. some regular hexagon with PS on pic_main.png. I hope one round button(set corner radius:50) corresponding to one regular hexagon on pic_main.png.
My reference layout: 480*800,scale=1
Simulator：Genymotion(free version)
In Simulator Samsung Galaxy S2-480*800,It's ok, See Screenshot image：480-800.png
But in other Simulator(like Samsung Galaxy note3-1080*1920,Samsung Galaxy note2-720*1280,Google Nexus7-800*1280,Google Nexus4-768*1280,Google Nexus7 2013-1200*1920 etc), round button was stretched and Depart from regular hexagon. See other Screenshot image.
How can I solve it,hope to get your help.Thank you.
My English is poor, I hope you know what I mean about questions.

 

[klaus]

Two problems:
1. In the Designer you use AutoScale! Why?
2. When you use ScaleAll you get two different scale factors! One for x and one for y.
This means that a square in the refence screen resolution may be streched on other screens.
3. There is an exeption for ImageViews and Panels with a BitmapDrawable Background which are scaled in both directions with the same scale factor to maintain the Height/Width ratio.
In your case the Panel is scald with the smallest value of ScaleX and ScaleY, but the Buttons are scaled with two scale factors which can be different.
You can use either ScaleAllDS which is the same as AutoScale in the Designer
or ScaleAllX which uses one scale factoe, the x scale factor.

 

[watesoft]

Many thanks, great Klaus!
Fllow your advice, I use ScaleAllX instead of ScaleAll and reposition the button, All Simulators are ok. one round button is corresponding to one regular hexagon correctly.

But first I use ScaleAllDS instead of ScaleAll, I see nothing only the color #08B4F8( layout's color ), no regular hexagon and round button in Simulators, perhaps it's a bug to my project.