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 preOpenStack
Click 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.
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?
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"
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!!!
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"
thank you very much for pointing that out. The lesson has been updated accordingly.
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?
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.