画家奇怪的行为

Question

我正在尝试使用 BackgroundPainter 通过代码自定义一些 UI，但我遇到了奇怪的意外结果：

public class TabView extends Form {

    private Tabs tabs;

    public TabView() {
        super("Radio Web", new BorderLayout());
        tabs = new Tabs(Component.BOTTOM);
        addComponent(BorderLayout.CENTER, tabs);
        tabs.setSwipeActivated(false);

        Component component = null;

        Button playButton = new  Button(FontImage.createMaterial(FontImage.MATERIAL_PLAY_ARROW,     UIManager.getInstance().getComponentStyle("Title"), 10));

        playButton.getAllStyles().setBorder(RoundBorder.create().color(0x94170C));
        playButton.getAllStyles().setMarginBottom(0);
        playButton.getAllStyles().setMarginLeft(0);
        playButton.getAllStyles().setMarginTop(0);
        Label mediaInfoLabel = new Label("Artist - Title");
        mediaInfoLabel.getAllStyles().setPaddingTop(2);
        mediaInfoLabel.getAllStyles().setPaddingBottom(2);
        Slider volumeSlider = new Slider();
        volumeSlider.setMinValue(0);
        volumeSlider.setMaxValue(100);
        volumeSlider.setEditable(true);
        Container box = GridLayout.encloseIn(1, new Container(), volumeSlider, mediaInfoLabel);

        Container south = new Container(new FlowLayout(Component.LEFT, Component.BOTTOM));

        south.getAllStyles().setBgPainter(new BackgroundPainter(south) {
            @Override
            public void paint(Graphics g, Rectangle rect) {
                int color = g.getColor();
                int alpha = g.getAlpha();

                g.setColor(0xD12115);
                g.setAlpha(255);
                int y = rect.getHeight() / 2;
                g.fillRect(0, y, rect.getWidth(), rect.getHeight() - y);
                g.setColor(color);
                g.setAlpha(alpha);
            }
        });
        south.add(playButton).add(box);

        component = BorderLayout.south(south);
        component.getAllStyles().setBgPainter(new BackgroundPainter(component) {
            @Override
            public void paint(Graphics g, Rectangle rect) {
                int color = g.getColor();
                int alpha = g.getAlpha();

                g.setColor(0x150100);
                g.setAlpha(255);
                g.fillRect(0, 0, rect.getWidth(), rect.getHeight());
                g.setColor(color);
                g.setAlpha(alpha);
            }
        });
        tabs.addTab("", FontImage.MATERIAL_AUDIOTRACK, 5, component);

        BrowserComponent sito = new BrowserComponent();
        sito.setURL("https://www.codenameone.com");
        tabs.addTab("", FontImage.MATERIAL_HTTP, 5, sito);

        BrowserComponent fb = new BrowserComponent();
        fb.setURL("https://www.facebook.com");
    tabs.addTab("", FontImage.MATERIAL_FACE, 5, fb);
    }

}

因此，我可以看到 "component" 绘制了自己的黑色背景，而 "south" 没有（它应该是半红色）。我做错了吗？此外，GridLayout 没有正确处理 margin/padding，我必须增加标签填充以避免它被剪切。

谢谢。

Answer 1

我过去遇到过类似的问题，不得不放弃 BackgroundPainter 来制作 2 种颜色。

根据您发布的代码，可以通过以下方式实现类似的样式：

只需复制粘贴即可，您也可以在 component 上替换 BP 以使用添加的方法

public class TabView extends Form {

    private Tabs tabs;

    public TabView() {
        super("Radio Web", new BorderLayout());
        tabs = new Tabs(Component.BOTTOM);
        addComponent(BorderLayout.CENTER, tabs);
        tabs.setSwipeActivated(false);

        Component component = null;

        Button playButton = new  Button(FontImage.createMaterial(FontImage.MATERIAL_PLAY_ARROW,     UIManager.getInstance().getComponentStyle("Title"), 10));

        playButton.getAllStyles().setBorder(RoundBorder.create().color(0x94170C));
        playButton.getAllStyles().setMarginBottom(0);
        playButton.getAllStyles().setMarginLeft(0);
        playButton.getAllStyles().setMarginTop(0);
        Label mediaInfoLabel = new Label("Artist - Title");
        mediaInfoLabel.getAllStyles().setPaddingTop(2);
        mediaInfoLabel.getAllStyles().setPaddingBottom(2);
        Slider volumeSlider = new Slider();
        volumeSlider.setMinValue(0);
        volumeSlider.setMaxValue(100);
        volumeSlider.setEditable(true);
        Container box = GridLayout.encloseIn(1, new Container(), volumeSlider, mediaInfoLabel);

        Container south = new Container(new FlowLayout(Component.LEFT, Component.BOTTOM));


        south.add(playButton).add(box);

        paintBackgroundRect2Colors(south);

        component = BorderLayout.south(south);
        component.getAllStyles().setBgPainter(new BackgroundPainter(component) {
            @Override
            public void paint(Graphics g, Rectangle rect) {
                int color = g.getColor();
                int alpha = g.getAlpha();

                g.setColor(0x150100);
                g.setAlpha(255);
                g.fillRect(0, 0, rect.getWidth(), rect.getHeight());
                g.setColor(color);
                g.setAlpha(alpha);
            }
        });
        tabs.addTab("", FontImage.MATERIAL_AUDIOTRACK, 5, component);

        BrowserComponent sito = new BrowserComponent();
        sito.setURL("https://www.codenameone.com");
        tabs.addTab("", FontImage.MATERIAL_HTTP, 5, sito);

        BrowserComponent fb = new BrowserComponent();
        fb.setURL("https://www.facebook.com");
    tabs.addTab("", FontImage.MATERIAL_FACE, 5, fb);
    }

    public static void paintBackgroundRect2Colors(Component cmp) {
        Image i = Image.createImage(cmp.getPreferredW(), cmp.getPreferredH(), 0xffffff);
        Graphics g = i.getGraphics();
        g.setAntiAliased(true);
        boolean antiAliased = g.isAntiAliased();
        int y = i.getHeight() / 2;

        // Top half
        g.setAlpha(255); //Change this to 0 if you want top half to be transparent
        g.setColor(0x150100); // Change this to any color you want, I used "component" color just to blend the look and feel
        g.fillRect(0, 0, i.getWidth(), y);

        // Bottom half
        g.setAlpha(255);
        g.setColor(0xD12115);
        g.fillRect(0, y, i.getWidth(), i.getHeight());

        g.setAntiAliased(antiAliased);

        // Set background image and make sure it fills 
        cmp.getAllStyles().setBgImage(i, true);
        cmp.getAllStyles().setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FILL, true);
    }

}

画家奇怪的行为

Painters odd behavior

java

codenameone