public class LayeredLayout extends Layout
The LayeredLayout
places the components in order one on top of the
other and sizes them all to the size of the largest component. This is useful
when trying to create an overlay on top of an existing component. E.g. an "x"
button to allow removing the component as shown here
The code to generate this UI is slightly complex and contains very little relevant pieces. The only truly relevant piece the last line of code:
*We are doing three distinct things here:
LayeredLaout
Container
and invoking `add` twice.
A common use case for LayeredLayout
is the iOS carousel effect which
we can achieve by combing the LayeredLayout
with
Tabs
.
Notice that the layered layout sizes all components to the exact same size
one on top of the other. It usually requires that we use another container
within; in order to position the components correctly.
Forms have a built in layered layout that you can access via
`getLayeredPane()`, this allows you to overlay elements on top of the content
pane.
The layered pane is used internally by components such as InteractionDialog
,
com.codename1.u./AutoCompleteTextField
etc.
Warning: Placing native widgets within a layered layout is problematic due to
the behavior of peer components. Sample of peer components include the
BrowserComponent
, video playback etc.
This layout optionally supports insets for laying out its children. Use of insets can allow you to achieve precise placement of components while adjusting properly to screen resizing.
Insets may be either fixed or flexible. Fixed insets may be specified in pixels (UNIT_PIXELS
),
millimetres (UNIT_DIPS
), or percentage (UNIT_PERCENT
). Insets may also be specified as just "auto" (UNIT_AUTO
),
in which case it is considered to be flexible (it will adapt to the component size and other insets).
Insets may also be anchored to a "reference component" so that it will always be measured from that reference component.
Adding a button to the top right of the parent:
Container cnt = new Container(new LayeredLayout());
LayeredLayout ll = (LayeredLayout)cnt.getLayout();
Button btn = new Button("My Button");
cnt.add(btn);
ll.setInsets(btn, "0 0 auto auto");
// NOTE: Insets are expressed in same order as "margin" in CSS. Clockwise starting on top.
Changing top inset to 2mm, and right inset to 1mm:
ll.setInsets(btn, "2mm 1mm auto auto");
Using percentage insets:
ll.setInsets(btn, "25% 25% auto auto");
NOTE: When using percent units, the percentage is always in terms of the "reference box" of the component. The "reference box" is the bounding rectangle from which the insets are measured. If none of the insets is anchored to a reference component, then the bounding box will simply be the inner bounds of the parent container (i.e. the bounds of the inside padding in the container.
Using "auto" insets
An "auto" inset is an inset that is flexible. If all 4 insets are set to auto, then the component will tend to the centre of the parent component, and its size will be the component's preferred size (though the size will be bounded by the size of the component's reference box). If one inset is fixed, and the opposite inset is "auto", then the fixed inset and the component's preferred size will dictate the' calculated size of the inset.
Insets may also have reference componnents. E.g. If you want a button to be anchored to the right side of a search field, you could make the button's left inset "reference" the text field. This would be achieved as follows:
Container cnt = new Container(new LayeredLayout());
LayeredLayout ll = (LayeredLayout)cnt.getLayout();
TextField searchField = new TextField();
Button btn = new Button("Search");
cnt.add(searchField).add(btn);
ll
.setInsets(searchField, "1mm auto auto auto")
.setInsets(btn, "0 auto auto 0")
.setReferenceComponentLeft(btn, searchField, 1f)
.setReferenceComponentTop(btn, searchField, 0);
In the above example we set the search field to be anchored to the top of its parent (1mm inset), but for all other insets to be auto. This will result it being centered horizontally in its parent. We then anchor the button to the left and top of the search field so that the top and left insets of button will always be calculated relative to the position of searchField. In particular since the button has top and left insets of 0, the button will always be placed just to the right of the search field, with its top edge aligned with the top edge of search field.
Reference Positions
The second parameter of setReferenceComponentLeft(btn, searchField, 1f)
is the reference position and it dictates
which edge of the reference component (searchField) the inset should be anchored to. A value of 1 indicates that
it should anchor to the opposite side of the inset (e.g. in this case it is the "left" inset we are setting, so the 1
value dictates that it is anchored to the "right" side of the text field. A value of 0 indicates that it should anchor
to the same side as the inset. This is why we used 0 in the subsequent call to .setReferenceComponentTop(btn, searchField, 0);
,
because we want to anchor the "top" inset of button to the "top" edge of searchField.
Modifier and Type | Class and Description |
---|---|
class |
LayeredLayout.LayeredLayoutConstraint
A class that encapsulates the insets for a component in layered layout.
|
Modifier and Type | Field and Description |
---|---|
static byte |
UNIT_AUTO
Unit used for insets.
|
static byte |
UNIT_BASELINE
Unit used for insets.
|
static byte |
UNIT_DIPS
Unit used for insets.
|
static byte |
UNIT_PERCENT
Unit used for insets.
|
static byte |
UNIT_PIXELS
Unit used for insets.
|
Constructor and Description |
---|
LayeredLayout() |
Modifier and Type | Method and Description |
---|---|
void |
addLayoutComponent(Object value,
Component comp,
Container c)
Some layouts can optionally track the addition of elements with meta-data
that allows the user to "hint" on object positioning.
|
Object |
cloneConstraint(Object constraint)
Makes a copy of the given constraint.
|
LayeredLayout.LayeredLayoutConstraint |
createConstraint()
Creates a new
LayeredLayout.LayeredLayoutConstraint |
LayeredLayout.LayeredLayoutConstraint |
createConstraint(String constraint)
Creates a default layered layout constraint.
|
static Container |
encloseIn(Component... cmps)
Shorthand for Container.encloseIn(new LayeredLayout(), cmps);
|
String |
getBottomInsetAsString(Component cmp)
Gets the bottom inset as a string.
|
protected Component[] |
getChildrenInTraversalOrder(Container parent)
Gets the children of the parent container in the order that they should
be traversed when tabbing through a form.
|
Object |
getComponentConstraint(Component comp)
Gets the LayeredLayoutConstraint associated with the given component.
|
LayeredLayout.LayeredLayoutConstraint.Inset |
getInset(Component cmp,
int side)
Gets an
LayeredLayout.LayeredLayoutConstraint.Inset associated with the provided component |
String |
getInsetsAsString(Component cmp,
boolean withLabels)
Returns the insets for the given component as a string.
|
LayeredLayout.LayeredLayoutConstraint |
getLayeredLayoutConstraint(Component cmp)
Wraps
getComponentConstraint(com.codename1.ui.Component) and casts it
directly to LayeredLayout.LayeredLayoutConstraint . |
String |
getLeftInsetAsString(Component cmp)
Gets the left inset as a string.
|
LayeredLayout.LayeredLayoutConstraint |
getOrCreateConstraint(Component cmp)
If the given component already has a LayeredLayoutConstraint, then this
will return it.
|
float |
getPercentInsetAnchorHorizontal(Component cmp)
|
float |
getPercentInsetAnchorVertical(Component cmp)
|
float |
getPreferredHeightMM()
The preferred height in MM of this layout which serves as a sort of minimum
height even when the components in the layout don't demand space.
|
Dimension |
getPreferredSize(Container parent)
Returns the container preferred size
|
float |
getPreferredWidthMM()
The preferred width (in MM) of this layout which serves as a sort of minimum
width even when the components in the layout don't demand space.
|
String |
getRightInsetAsString(Component cmp)
Gets the right inset as a string.
|
String |
getTopInsetAsString(Component cmp)
Gets the top inset as a string.
|
boolean |
isOverlapSupported()
This method returns true if the Layout allows Components to
Overlap.
|
void |
layoutContainer(Container parent)
Layout the given parent container children
|
boolean |
obscuresPotential(Container parent)
Some layout managers can obscure their child components in some cases this
returns true if the basic underpinnings are in place for that.
|
boolean |
overridesTabIndices(Container parent)
If a layout specifies a different traversal order of its components than the
component index, then it should override this method to return true, and
it should also override
Layout.getChildrenInTraversalOrder(com.codename1.ui.Container)
to set the tab indices of a container's children. |
LayeredLayout |
setInsetBottom(Component cmp,
String inset)
Sets the top inset for this component to the prescribed value.
|
LayeredLayout |
setInsetLeft(Component cmp,
String inset)
Sets the left inset for this component to the prescribed value.
|
LayeredLayout |
setInsetRight(Component cmp,
String inset)
Sets the right inset for this component to the prescribed value.
|
LayeredLayout |
setInsets(Component cmp,
String insets)
Sets the insets for the component cmp to the values specified in insets.
|
LayeredLayout |
setInsetTop(Component cmp,
String inset)
Sets the top inset for this component to the prescribed value.
|
LayeredLayout |
setPercentInsetAnchorHorizontal(Component cmp,
float anchor)
|
LayeredLayout |
setPercentInsetAnchorVertical(Component cmp,
float anchor)
|
void |
setPreferredHeightMM(float mm)
Sets the preferred height of this layout in MM.
|
void |
setPreferredSizeMM(float width,
float height)
Sets the preferred size of this layout in MM.
|
void |
setPreferredWidthMM(float mm)
Sets the preferred width of this layout in MM.
|
LayeredLayout |
setReferenceComponentBottom(Component cmp,
Component referenceComponent)
Sets the reference component for the bottom inset of the given component.
|
LayeredLayout |
setReferenceComponentBottom(Component cmp,
Component referenceComponent,
float position)
Sets the reference component for the bottom inset of the given component.
|
LayeredLayout |
setReferenceComponentLeft(Component cmp,
Component referenceComponent)
Sets the reference component for the left inset of the given component.
|
LayeredLayout |
setReferenceComponentLeft(Component cmp,
Component referenceComponent,
float position)
Sets the reference component for the left inset of the given component.
|
LayeredLayout |
setReferenceComponentRight(Component cmp,
Component referenceComponent)
Sets the reference component for the right inset of the given component.
|
LayeredLayout |
setReferenceComponentRight(Component cmp,
Component referenceComponent,
float position)
Sets the reference component for the right inset of the given component.
|
LayeredLayout |
setReferenceComponents(Component cmp,
Component... referenceComponents)
Sets the reference components for the insets of cmp.
|
LayeredLayout |
setReferenceComponents(Component cmp,
String refs)
Sets the reference components for this component as a string of 1 to 4 component indices separated by spaces.
|
LayeredLayout |
setReferenceComponentTop(Component cmp,
Component referenceComponent)
Sets the reference component for the top inset of the given component.
|
LayeredLayout |
setReferenceComponentTop(Component cmp,
Component referenceComponent,
float position)
Sets the reference component for the top inset of the given component.
|
LayeredLayout |
setReferencePositionBottom(Component cmp,
float position)
Sets the bottom inset reference position.
|
LayeredLayout |
setReferencePositionLeft(Component cmp,
float position)
Sets the left inset reference position.
|
LayeredLayout |
setReferencePositionRight(Component cmp,
float position)
Sets the right inset reference position.
|
LayeredLayout |
setReferencePositions(Component cmp,
float... referencePositions)
Sets the reference positions for reference components.
|
LayeredLayout |
setReferencePositions(Component cmp,
String positions)
Sets the reference positions for reference components.
|
LayeredLayout |
setReferencePositionTop(Component cmp,
float position)
Sets the top inset reference position.
|
String |
toString()
Returns a string representation of the object.
|
equals, hashCode, isConstraintTracking, removeLayoutComponent, updateTabIndices
public static final byte UNIT_DIPS
public static final byte UNIT_PIXELS
public static final byte UNIT_PERCENT
public static final byte UNIT_AUTO
public static final byte UNIT_BASELINE
public void setPreferredSizeMM(float width, float height)
width
- The preferred width in MM.height
- The preferred height in MM.public float getPreferredHeightMM()
The actual preferred height will be the max of this value and the calculated preferred height based on the container's children.
public void setPreferredHeightMM(float mm)
mm
- public void setPreferredWidthMM(float mm)
mm
- public float getPreferredWidthMM()
The actual preferred width will be the max of this value and the calculated preferred width based on the container's children.
public void addLayoutComponent(Object value, Component comp, Container c)
Layout
addLayoutComponent
in class Layout
value
- optional meta data information, like alignment orientationcomp
- the added component to the layoutc
- the parent containerpublic LayeredLayout.LayeredLayoutConstraint getLayeredLayoutConstraint(Component cmp)
getComponentConstraint(com.codename1.ui.Component)
and casts it
directly to LayeredLayout.LayeredLayoutConstraint
.cmp
- The component whose constraint we want to retrieve.public Object cloneConstraint(Object constraint)
cloneConstraint
in class Layout
constraint
- The constraint to copy.public Object getComponentConstraint(Component comp)
getComponentConstraint
in class Layout
comp
- public LayeredLayout.LayeredLayoutConstraint createConstraint(String constraint)
constraint
- public LayeredLayout.LayeredLayoutConstraint getOrCreateConstraint(Component cmp)
cmp
- The component whose constraint we wish to retrieve.public LayeredLayout.LayeredLayoutConstraint.Inset getInset(Component cmp, int side)
LayeredLayout.LayeredLayoutConstraint.Inset
associated with the provided componentcmp
- The component whose inset we wish to retrieve.side
- The side of the inset. One of Component.TOP
, Component.LEFT
, Component.BOTTOM
or Component.RIGHT
.LayeredLayout.LayeredLayoutConstraint.Inset
for the given side of the component.public String getInsetsAsString(Component cmp, boolean withLabels)
cmp
- The component whose insets we wish to retrieve.withLabels
- If false, then this returns a string of the format "top right bottom left"
e.g "2mm 2mm 2mm 2mm"
. If true, then it will be formatted like CSS properties: "top:2mm; right:2mm; bottom:2mm; left:2mm"
.public String getTopInsetAsString(Component cmp)
cmp
- The component whose inset we wish to retrieve.public String getBottomInsetAsString(Component cmp)
cmp
- The component whose inset we wish to retrieve.public String getLeftInsetAsString(Component cmp)
cmp
- The component whose inset we wish to retrieve.public String getRightInsetAsString(Component cmp)
cmp
- The component whose inset we wish to retrieve.public LayeredLayout setInsets(Component cmp, String insets)
cmp
- The component whose insets we wish to set.insets
- The insets expressed as a string. See LayeredLayout.LayeredLayoutConstraint.setInsets(java.lang.String)
for
details on the format of this parameter.For details on the {@literal insets} parameter
format.
public LayeredLayout setInsetTop(Component cmp, String inset)
cmp
- The component whose inset we wish to set.inset
- The inset value, including unit. Units are Percent (%), Millimetres (mm), Pixels (px), and "auto". E.g. the
following insets values would all be acceptable:
"2mm"
= 2 millimetres"2px"
= 2 pixels"25%"
= 25 percent."auto"
= Flexible insetpublic LayeredLayout setInsetBottom(Component cmp, String inset)
cmp
- The component whose inset we wish to set.inset
- The inset value, including unit. Units are Percent (%), Millimetres (mm), Pixels (px), and "auto". E.g. the
following insets values would all be acceptable:
"2mm"
= 2 millimetres"2px"
= 2 pixels"25%"
= 25 percent."auto"
= Flexible insetpublic LayeredLayout setInsetLeft(Component cmp, String inset)
cmp
- The component whose inset we wish to set.inset
- The inset value, including unit. Units are Percent (%), Millimetres (mm), Pixels (px), and "auto". E.g. the
following insets values would all be acceptable:
"2mm"
= 2 millimetres"2px"
= 2 pixels"25%"
= 25 percent."auto"
= Flexible insetpublic LayeredLayout setInsetRight(Component cmp, String inset)
cmp
- The component whose inset we wish to set.inset
- The inset value, including unit. Units are Percent (%), Millimetres (mm), Pixels (px), and "auto". E.g. the
following insets values would all be acceptable:
"2mm"
= 2 millimetres"2px"
= 2 pixels"25%"
= 25 percent."auto"
= Flexible insetpublic LayeredLayout setReferenceComponents(Component cmp, Component... referenceComponents)
LayeredLayout.LayeredLayoutConstraint.setReferenceComponents(com.codename1.ui.Component...)
for a full description of the parameters.cmp
- The component whose reference components we wish to check.referenceComponents
- The reference components. This var arg may contain 1 to 4 values. See LayeredLayout.LayeredLayoutConstraint.setReferenceComponents(com.codename1.ui.Component...)
for a full description.public LayeredLayout setReferenceComponents(Component cmp, String refs)
LayeredLayout.LayeredLayoutConstraint.setReferenceComponentIndices(com.codename1.ui.Container, java.lang.String)
for a description of the refs parameter.cmp
- The component whose references we're setting.refs
- Reference components as a string of component indices in the parent.public LayeredLayout setReferenceComponentTop(Component cmp, Component referenceComponent)
cmp
- The component whose insets we are manipulating.referenceComponent
- The component to anchor the inset to.public LayeredLayout setReferenceComponentBottom(Component cmp, Component referenceComponent)
cmp
- The component whose insets we are manipulating.referenceComponent
- The component to anchor the inset to.public LayeredLayout setReferenceComponentLeft(Component cmp, Component referenceComponent)
cmp
- The component whose insets we are manipulating.referenceComponent
- The component to anchor the inset to.public LayeredLayout setReferenceComponentRight(Component cmp, Component referenceComponent)
cmp
- The component whose insets we are manipulating.referenceComponent
- The component to anchor the inset to.public LayeredLayout setReferencePositions(Component cmp, float... referencePositions)
LayeredLayout.LayeredLayoutConstraint.setReferencePositions(float...)
for a description of the parameters.cmp
- The component whose insets we are manipulating.referencePositions
- The reference positions for the reference components. See LayeredLayout.LayeredLayoutConstraint.setReferencePositions(float...)
for a full description of this parameter.public LayeredLayout setReferencePositions(Component cmp, String positions)
LayeredLayout.LayeredLayoutConstraint.setReferencePositions(float...)
for a description of the parameters.cmp
- The component whose insets we are manipulating.positions
- The reference positions for the reference components. See LayeredLayout.LayeredLayoutConstraint.setReferencePositions(float...)
for a full description of this parameter.public LayeredLayout setReferencePositionTop(Component cmp, float position)
cmp
- The component whose insets were are manipulating.position
- The position. See LayeredLayout.LayeredLayoutConstraint.setReferencePositions(float...)
for a full
description of the possible values here.public LayeredLayout setReferenceComponentTop(Component cmp, Component referenceComponent, float position)
cmp
- The component whose insets we are manipulating.referenceComponent
- The component to which the inset should be anchored.position
- The position of the reference anchor. See LayeredLayout.LayeredLayoutConstraint.setReferencePositions(float...)
for a full description of reference positions.public LayeredLayout setReferencePositionBottom(Component cmp, float position)
cmp
- The component whose insets were are manipulating.position
- The position. See LayeredLayout.LayeredLayoutConstraint.setReferencePositions(float...)
for a full
description of the possible values here.public LayeredLayout setReferenceComponentBottom(Component cmp, Component referenceComponent, float position)
cmp
- The component whose insets we are manipulating.referenceComponent
- The component to which the inset should be anchored.position
- The position of the reference anchor. See LayeredLayout.LayeredLayoutConstraint.setReferencePositions(float...)
for a full description of reference positions.public LayeredLayout setReferencePositionLeft(Component cmp, float position)
cmp
- The component whose insets were are manipulating.position
- The position. See LayeredLayout.LayeredLayoutConstraint.setReferencePositions(float...)
for a full
description of the possible values here.public LayeredLayout setReferenceComponentLeft(Component cmp, Component referenceComponent, float position)
cmp
- The component whose insets we are manipulating.referenceComponent
- The component to which the inset should be anchored.position
- The position of the reference anchor. See LayeredLayout.LayeredLayoutConstraint.setReferencePositions(float...)
for a full description of reference positions.public LayeredLayout setReferencePositionRight(Component cmp, float position)
cmp
- The component whose insets were are manipulating.position
- The position. See LayeredLayout.LayeredLayoutConstraint.setReferencePositions(float...)
for a full
description of the possible values here.public LayeredLayout setReferenceComponentRight(Component cmp, Component referenceComponent, float position)
cmp
- The component whose insets we are manipulating.referenceComponent
- The component to which the inset should be anchored.position
- The position of the reference anchor. See LayeredLayout.LayeredLayoutConstraint.setReferencePositions(float...)
for a full description of reference positions.public LayeredLayout setPercentInsetAnchorHorizontal(Component cmp, float anchor)
cmp
- anchor
- public LayeredLayout setPercentInsetAnchorVertical(Component cmp, float anchor)
cmp
- anchor
- public float getPercentInsetAnchorHorizontal(Component cmp)
cmp
- public float getPercentInsetAnchorVertical(Component cmp)
cmp
- public void layoutContainer(Container parent)
layoutContainer
in class Layout
parent
- the given parent containerpublic Dimension getPreferredSize(Container parent)
getPreferredSize
in class Layout
parent
- the parent containerpublic String toString()
public boolean isOverlapSupported()
isOverlapSupported
in class Layout
public boolean obscuresPotential(Container parent)
obscuresPotential
in class Layout
parent
- parent containerpublic static Container encloseIn(Component... cmps)
cmps
- the components to add to a new layered layout containerpublic LayeredLayout.LayeredLayoutConstraint createConstraint()
LayeredLayout.LayeredLayoutConstraint
public boolean overridesTabIndices(Container parent)
Layout
Layout.getChildrenInTraversalOrder(com.codename1.ui.Container)
to set the tab indices of a container's children.overridesTabIndices
in class Layout
parent
- The parent component.protected Component[] getChildrenInTraversalOrder(Container parent)
Layout
This should only be overridden if the Layout defines a different traversal order than the standard index order.
Layouts that implement this method, should override the Layout.overridesTabIndices(com.codename1.ui.Container)
method to return true.
getChildrenInTraversalOrder
in class Layout