Example code for orientation change

Solar2D General Questions/Discussion
#1

Is there some good example code for dealing with orientation change?

I have an app that displays a number of buttons on the screen. In portrait mode, the buttons all stack up on top of one another. I want to have it so that if the user turns the device into landscape mode, that the button layout changes where the width shrinks a little and they go into a 2x2 formation.

Is there a good example of how to implement this? Since parts of my app have a timer where the user has limited time to answer, I don’t want to have the re-orientation interrupt or change that.

Any pointers would be most appreciated. [import]uid: 17827 topic_id: 20841 reply_id: 320841[/import]

#2

I believe CoronaSDK > SampleCode > Interface has two orientations samples that may help you :slight_smile: [import]uid: 52491 topic_id: 20841 reply_id: 82138[/import]

#3

Thanks, Peach.

I guess my confusion is how do I know which group of content is showing to reorient it? The examples work great if you just have one screen.

But in my app, I have several “screens”: a company logo screen, a title screen, a menu screen, a intro screen, a question/answer screen, etc. So in the onOrientationChange function, how do I reposition things when I don’t know what is displaying at the time?

I think that is where I am still a Corona noob. :slight_smile:

I know how to create and remove groups, but event functionality is still a bit of a mystery, and tying that to content on the screen, content that might or might not be there, is my shortcoming right now. [import]uid: 17827 topic_id: 20841 reply_id: 82162[/import]

#4

If you have several screens you would likely write a different onOrientationChange function for each of them so you could adjust things accordingly - one wouldn’t work across the board if you had special little tweaks you wanted to make, no.

Does that make sense?

Peach :slight_smile: [import]uid: 52491 topic_id: 20841 reply_id: 82180[/import]

#5

It does. But what is the optimal way to code this?

Basically, I just have a bunch of functions, like displayMenu(), displayQuestion(), displayLogo() that set up the elements on the screen, put them into groups, and remove the no-longer-needed groups.

So in each of those functions, would I have a local version of the onOrientationChange function?

And then this line lives outside those functions?

Runtime:addEventListener( "orientation", onOrientationChange )

Or do I just change this line for each screen:

Runtime:addEventListener( "orientation", onOrientationChange )

So in the displayMenu() function, I add

Runtime:addEventListener( "orientation", onOrientationChangeMenu )

Then create an onOrientationChangeMenu function that deals with just the menu screen.

Then in the displayQuestion() function, I add

Runtime:addEventListener( "orientation", onOrientationChangeQuestion )

Then create an onOrientationChangeQuestion function that deals with just the question screen.

That’s the part that I am not sure about. What is the correct/ideal/optimal way to have that event listener in the code and have it reference the correct function for each screen?

Thanks for your advice, Peach. [import]uid: 17827 topic_id: 20841 reply_id: 82418[/import]