在 borderlayout 中居中组件 - codenameone

Question

我使用了 borderLayout 居中，但它只是根据屏幕宽度而不是屏幕高度使组件居中。所以我用了BorderLayout.CENTER_BEHAVIOR_CENTER。它将组件置于表单中间，但我的动画应该占用整个屏幕大小，但它只占用组件大小。

菜单动画：

private void menuAnimation(Container c) {
    int w = Display.getInstance().getDisplayWidth();
    int h = Display.getInstance().getDisplayHeight();
    int[] positionX = {-100, w / 2, w + 100, w + 100, w + 100, w / 2, -100, -100};
    int[] positionY = {-100, -100, -100, h / 2, h + 100, h + 100, h + 100, h / 2};
    for (int iter = 0; iter < c.getComponentCount(); iter++) {
        Component cmp = c.getComponentAt(iter);
        cmp.setY(positionY[iter % positionY.length]);
        cmp.setX(positionX[iter % positionX.length]);
    }
}

代码：

    //f.setLayout(new FlowLayout(Component.CENTER, Component.CENTER));
    f.setLayout(new BorderLayout(BorderLayout.CENTER_BEHAVIOR_CENTER));

    Container menuContainerGroup = new Container(new BoxLayout(BoxLayout.Y_AXIS));
    f.add(menuContainerGroup);

    TableLayout tl = new TableLayout(3, 3);
    Container menuContainer = new Container(tl);

    menuContainerGroup.add(menuContainer);

    Image round = theme.getImage("loginBg.png").scaledWidth(imgWidth / 3 - 10);

    Label menuIcon = new Label();
    menuIcon.setUIID("menuButton");

    Button menuIcon1 = new Button(round);
    menuIcon1.setUIID("menuButton");
    menuIcon1.addActionListener((e) -> {
        menuAnimation(menuContainer);
        menuContainer.animateUnlayoutAndWait(600, 20);
        showForm("", null);

    });

    Label menuIcon2 = new Label();
    menuIcon2.setUIID("menuButton");

    Button menuIcon3 = new Button(round);
    menuIcon3.setUIID("menuButton");
    menuIcon3.addActionListener((e) -> {
        menuAnimation(menuContainer);
        menuContainer.animateUnlayoutAndWait(600, 20);
        showForm("", null);
    });

    Button menuIcon4 = new Button("Sign Out");
    menuIcon4.setUIID("menuButton");
    menuIcon4.getAllStyles().setFgColor(0xff7800);
    menuIcon4.getAllStyles().setAlignment(Component.CENTER);
    menuIcon4.addActionListener((e) -> {
        menuAnimation(menuContainer);
        menuContainer.animateUnlayoutAndWait(600, 20);
        showForm("", null);
    });

    Button menuIcon5 = new Button(round);
    menuIcon5.setUIID("menuButton");
    menuIcon5.addActionListener((e) -> {
        menuAnimation(menuContainer);
        menuContainer.animateUnlayoutAndWait(600, 20);
        showForm("", null);
    });

    Label menuIcon6 = new Label();
    menuIcon6.setUIID("menuButton");

    Button menuIcon7 = new Button(round);
    menuIcon7.setUIID("menuButton");
    menuIcon7.addActionListener((e) -> {
        menuAnimation(menuContainer);
        menuContainer.animateUnlayoutAndWait(600, 20);
        showForm("", null);
    });

    Label menuIcon8 = new Label();
    menuIcon8.setUIID("menuButton");

    menuContainer.add(tl.createConstraint().widthPercentage(33), menuIcon);
    menuContainer.add(tl.createConstraint().widthPercentage(33), menuIcon1);
    menuContainer.add(tl.createConstraint().widthPercentage(33), menuIcon2);
    menuContainer.add(tl.createConstraint().widthPercentage(33), menuIcon3);
    menuContainer.add(tl.createConstraint().widthPercentage(33), menuIcon4);
    menuContainer.add(tl.createConstraint().widthPercentage(33), menuIcon5);
    menuContainer.add(tl.createConstraint().widthPercentage(33), menuIcon6);
    menuContainer.add(tl.createConstraint().widthPercentage(33), menuIcon7);
    menuContainer.add(tl.createConstraint().widthPercentage(33), menuIcon8);
    f.revalidate();

Answer 1

发生这种情况的原因是组件包含在位于边框布局位置内的 Container 中。因此，当您为其设置动画时，您是在将其剪辑到位的父容器边界之外渲染它。

一个可能的解决方案可能是在事后为中心布局设置约束，然后使用 animateLayoutHierarchy 这将使约束效果和元素的位置都具有动画效果。

在 borderlayout 中居中组件 - codenameone

center the component in borderlayout - codenameone

codenameone