iOS Question Visual Designer and Script

[alizeti]

Hi,

I trying to see what is the best practice in design when using 2 different screen size.
In my case, I have an app that can run on a iPhone 5s (4inch 640x1136) and an iPhone X (5.8inch 1125 x 2436 pixels)

I want to know if the script part in the designer is the best way to handle the difference of size screen.
Right now, it looks good on the iPhone X, but really crappy on the iphone 5s.

I'm trying to understand the script section by reading the beginner guide for designer.

I would like to setup designer to an iPhone X and if installed on the 5s, everything would be shrink, but I can't seem to get it right.

 

[alizeti]

Something weird (maybe not).

When I used the GetDeviceLayoutValue, I get 4.07 for screenSize, 320 for the width and 568 for the height for the iphone 5s and I get 5.59 for screenSize, 375 for the width and 812 for the height for the iphone X.

I was expecting something close to the real device size.

 

[Erel]

In my case, I have an app that can run on a iPhone 5s (4inch 640x1136) and an iPhone X (5.8inch 1125 x 2436 pixels)

The numbers posted have no meaning and are incorrect.

You should watch the visual designer tutorial: https://www.b4x.com/etp.html
Also worth watching B4A Scale / DPI / DIP tutorial. It focuses on Android but is relevant to iOS as well.

In a nutshell: start with a single variant, use anchors and designer script when needed.

 

[alizeti]

Erel,

I saw 3 tutorial videos for scrip designer.
But none of them seems to answer my questioning.

When I start a new project and I know that the app will run on different screen size, how should I do the design layout? Do the layout base on the bigger screen or base on the smallest screen size?
On the abstract designer, if I choose "match connected device" and arrange the layout it looks good for this size, but then, on a different screen size things starts to get on top of others.

 

[Erel]

Post a screenshot of the abstract designer.

 

[alizeti]

If I choose for iPhone X, looks good

If i choose for iphone 5s, looks not that good!

 

[Erel]

Where are all the battViewXX views?

The anchors look correct. I would start with removing the designer script.

iPhone 5S is the smallest relevant screen size.

You need to decide how the layout should behave when the screen becomes larger. If you don't want the empty space in the middle then don't anchor to the views to the bottom. Just leave empty space at the bottom.

 

[alizeti]

the battViewXX are one in top of the other! On the code, I show only one at the time.

The designer script script is there just to make sure the battView is always center in the middle of the screen.

If i remove the anchor to the bottom on the labels and textField, well they will go behind the Navigation ToolBar on the bottom.

Idealy, I would like to designe for the big screen and then, if installed on a smaller screen, it shrinks everything.

 

[Erel]

There is no magic. You need to decide how the layout should change based on the screen size. AutoScaleAll will help. If you use a single large variant then AutoScaleAll will reduce the controls sizes when loaded on a smaller screen.

 

[alizeti]

is there a relation between the nonNormalizedScale and the AutoScaleRate?

I did i quick test using 1 button and if I set the name of the button with the button width on the Designer Script, I get 135 when AutoScale rate is set to 1 on a iPhoneX and 92 on the iPhone 5s (button width was set to 100 using the abstract design)

 

[alizeti]

Another quick test.

I change the default variant to be the size of the iphoneX so I guest now, everything is reference to this size.

When I run the script and check on the device, the button1.width says 80.
If I install the app on the actual phone, the same width goes to 96.35

I was expecting to get the same value.

 

[Erel]

is there a relation between the nonNormalizedScale and the AutoScaleRate?

No.

I get 135 when AutoScale rate is set to 1 on a iPhoneX and 92 on the iPhone 5s (button width was set to 100 using the abstract design)

1. The scale rate shouldn't be larger than 0.5.
2. AutoScaleAll is a fine tuning feature. It will not solve your layout issues.

When I run the script and check on the device, the button1.width says 80.
If I install the app on the actual phone, the same width goes to 96.35

Remove AutoScaleAll if the exact size is important.

 

[alizeti]

Erel,

Exact size is not important.
For me, i'm trying to understand is how to develop the interface the best possible way.

Right now, I don't know if I should design using the default variant (320 x 568), choose the smallest display that I want (let's says iPhone 5s, so the 4inch on the abstract designer) and place my layout there.

If I remove the default variant and create a new default one with the iPhone X specs, does it mean everything smaller will be shrink? I have no idea even after reading the documentation.

 

[Erel]

If I remove the default variant and create a new default one with the iPhone X specs, does it mean everything smaller will be shrink?

AutoScaleAll will slightly decrease the views. As I previously wrote:

AutoScaleAll is a fine tuning feature. It will not solve your layout issues.

 

[alizeti]

Another question to try to understand better.
I place a button with 100 for the width
Now, on the design script, I set the scale rate to 0.3.

On the iphone 5s the width of the button is now 98 and on the iPhone X, the same button will get a width of 107.
I'm trying to understand this.

 

[Erel]

AutoScaleAll - Slightly increases or decreases the sizes based on the ratio between the device screen size and the variant size.