如何在CN1中创建此用户界面？

Question

我想知道如何在Codename One中构建此用户界面？我尝试使用TableLayout，但它似乎很复杂。你能帮我吗？图像上的每个单元格都必须是一个容器。谢谢！

Answer 1

这对手机来说是不好的布局，并且在平板电脑上也会局促。话虽如此，表的布局非常简单。您也可以使用GUI生成器，但是我认为表布局会更容易，您只需要了解跨度即可。我为此实现了一种方法，但由于需要一些工作，因此并未完成全部工作。您也可以使用其他方法，例如明确给出行/列约束等...

// creates the first row of tables and the second row table
for(int iter = 0 ; iter < 9 ; iter++) {
    // this method should create the container with the blue box around it
    hi.add(createBox());
}
// I use a blank label as a "filler" and span it over the rest of the row
hi.add(tl.createConstraint().horizontalSpan(7), new Label());

// 3rd row box and spacing
hi.add(createBox());
hi.add(new Label());

// 3rd row boxes and first box of 4th row
for(int iter = 0 ; iter < 7 ; iter++) {
    hi.add(createBox());
}

hi.add(new Label());
hi.add(createBox());

// this would place the container with the content in the center
hi.add(tl.createConstraint().
    horizontalSpan(4).verticalSpan(6), createContent());

hi.add(createBox());