Mobile Orientations
This lesson shows you how to write your code to change the application orientations correctly when the mobile is rotated. It should work correctly on both iOS and Android.
Step 1: Create a Sample Stack
A simple stack will do to experiment with the orientations. Create a new stack with a button in it by going to File-> New Mainstack, then dragging a button onto it from the Tools palette.
Step 2: Write Your Stack Script
Open the Stack Script from Object->Stack Script. Add the following code:
on preOpenStack
-- Condition to check whether the environment is mobile
if the environment is "mobile" then
--Portrait , Portrait Upside Down , Landscape Left, Landscape Right are the 4 Parameters to be passed in the function iphoneSetAllowedOrientations
put "portrait,portrait upside down,landscape left,landscape right" into theallowed
-- Function Call
mobileSetAllowedOrientations theallowed
end if
end preOpenStackClick the "Apply" button to apply your code to the stack.
Please note: While setting the parameters do not leave a space after the comma.
Step 3: Add a Test Script
Add some code to your button. Double click the button to bring up the Property Inspector, then go to Edit Script. Enter:
on mouseUp
answer "this is test for orientation"
end mouseUp
Step 3: Testing it on Mobile
Now save the stack and run the stack in the iPhone Simulator. Test it by rotating the simulator. You can see the button and the message box have changed positions accordingly.
Note: You can try the same in Android 2.3 and above versions. If it does not appear to work on the simulator, please do test it in the device, and you should see it does change your orientations as expected.
genie
How to I set the position of the button when orientation is changed? Like that in the example above...the [Top] button is right at the center when it's portrait, but not anymore when landscape.
Can I make some modifications on the positioning based on the orientation?
Hanson Schmidt-Cornelius
Hi Genie,
yes, you can update the position and scale of your controls when the orientation of the device changes. You have to handle the "orientationChanged" message. This informs you that the orientation of the device has changed.
Then test the new orientation of the device and set up the controls according to the orientation.
Have a look at: "orientationChanged" and "mobileDeviceOrientation" in the LiveCode dictionary and the following lesson: "http://lessons.runrev.com/s/lessons/m/4069/l/28683-displaying-assets-on-differing-screen-resolutions"
Kind Regards,
Hanson
genie
Hello Hanson,
Thanks for your prompt response...
Yeah! I figured...on every orientation change, I had the width and height of the stack recorded, and use the values to adjust size and position of the controls in the card. yipey!
I will go over the link you provided. It seems like a good resource.
Thank you VERY much!!!
Best Regards,
Genie
paul russell
For me, using LiveCode 5.5.1 and testing on the iOS 5.1 iPad Simulator, specifying "landscape" does not work.
It seems to be necessary to specify "landscape left"
--paul
Hanson Schmidt-Cornelius
Hi Paul,
thank you very much for pointing that out. The lesson has been updated accordingly.
Kin Regards,
Hanson
Ray
This works fine for a single card stack, but how do you 'trigger' a change in the mobileOrientation for each card in a multiple card stack?
Hanson Schmidt-Cornelius
Hi Ray,
the allowed orientations are set in the preOpenStack handler. This means that the information is set before the stack is opened. This setting applies to all cards in the application.
The orientation change is triggered for you by the operating system.
You can detect if an orientation change has taken place in your application by handling the "orientationChanged" message.
Kind Regards,
Hanson