Page 1 of 1

Mobile: different orientations & resolutions, different card

Posted: Wed Mar 26, 2014 4:52 pm
by FabricioRocha
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

Re: Mobile: different orientations & resolutions, different

Posted: Thu Mar 27, 2014 5:17 pm
by jacque
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

Re: Mobile: different orientations & resolutions, different

Posted: Fri Mar 28, 2014 3:28 pm
by FabricioRocha
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

Re: Mobile: different orientations & resolutions, different

Posted: Sat Mar 29, 2014 6:09 am
by jacque
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.