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

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

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

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

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.

7 Comments

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

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.