Page 1 of 1
Responsive Layout
Posted: Mon Oct 05, 2015 11:25 pm
by 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...
Re: Responsive Layout
Posted: Tue Oct 06, 2015 2:00 pm
by 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.