Designing for multiple devices

[rbytes]

This post is a response to Ramzan's question in the post Music Player in Basic Programs.

In your coding, near the top, you should define two variables and set them from built-in sB functions.

sw=SCREEN_WIDTH() ! sh=SCREEN HEIGHT()
These will give you 1/2 of the actual pixel numbers, both horizontally and vertically. So even though my iPad has 2048 X 1536 pixels, the values I get are sw=1024 and sh=768. Apple calls that the logical resolution.

Now create variables to set the ratio between the screen you are designing on and any other device's screen.
Example if you are designing on an iPad:
ratiox=sw/1024 ! ratioh=sh/768

Example if on an iPhone 5s:
ratiox=sw/568 ! ratioh=sh/320

I will assume you are programming on an iPhone, so will assume your ratiox=1 and your ratioy=1
Now you will use these ratio values to resize and reposition the interface and other elements so they will fit any iOS screen.

Let's say you want to have 13 buttons arranged one above the other, using all screen space available.

Make a loop to define your buttons:

FOR i=1 to 13
i$=I
BUTTON i$ TEXT "Button "&i$ at 50*ratiox, 22*i*ratioy-20*ratioy SIZE 50*ratiox, 24*ratioy
NEXT i

I chose the value 22, because on the smallest iOS screens (sh=320), you will just be able to fit 13 buttons of that size with a 2 point space between them with the device held horizontal. If you turn the device vertical, you will get larger buttons and they will spread to fill the increased space. You can even sense a change in orientation while your program is running, and redraw the buttons on the fly.

If I just left the Button y value as 22*i*ratioy, then the first button would print at y=22. Therefore I subtracted 20-ratioy to move the first button almost to the top. Otherwise the 13th button might run offscreen at the bottom.

Also please note that I have assumed the toolbar will be hidden. If it isn't, your vertical space will be reduced by 44 points and your buttons will have to shrink a bit.

You can also set the font size of your buttons and other text by multiplying the size by either ratiow or ratioh. Try both and see what looks best.

[rbytes]

I find this chart very helpful in designing programs that will adjust to fit the screen of any iOS device. The iPhone 4 and 4s (not shown) have a logical resolution of 960 X 640, and a point size of 480 X 320.

[Mr. Kibernetik]

When using interface objects there is no need to use pixels at all.
It is enough to get screen size with SCREEN_WIDTH() and SCREEN_HEIGHT() functions.

P.S. Modern iOS devices have 3x multiplication for calculation of pixel count. Old devices has 1x multiplication.
SCREEN_SCALE() function returns this number.