Changing An Application’s Orientation At Runtime

Generally, this kind of behavior is something mostly seen on a mobile device.
When the device is physically rotated, the orientation of the screen’s contents are also rotated to match the new position. The layout automatically changes to conform to these new constraints commonly referred to as either Landscape or Portrait.

Currently Storyboard doesn’t have a layout manager to handle this kind of behavior out of the box. So while this can be achieved in Storyboard, some extra setup is needed.

To accomplish this behavior, your application will need to be architected in such a way that each screen is created twice: one in Landscape and the other in Portrait. Then at runtime when the layout needs to change from one to the other, you simply perform an Orientation Screen Transition to the appropriate screen duplicate

It’s important to note that in order to accomplish this, your Storyboard application will actually need to be square in resolution. For example, if you have an 800x480 screen, your app will need to be a resolution of 800x800. Again this is because you need to create each screen in both Landscape and Portrait. 

Here we have an application with two screens that are intended to be identical, just in different orientations:

Landscape:

Portrait:

With these layouts in place we can now bind an Orientation Screen Transition action to an incoming event. 

In this case I’ve bound it to an event called “screen_navigate”. As you can see The Screen and Rotation parameters are bound by GDE variables. 

Since I don’t have an actual backend telling Storyboard what the orientation should be, I am simply toggling it in Lua. This is done by checking the name of the current screen being shown and seeing if it is appended with “landscape” as that is the naming convention being used.

--- @param gre#context mapargs
function cb_change_layout(mapargs)
 local current_orientation = string.match(mapargs.context_screen,"_([^_]+)$")
  local data = {}

 if (current_orientation == 'landscape') then
   data['screen_target'] = 'Screen_portrait'
   data['screen_rotation'] = 270
 else
   data['screen_target'] = 'Screen_landscape'
   data['screen_rotation'] = 0
  end

 gre.set_data(data)
 gre.send_event('screen_navigate')
end

 

This of course isn’t how you would do it in a real practical setting, this is just for demonstration purposes.

With that implemented, our app now looks like this when we simulate:


With this we can now move this to our board for testing.

Landscape:

Portrait:

That now works and looks as intended. The main considerations when implementing this behavior is how you plan on telling Storyboard the orientation needs to change and how you handle determining which orientation and screen it needs to change to.

0

Comments

0 comments

Please sign in to leave a comment.

Didn't find what you were looking for?

New post