How to use breakpoints in Responsive Layout
When you are using Responsive Layout on mobile devices, you might want to adjust your layouts to allow space for the phone top menu items in portrait mode but have no extra space allowance for landscape mode when these items are not shown. To do this you can use the Responsive Layout breakpoints. Note: in this context, breakpoints are unrelated to the breakpoints you would use for debugging in the script editor.
This lesson assumes you already have the Responsive Layout addon and the Magic Palette needed to use it.
There is a sample test stack available here.
Set up a test stack
In LiveCode, create a new blank stack and drag out a rectangle graphic (1). From your Plugins menu (2) open Magic Palette (3).
Select the Magic Palette settings
In Magic Palette, select "fixed" (1) from the Type dropdown, and enter 0 in the Left (2) and Right (3) boxes. You'll see your rectangle stretch the width of the card.
Position your object for portrait mode
At the bottom of Magic Palette, select the mobile environment (1). The orientation of the screen can be toggled between portrait and landscape with the Orientation button (2).
Your stack now should look something like this:
Make sure none of the options under "Properties saved at this breakpoint" are selected initially. Adjust the position of the rectangle so that the top is at the desired location (1), then click on the "top" option in the "Properties saved at this breakpoint" list so that it is now highlighted (2). This saves the top position of the rectangle when the device is in the mobile portrait orientation.
Position your object for Landscape mode
Click on the Orientation icon in the Magic Palette (1). Your stack will flip orientation. Unselect "top" from the "Properties saved at this breakpoint" list. Adjust the position of the rectangle so the top is at the new desired location for this orientation (2), then reselect "top" (3) from the "Properties saved at this breakpoint" list so that it is highlighted again. Now the rectangle will be at this top position when the device is at the mobile landscape breakpoint.
These steps can then be repeated for any other breakpoints, for example to set the rectangle's top position for the tablet vertical orientation.
James Hale
Thanks Holy,
At last an explanation of breakpoints.
So in summary:
1. Breakpoints are triggers fired when the orientation changes.
2. Use them to adjust control positions based on orientation changes.
3. To use:
a. select control.
b. select the orientation desired in magic palette.
c. select any settings not concerned with orientation changes
d. position control for that specific orientation
e. select breakpoint property that will change with orientation
f. change to new orientation
g. Unselect property previously selected
h. reposition control for this new orientation
i. reselect the associated breakpoint property.
yes?
James Hale
added mobile allowed orientations to open stack and ran in iPhone sim.
doesn't work. :-(
Heather Laine
We're investigating. Once we have a solution we'll update this lesson.