Responsive Layout

[CoreySchroeder]

I'm curious as to how you can create a full screen application that will adapt to various screen resolutions.
Ideally, I would like my app to look consistent across all of the common resolutions.

Is this something you have to "hard code" into the app - like get the resolution the video card is displaying, and adjust your UI accordingly in code when the stack loads?
Or is there a less complicated way to handle this?

I appreciate all of the help you guys lend.
I promise my noob questions will become less frequent.... One day...

[zaxos]

Hi CoreySchroeder, you dont necessarily have to find out the resolution of the computer, all you need is the size of the stack and then you adapt your controls based on the size of it. The way i do it is simple, i will show a quick example below:
Lets say we have 3 fields and we want these fields to have equal height on the stack.

Code: Select all

on resizeStack
   repeat with x = 1 to 3
      set the height of field x to the height of this card/3
      set the width of field x to the width of this card
      set the left of fld x to the left of this card
   end repeat
   set the top of fld 1 to the top of this card
   set the top of fld 2 to the bottom of fld 1
   set the top of fld 3 to the bottom of fld 2
end resizeStack

In case you dont want them to be equal:

Code: Select all

on resizeStack
   repeat with x = 1 to 3
      set the height of fld x to (the height of this card*20)/100 -- 20 percent of the cards height
      set the width of fld x to the width of this card
      set the left of fld x to the left of this card
   end repeat
-- Centering the fields to the card
   set the top of fld 1 to (the height of this card/2)-(the height of fld 1)-(the height of fld 1/2)-2
   set the top of fld 2 to (the height of this card/2)-(the height of fld 2/2)
   set the top of fld 3 to (the height of this card/2)-(the height of fld 3/2)+(the height of fld 1)+2
end resizeStack

Try these, add 3 fields in an empty stack, copy the script into stack/card and resize the stack.
Same process for all other controls, of course things get more complicated with more controls on the stack.