Display Orientation Change V6.5.1

[dcpbarrington]

LiveCode Forum,

I've upgraded my Android App to use LiveCode V6.5.1 and have is working nicely with the new screen sizing and density features. Working great in "Letterbox" mode.

Now "Letterbox" adjusts the screen size for the device and puts a black bar on the side. In "Portrait" screen orientation this looks great, but if I switch the orientation of the device to be "Landscape Right" or "Landscape Left" the display now has the same information that was in "Portrait" mode, but now with very large black bars on the right and left.
I tried setting the mode to "ExactFit", but that just stretched the data to fit the new screen orientation. Very ugly.

I've looked through the release notes and tutorials, but I cannot find any information on how to ReSize the application when the orientation changes. I want to expand the data that is displayed to take advantage of the increased screen space available. Example.

Display Orientation 480 x 800 vertical. In this mode I have a native Scroller set up so the user can scroll right and left to view all the data in a wide table. When the user changed the device orientation I want to now show less of the vertical and expand the horizontal data to only show the first 480 of the vertical display, but extend the width of the data to now 800 so the user will be able to see the entire table data set.

What would I need to do on the ReSize message to adjust the displayed data orientation?

Thanks for the help.
dcpbarrington

[dave.kilroy]

Hi dcpbarrington

There is no built-in capability to do this, we each roll-our-own! Actually, having said that some people create two different cards for portrait and landscape orientations with controls set up as they want it (but this is not ideal as different cards would be needed for different aspect ratios/sizes) ... much better to get your app to respond to the change in orientation programatically ...

For example, if you want to make sure that a navigation bar (a graphic) occupies the full width of the screen (whether in portrait or landscape orientation), is always pinned to the top of the screen and always takes up 8% of the height of the screen you could write something like this in your stack's resizeStack handler:

Code: Select all

on resizeStack
put the width of this stack into tWidth
put the height of this stack into tHeight
put round(tHeight * 0.08) into tNavBarHeight
set the width of grc "NavBarGraphic" to tWidth
set the height of grc "NavBarGraphic" to tNavBarHeight
set the topLeft of grc "NavBarGraphic" to 0,0
end resizeStack

Note: this is pseudo code and hasn't been tested

Here is a lesson all about resizeStack http://lessons.runrev.com/s/lessons/m/4 ... esizestack

Kind regards

Dave

[dcpbarrington]

Dave. Thank you for your reply.

Version 6.5.2 does a good job of scaling the objects on the screen, so I don't have to adjust all the objects on all the cards.
The challenge was that when you turn the orientation of the device, the size of the stack did not change so there was a very large black letterbox on each side.

Here is what I did to resolve the issue for a stack that was initialy 480x800.

Code: Select all

local sOrientationSetting

on orientationChanged
   if environment() is not "mobile" then exit orientationChanged
   
   put mobileDeviceOrientation() into tOrientation
   if tOrientation contains "portrait" AND sOrientationSetting <> "portrait" then 
      set the width of this stack to 480
      set the height of this stack to 800
      put "portrait" into sOrientationSetting
   else if tOrientation contains "landscape" AND sOrientationSetting <> "landscape" then
      set the width of this stack to 800
      set the height of this stack to 480
      put "landscape" into sOrientationSetting
   else -- Set the the previous setting
      if sOrientationSetting = "portrait" then
         set the width of this stack to 480
         set the height of this stack to 800
      else if sOrientationSetting = "landscape" then
         set the width of this stack to 800
         set the height of this stack to 480
      end if
   end if
   
end orientationChanged