Zentrieren Sie die Komponente in Borderlayout - Codenameone

Question

Ich habe BorderLayout Center verwendet, aber es ist nur die Komponente in Bezug auf die Bildschirmbreite zentrieren, aber nicht Bildschirmhöhe. Also habe ich BorderLayout.CENTER_BEHAVIOR_CENTER verwendet. Es zentriert die Komponente in der Mitte des Formulars, aber ich habe Animation, die die gesamte Bildschirmgröße einnehmen sollte, aber es nimmt nur die Komponentengröße.

Menü Animation:

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]); 
    } 
} 

Code:

//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

Der Grund, warum dies geschieht, weil die Komponente in einem Behälter enthalten ist, die innerhalb der Grenze Layout-Position ist. Wenn Sie es animieren, rendern Sie es also außerhalb der Grenzen des übergeordneten Containers, der es an Ort und Stelle einrastet.

Eine mögliche Lösung könnte sein, die Einschränkung für das Center-Layout nachträglich festzulegen und dann animateLayoutHierarchy zu verwenden, was sowohl den Constraint-Effekt als auch die Position des Elements animiert.