How do I make my app scale to fit the screen on all devices?
In this lesson we'll look at how to make your app fullscreen on all devices it runs on. There are two main approaches to this:
1) Let LiveCode scale your final stack using the fullscreenmode property introduced in LiveCode 6.5.
2) Scale everything on your stack manually.
This lesson will focus on option 1. There is a lesson dedicated to resizing all the assets of a stack to fit the device here.
The fullscreenmode property was added in LiveCode 6.5. When set on the stack, it will scale all the controls of a stack to fit the device based on the fullscreenmode setting you've used. The aim of this feature is to make it quick and easy to develop an app and have LiveCode scale it to the fit the target device. This feature will work for any stack and all objects.
Create a new stack and add some controls
This new stack contains:
1) An image
2) A round graphic
3) A label with text
4) A background rectangle graphic with a gradient and border set
I've also made our stack an non standard aspect ratio (square) to exaggerate the effect of the fullscreenmode mode.
To make the most of this feature we would recommend creating a stack with an aspect ratio similar to that of the devices you plan to target. Somewhere between 4:3 and 16:9 would so your device scale well on most devices.
Setup the fullscreenmode property for this stack
In the stack script add the following code:
set the fullscreenmode of me to "exactFit"
NOTE: 'of me' refers to the object that owns the script. In this case, we are working in the stack script, so 'me' resolves to the stack. The fullscreenmode is a property of the stack.
Setup your stack to run on a device or simulator
For the purposes of this lesson, I'm using the iPhone simulator.
Notice I've set this stack up to run on both iPhone and iPad and hidden the status bar so that we can see the full effect of the fullscreenmode property.
The following screenshots show the effect of:
1) No fullscreenmode
2) fullscreenmode set to "exactFit"
3) fullscreenmode set to "letterbox"
4) fullscreenmode set to "noBorder"
5) fullscreenmode set to "noScale"
Each scale mode is useful in different circumstances.