public class TableLayout

TableLayout is a very elaborate constraint based layout manager that can arrange elements in rows/columns while defining constraints to control complex behavior such as spanning, alignment/weight etc.

Notice that the table layout is in the com.codename1.ui.table package and not in the layouts package.

This is due to the fact that TableLayout was originally designed for the Table class.

Despite being constraint based the table layout isn’t strict about constraints and will implicitly add a constraint when one is missing. However, unlike grid layout table layout won’t implicitly add a row if the row/column count is incorrect

E.g this creates a 2x2 table but adds 5 elements. The 5th element won’t show:

Form hi = new Form("Table Layout 2x2", new TableLayout(2, 2));
hi.add(new Label("First")).
    add(new Label("Second")).
    add(new Label("Third")).
    add(new Label("Fourth")).
    add(new Label("Fifth"));
hi.show();

Table layout supports the ability to grow the last column which can be enabled using the setGrowHorizontally method. You can also use a shortened terse syntax to construct a table layout however since the table layout is a constraint based layout you won’t be able to utilize its full power with this syntax.

The default usage of the encloseIn below uses the setGrowHorizontally flag.

Container tl = TableLayout.encloseIn(2, new Label("First"),
                new Label("Second"),
                new Label("Third"),
                new Label("Fourth"),
                new Label("Fifth"));

The Full Potential

To truly appreciate the TableLayout we need to use the constraint syntax which allows us to span, align and set width/height for the rows & columns.

Table layout works with a Constraint instance that can communicate our intentions into the layout manager. Such constraints can include more than one attribute e.g. span and height.

Notice that table layout constraints can’t be reused for more than one component.

The constraint class supports the following attributes:

column The column for the table cell. This defaults to -1 which will just place the component in the next available cell

row Similar to column, defaults to -1 as well

width The column width in percentages, -1 will use the preferred size. -2 for width will take up the rest of the available space

height The row height in percentages, -1 will use the preferred size. -2 for height will take up the rest of the available space

spanHorizontal The cells that should be occupied horizontally defaults to 1 and can’t exceed the column count - current offset.

spanVertical Similar to spanHorizontal with the same limitations

horizontalAlign The horizontal alignment of the content within the cell, defaults to the special case -1 value to take up all the cell space can be either -1, Component.LEFT, Component.RIGHT or Component.CENTER

verticalAlign Similar to horizontalAlign can be one of -1, Component.TOP, Component.BOTTOM or Component.CENTER

Notice that you only need to set width/height to one cell in a column/row.

The table layout constraint sample tries to demonstrate some of the unique things you can do with constraints.

We go into further details on this in the developer guide so check that out.

TableLayout tl = new TableLayout(2, 3);
Form hi = new Form("Table Layout Cons", tl);
hi.setScrollable(false);
hi.add(tl.createConstraint().
            widthPercentage(20),
                new Label("AAA")).

        add(tl.createConstraint().
            horizontalSpan(2).
            heightPercentage(80).
            verticalAlign(Component.CENTER).
            horizontalAlign(Component.CENTER),
                new Label("Span H")).

        add(new Label("BBB")).

        add(tl.createConstraint().
            widthPercentage(60).
            heightPercentage(20),
                new Label("CCC")).

        add(tl.createConstraint().
            widthPercentage(20),
                new Label("DDD"));