LayerLayout in cn1

0
votes

I need to keep an image on top of component with background color so that half of the component is covered with image. Hence I used layerlayout but Its not working. Plz hav a look at the codes and images below.

Code:

super(new BoxLayout(BoxLayout.Y_AXIS));
Container servicestatContainer = BoxLayout.encloseY();
servicestatContainer.getAllStyles().setBgColor(0x01579b);
servicestatContainer.getAllStyles().setBgTransparency(255);
servicestatContainer.getAllStyles().setPadding(5, 5, 5, 5);
servicestatContainer.getAllStyles().setMarginTop(0);
servicestatContainer.getAllStyles().setMarginBottom(0);

Label imageLabel = new Label(res.getImage("home_car.png").scaledWidth(Display.getInstance().getDisplayWidth()-50),"Button");
add(LayeredLayout.encloseIn(
        servicestatContainer,
        BorderLayout.south(FlowLayout.encloseCenterBottom(imageLabel))
));
//this doesn't work
servicestatContainer.setHeight(imageLabel.getPreferredH()/2);
System.out.println("carHeight " + imageLabel.getPreferredH()/2);

What I'm trying to do:

enter image description here

What it seems now from the code above

enter image description here

2
codenameone

2 Answers

2
votes

This is the closets I've been able to do:

    super(new BoxLayout(BoxLayout.Y_AXIS));
    Label imageLabel = new Label(res.getImage("home_car.png").scaledWidth(Display.getInstance().getDisplayWidth()-50),"Button");
    Image background = Image.createImage(Display.getInstance().getDisplayWidth(), imageLabel.getPreferredH(), 0xff01579b);
    Container servicestatContainer = BoxLayout.encloseY();
    servicestatContainer.getAllStyles().setPadding(5, 5, 5, 5);
    servicestatContainer.getAllStyles().setMarginTop(0);
    servicestatContainer.getAllStyles().setMarginBottom(0);
    servicestatContainer.add(new Label(background));        
    LayeredLayout ll = new LayeredLayout();        
    Container contLayered = new Container(ll);
    contLayered.addAll(servicestatContainer, imageLabel);
    ll.setInsetTop(imageLabel, imageLabel.getPreferredH() / 2 + "px");
    ll.setReferenceComponentTop(imageLabel, servicestatContainer);
    add(contLayered);

The key is playing with LayeredLayout insets. Hope it's useful.

0
votes

This should work:

Container servicestatContainer = BoxLayout.encloseY();
Style s = servicestatContainer.getAllStyles();
s.setBgColor(0x01579b);
s.setBgTransparency(255);
s.setPadding(5, 5, 5, 5);
s.setMarginUnit(Style.UNIT_TYPE_DIP);
s.setMarginTop(0);
s.setMarginBottom(12);

This assumes the background of the parent is white.

The reason this didn't work for you previously is that you placed the blue container below the image and they both have the same size due to layered layout.