首页 > 解决方案 > 如何在 CN1 中创建此用户界面?

问题描述

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

在此处输入图像描述

标签: codenameone

解决方案


这对于手机来说是一个糟糕的布局,而且在平板电脑中也会显得局促。话虽如此,表格布局非常简单。您也可以使用 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());

推荐阅读