Mobile: different orientations & resolutions, different card

LiveCode is the premier environment for creating multi-platform solutions for all major operating systems - Windows, Mac OS X, Linux, the Web, Server environments and Mobile platforms. Brand new to LiveCode? Welcome!

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

Post Reply
FabricioRocha
Posts: 25
Joined: Sun Jan 19, 2014 8:53 pm

Mobile: different orientations & resolutions, different card

Post by FabricioRocha » Wed Mar 26, 2014 4:52 pm

Hi folks, sorry if this is not the appropriate forum section for this question.

There are lots of mobile applications which show different layouts according to the device´s resolution, size and orientation. One layout for portrait phone, other for landscape phone, another one for landscape tablet.

I´ve been reading everything I find about Livecode and also about Android and all this stuff about screen sizes and resolutions still sounds mind-bending. Android docs talk about "fragmented layouts" and such. In my Livecode readings I did not find references to this kind of interface design.

So I´ve been thinking how could a Livecode mobile app change its interface according to the device size and orientation. I presume one can use cards from different stacks according to the variables, for example. But with so many screens and dpi´s, how can the app detect whether it´s running on a landscape phone or a landscape tablet, for example? And is the "alternative stacks" approach a good solution?

Thanks and regards!

Fabricio Rocha
Brasilia, Brasil

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7389
Joined: Sat Apr 08, 2006 8:31 pm
Contact:

Re: Mobile: different orientations & resolutions, different

Post by jacque » Thu Mar 27, 2014 5:17 pm

LiveCode can deal with different screen sizes and resolutions automatically, you only need to set up a few lines of script. See the dictionary for "fullscreenmode", which is often all you need. There are also several lessons on how to do it, try this search and look at the top three or four hits:
http://lessons.runrev.com/s/lessons/sea ... mit=Search
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

FabricioRocha
Posts: 25
Joined: Sun Jan 19, 2014 8:53 pm

Re: Mobile: different orientations & resolutions, different

Post by FabricioRocha » Fri Mar 28, 2014 3:28 pm

Thank you very much, Jacque. However I had already read most of this material, each of them some 5 times already (they're becoming a daily ritual, actually).

The question is not about simple resizing and scaling of elements, but about a really different layout according to the available space. Like in those apps which present a single pane on a phone, and a two-panes layout on a tablet. I wonder how to implement such thing in LiveCode. Maybe including different stacks in the application, but I'd like to know how the experienced folks deal with this.

By the way, are the fonts also automatically scaled during runtime? Do we have to worry about that "sp" stuff or not?

Thank you once again!

Fabricio Rocha
Brasilia, Brasil

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7389
Joined: Sat Apr 08, 2006 8:31 pm
Contact:

Re: Mobile: different orientations & resolutions, different

Post by jacque » Sat Mar 29, 2014 6:09 am

Fonts are scaled automatically, it's pretty impressive actually.

Some people do create two stacks for different layouts but I'm not sure you can get a smooth rotation if you do that. I always write a resizeStack handler that basically moves and resizes every object or group so it fits in a different location on the card.

One shortcut is to lay out everything manually and then store the rect of each object as a custom property of the object itself. Use one property for portrait and another for landscape. Then the resizeStack handler can loop through the controls and set each one to the appropriate rect. I haven't done it since auto-scaling was implemented but it should work; the engine should convert the basic rectangle to the scaled version automatically. Try a test with a simple stack with only a few controls to get a feel for it.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

Post Reply