public class LayeredLayout
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:
Form hi = new Form("Layered Layout");
int w = Math.min(Display.getInstance().getDisplayWidth(), Display.getInstance().getDisplayHeight());
Button settingsLabel = new Button("");
Style settingsStyle = settingsLabel.getAllStyles();
settingsStyle.setFgColor(0xff);
settingsStyle.setBorder(null);
settingsStyle.setBgColor(0xff00);
settingsStyle.setBgTransparency(255);
settingsStyle.setFont(settingsLabel.getUnselectedStyle().getFont().derive(w / 3, Font.STYLE_PLAIN));
FontImage.setMaterialIcon(settingsLabel, FontImage.MATERIAL_SETTINGS);
Button close = new Button("");
close.setUIID("Container");
close.getAllStyles().setFgColor(0xff0000);
FontImage.setMaterialIcon(close, FontImage.MATERIAL_CLOSE);
hi.add(LayeredLayout.encloseIn(settingsLabel,
FlowLayout.encloseRight(close)));
```*
We are doing three distinct things here:
.
- We are adding a layered layout to the form.
- We are creating a layered layout and placing two components within. This
would be the equivalent of just creating a `LayeredLaout`
`com.codename1.ui.Container` and invoking `add` twice.
.*
- We use
https://www.codenameone.com/javadoc/com/codename1/ui/layouts/FlowLayout.html[FlowLayout]
to position the `X` close button in the right position.
A common use case for `LayeredLayout` is the iOS carousel effect which
we can achieve by combing the `LayeredLayout` with
`com.codename1.ui.Tabs`.
```java
Form hi = new Form("Swipe Tabs", new LayeredLayout());
Tabs t = new Tabs();
t.hideTabs();
Style s = UIManager.getInstance().getComponentStyle("Button");
FontImage radioEmptyImage = FontImage.createMaterial(FontImage.MATERIAL_RADIO_BUTTON_UNCHECKED, s);
FontImage radioFullImage = FontImage.createMaterial(FontImage.MATERIAL_RADIO_BUTTON_CHECKED, s);
((DefaultLookAndFeel)UIManager.getInstance().getLookAndFeel()).setRadioButtonImages(radioFullImage, radioEmptyImage, radioFullImage, radioEmptyImage);
Container container1 = BoxLayout.encloseY(new Label("Swipe the tab to see more"),
new Label("You can put anything here"));
t.addTab("Tab1", container1);
t.addTab("Tab2", new SpanLabel("Some text directly in the tab"));
RadioButton firstTab = new RadioButton("");
RadioButton secondTab = new RadioButton("");
firstTab.setUIID("Container");
secondTab.setUIID("Container");
new ButtonGroup(firstTab, secondTab);
firstTab.setSelected(true);
Container tabsFlow = FlowLayout.encloseCenter(firstTab, secondTab);
hi.add(t);
hi.add(BorderLayout.south(tabsFlow));
t.addSelectionListener((i1, i2) -> {
switch(i2) {
case 0:
if(!firstTab.isSelected()) {
firstTab.setSelected(true);
}
break;
case 1:
if(!secondTab.isSelected()) {
secondTab.setSelected(true);
}
break;
}
});
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 com.codename1.components.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
com.codename1.ui.BrowserComponent, video playback etc.
Insets
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.
Insets Example
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.
Reference Components
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.
Nested types
class LayeredLayout.LayeredLayoutConstraint | A class that encapsulates the insets for a component in layered layout. |
Fields
public static final byte UNIT_DIPS = 2 | Unit used for insets. |
public static final byte UNIT_PIXELS = 0 | Unit used for insets. |
public static final byte UNIT_PERCENT = 1 | Unit used for insets. |
public static final byte UNIT_AUTO = 100 | Unit used for insets. |
public static final byte UNIT_BASELINE = 101 | Unit used for insets. |
Constructors
public LayeredLayout() |
Methods
Inherited methods
Field details
UNIT_DIPS
public static final byte UNIT_DIPS = 2UNIT_PIXELS
public static final byte UNIT_PIXELS = 0UNIT_PERCENT
public static final byte UNIT_PERCENT = 1UNIT_AUTO
public static final byte UNIT_AUTO = 100UNIT_BASELINE
public static final byte UNIT_BASELINE = 101Constructor details
LayeredLayout
public LayeredLayout()Method details
encloseIn
public static Container encloseIn(Component... cmps)Parameters
cmpsComponent...- the components to add to a new layered layout container
Returns
setPreferredSizeMM
public void setPreferredSizeMM(float width, float height)Parameters
widthfloat- The preferred width in MM.
heightfloat- The preferred height in MM.
getPreferredHeightMM
public 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.
The actual preferred height will be the max of this value and the calculated preferred height based on the container’s children.
setPreferredHeightMM
public void setPreferredHeightMM(float mm)getPreferredWidthMM
public 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.
The actual preferred width will be the max of this value and the calculated preferred width based on the container’s children.
setPreferredWidthMM
public void setPreferredWidthMM(float mm)addLayoutComponent
public void addLayoutComponent(Object value, Component comp, Container c)Parameters
valueObject- optional meta data information, like alignment orientation
compComponent- the added component to the layout
cContainer- the parent container
getLayeredLayoutConstraint
public LayeredLayout.LayeredLayoutConstraint getLayeredLayoutConstraint(Component cmp)#getComponentConstraint(com.codename1.ui.Component) and casts it
directly to LayeredLayoutConstraint.Parameters
cmpComponent- The component whose constraint we want to retrieve.
Returns
cloneConstraint
public Object cloneConstraint(Object constraint)Parameters
constraintObject- The constraint to copy.
Returns
getComponentConstraint
public Object getComponentConstraint(Component comp)Gets the LayeredLayoutConstraint associated with the given component.
May return null if there is no constraint.
Returns
createConstraint
public LayeredLayout.LayeredLayoutConstraint createConstraint(String constraint)getOrCreateConstraint
public LayeredLayout.LayeredLayoutConstraint getOrCreateConstraint(Component cmp)Parameters
cmpComponent- The component whose constraint we wish to retrieve.
Returns
getInset
public LayeredLayout.LayeredLayoutConstraint.Inset getInset(Component cmp, int side)Inset associated with the provided componentParameters
cmpComponent- The component whose inset we wish to retrieve.
sideint- The side of the inset. One of
Component#TOP,Component#LEFT,Component#BOTTOMorComponent#RIGHT.
Returns
Inset for the given side of the component.getInsetsAsString
public String getInsetsAsString(Component cmp, boolean withLabels)Parameters
cmpComponent- The component whose insets we wish to retrieve.
withLabelsboolean- 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".
Returns
The insets associated with cmp as a string. Each inset will include the unit. E.g.:
- 2mm = 2 millimetres/dips
- 2px = 2 pixels
- 25% = 25%
- auto = Flexible inset
getTopInsetAsString
public String getTopInsetAsString(Component cmp)Gets the top inset as a string. Return value will include the unit, so the following are possible values:
2mm = 2 millimetres
2px = 2 pixels
25% = 25%
auto = Flexible Inset
Parameters
cmpComponent- The component whose inset we wish to retrieve.
Returns
getBottomInsetAsString
public String getBottomInsetAsString(Component cmp)Gets the bottom inset as a string. Return value will include the unit, so the following are possible values:
2mm = 2 millimetres
2px = 2 pixels
25% = 25%
auto = Flexible Inset
Parameters
cmpComponent- The component whose inset we wish to retrieve.
Returns
getLeftInsetAsString
public String getLeftInsetAsString(Component cmp)Gets the left inset as a string. Return value will include the unit, so the following are possible values:
2mm = 2 millimetres
2px = 2 pixels
25% = 25%
auto = Flexible Inset
Parameters
cmpComponent- The component whose inset we wish to retrieve.
Returns
getRightInsetAsString
public String getRightInsetAsString(Component cmp)Gets the right inset as a string. Return value will include the unit, so the following are possible values:
2mm = 2 millimetres
2px = 2 pixels
25% = 25%
auto = Flexible Inset
Parameters
cmpComponent- The component whose inset we wish to retrieve.
Returns
setInsets
public LayeredLayout setInsets(Component cmp, String insets)Parameters
cmpComponent- The component whose insets we wish to set.
insetsString- The insets expressed as a string. See
LayeredLayoutConstraint#setInsets(java.lang.String)for details on the format of this parameter.
Returns
See also
LayeredLayoutConstraint#setInsets(java.lang.String)details on the insets parameter format.
setInsetTop
public LayeredLayout setInsetTop(Component cmp, String inset)Parameters
cmpComponent- The component whose inset we wish to set.
insetString- The inset value, including unit. Units are Percent (%), Millimetres (mm), Pixels (px), and “auto”. E.g. the following insets values would all be acceptable:
Returns
setInsetBottom
public LayeredLayout setInsetBottom(Component cmp, String inset)Parameters
cmpComponent- The component whose inset we wish to set.
insetString- The inset value, including unit. Units are Percent (%), Millimetres (mm), Pixels (px), and “auto”. E.g. the following insets values would all be acceptable:
Returns
setInsetLeft
public LayeredLayout setInsetLeft(Component cmp, String inset)Parameters
cmpComponent- The component whose inset we wish to set.
insetString- The inset value, including unit. Units are Percent (%), Millimetres (mm), Pixels (px), and “auto”. E.g. the following insets values would all be acceptable:
Returns
setInsetRight
public LayeredLayout setInsetRight(Component cmp, String inset)Parameters
cmpComponent- The component whose inset we wish to set.
insetString- The inset value, including unit. Units are Percent (%), Millimetres (mm), Pixels (px), and “auto”. E.g. the following insets values would all be acceptable:
Returns
setReferenceComponents
public LayeredLayout setReferenceComponents(Component cmp, Component... referenceComponents)LayeredLayoutConstraint#setReferenceComponents(com.codename1.ui.Component...)
for a full description of the parameters.Parameters
cmpComponent- The component whose reference components we wish to check.
referenceComponentsComponent...- The reference components. This var arg may contain 1 to 4 values. See
LayeredLayoutConstraint#setReferenceComponents(com.codename1.ui.Component...)for a full description.
Returns
setReferenceComponents
public LayeredLayout setReferenceComponents(Component cmp, String refs)java.lang.String)
for a description of the refs parameter.Parameters
cmpComponent- The component whose references we’re setting.
refsString- Reference components as a string of component indices in the parent.
Returns
setReferenceComponentTop
public LayeredLayout setReferenceComponentTop(Component cmp, Component referenceComponent)Parameters
cmpComponent- The component whose insets we are manipulating.
referenceComponentComponent- The component to anchor the inset to.
Returns
setReferenceComponentBottom
public LayeredLayout setReferenceComponentBottom(Component cmp, Component referenceComponent)Parameters
cmpComponent- The component whose insets we are manipulating.
referenceComponentComponent- The component to anchor the inset to.
Returns
setReferenceComponentLeft
public LayeredLayout setReferenceComponentLeft(Component cmp, Component referenceComponent)Parameters
cmpComponent- The component whose insets we are manipulating.
referenceComponentComponent- The component to anchor the inset to.
Returns
setReferenceComponentRight
public LayeredLayout setReferenceComponentRight(Component cmp, Component referenceComponent)Parameters
cmpComponent- The component whose insets we are manipulating.
referenceComponentComponent- The component to anchor the inset to.
Returns
setReferencePositions
public LayeredLayout setReferencePositions(Component cmp, float... referencePositions)LayeredLayoutConstraint#setReferencePositions(float...)
for a description of the parameters.Parameters
cmpComponent- The component whose insets we are manipulating.
referencePositionsfloat...- The reference positions for the reference components. See
LayeredLayoutConstraint#setReferencePositions(float...)for a full description of this parameter.
Returns
setReferencePositions
public LayeredLayout setReferencePositions(Component cmp, String positions)LayeredLayoutConstraint#setReferencePositions(float...)
for a description of the parameters.Parameters
cmpComponent- The component whose insets we are manipulating.
positionsString- The reference positions for the reference components. See
LayeredLayoutConstraint#setReferencePositions(float...)for a full description of this parameter.
Returns
setReferencePositionTop
public LayeredLayout setReferencePositionTop(Component cmp, float position)Parameters
cmpComponent- The component whose insets were are manipulating.
positionfloat- The position. See
LayeredLayoutConstraint#setReferencePositions(float...)for a full description of the possible values here.
setReferenceComponentTop
public LayeredLayout setReferenceComponentTop(Component cmp, Component referenceComponent, float position)Parameters
cmpComponent- The component whose insets we are manipulating.
referenceComponentComponent- The component to which the inset should be anchored.
positionfloat- The position of the reference anchor. See
LayeredLayoutConstraint#setReferencePositions(float...)for a full description of reference positions.
setReferencePositionBottom
public LayeredLayout setReferencePositionBottom(Component cmp, float position)Parameters
cmpComponent- The component whose insets were are manipulating.
positionfloat- The position. See
LayeredLayoutConstraint#setReferencePositions(float...)for a full description of the possible values here.
setReferenceComponentBottom
public LayeredLayout setReferenceComponentBottom(Component cmp, Component referenceComponent, float position)Parameters
cmpComponent- The component whose insets we are manipulating.
referenceComponentComponent- The component to which the inset should be anchored.
positionfloat- The position of the reference anchor. See
LayeredLayoutConstraint#setReferencePositions(float...)for a full description of reference positions.
setReferencePositionLeft
public LayeredLayout setReferencePositionLeft(Component cmp, float position)Parameters
cmpComponent- The component whose insets were are manipulating.
positionfloat- The position. See
LayeredLayoutConstraint#setReferencePositions(float...)for a full description of the possible values here.
setReferenceComponentLeft
public LayeredLayout setReferenceComponentLeft(Component cmp, Component referenceComponent, float position)Parameters
cmpComponent- The component whose insets we are manipulating.
referenceComponentComponent- The component to which the inset should be anchored.
positionfloat- The position of the reference anchor. See
LayeredLayoutConstraint#setReferencePositions(float...)for a full description of reference positions.
setReferencePositionRight
public LayeredLayout setReferencePositionRight(Component cmp, float position)Parameters
cmpComponent- The component whose insets were are manipulating.
positionfloat- The position. See
LayeredLayoutConstraint#setReferencePositions(float...)for a full description of the possible values here.
setReferenceComponentRight
public LayeredLayout setReferenceComponentRight(Component cmp, Component referenceComponent, float position)Parameters
cmpComponent- The component whose insets we are manipulating.
referenceComponentComponent- The component to which the inset should be anchored.
positionfloat- The position of the reference anchor. See
LayeredLayoutConstraint#setReferencePositions(float...)for a full description of reference positions.
setPercentInsetAnchorHorizontal
public LayeredLayout setPercentInsetAnchorHorizontal(Component cmp, float anchor)LayeredLayoutConstraint#setPercentInsetAnchorHorizontal(float)Returns
setPercentInsetAnchorVertical
public LayeredLayout setPercentInsetAnchorVertical(Component cmp, float anchor)LayeredLayoutConstraint#setPercentInsetAnchorVertical(float)Returns
getPercentInsetAnchorHorizontal
public float getPercentInsetAnchorHorizontal(Component cmp)LayeredLayoutConstraint#getPercentInsetAnchorHorizontal()getPercentInsetAnchorVertical
public float getPercentInsetAnchorVertical(Component cmp)LayeredLayoutConstraint#getPercentInsetAnchorVertical()layoutContainer
public void layoutContainer(Container parent)Parameters
parentContainer- the given parent container
getPreferredSize
public Dimension getPreferredSize(Container parent)Parameters
parentContainer- the parent container
Returns
toString
public String toString()isOverlapSupported
public boolean isOverlapSupported()Returns
obscuresPotential
public boolean obscuresPotential(Container parent)Parameters
parentContainer- parent container
Returns
createConstraint
public LayeredLayout.LayeredLayoutConstraint createConstraint()LayeredLayoutConstraintoverridesTabIndices
public boolean overridesTabIndices(Container parent)#getChildrenInTraversalOrder(com.codename1.ui.Container)
to set the tab indices of a container’s children.Parameters
parentContainer- The parent component.
Returns
getChildrenInTraversalOrder
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.
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 #overridesTabIndices(com.codename1.ui.Container)
method to return true.