Контейнер LayeredLayout, как фон, при щелчке в Codenameone меняется на белый цвет

Question

Пожалуйста, вы можете помочь. У меня есть очень простой пример ниже страницы, на котором я хочу, чтобы у меня был 2 цветной фон с диагональным разделением, которого я достиг. Так как это на LayeredLayout, я наложу на него содержимое моей страницы.

В симуляторе все в порядке, но когда я помещаю приложение на свое устройство Android, затем, когда я нажимаю на любую часть экрана, верхний левый треугольник меняется на белый, а затем снова меняется, когда я не нажимаю. Правый нижний треугольник остается как есть.

Поскольку это фон для главной страницы, тогда я явно не хочу, чтобы это изменение цвета происходило. Большое спасибо

Пример класса проекта здесь:

    package com.test;


import com.codename1.ui.Button;
import com.codename1.ui.Component;
import com.codename1.ui.Container;
import com.codename1.ui.Form;
import com.codename1.ui.Graphics;
import com.codename1.ui.geom.Dimension;
import com.codename1.ui.layouts.BorderLayout;
import com.codename1.ui.layouts.BoxLayout;
import com.codename1.ui.layouts.LayeredLayout;

public class AndroidKeyboard {
    private Form currentForm = new Form("", new BorderLayout());

    public void buildPage() {
        Container background = getBackground();
        currentForm.add(BorderLayout.CENTER, background);
        Button button = new Button("Click me");
        currentForm.add(BorderLayout.SOUTH, button);
        currentForm.show();
    }

    int topColour = 0x4371A4;
    int bottomColour = 0x70AEEA;

    private Container getBackground() {

        Container layeredContainer = new Container(new LayeredLayout());
        layeredContainer.setName("BackgroundContainer");

        currentForm.getToolbar().getAllStyles().setBgColor(topColour);
        currentForm.getToolbar().getAllStyles().setBgTransparency(255);
        //
        layeredContainer.getAllStyles().setBgColor(topColour);
        layeredContainer.getAllStyles().setBgTransparency(255);

        TopTriangleComponent t = new TopTriangleComponent();
        t.setTopColour(topColour);
        layeredContainer.add(t);

        BottomTriangleComponent b = new BottomTriangleComponent();
        b.setBottomColour(bottomColour);
        layeredContainer.add(b);
        return layeredContainer;
    }
}

class TopTriangleComponent extends Component {

    private int topColour;

    protected void setTopColour(int colour) {
        topColour = colour;
    }

    @Override
    protected Dimension calcPreferredSize() {
        return new Dimension(250, 250);
    }

    @Override
    public void paint(Graphics g) {
        g.setColor(topColour);
        int[] int_x = new int[] { 0, getWidth(), 0 };
        int[] int_y = new int[] { 0, 0, getHeight() };

        g.fillPolygon(int_x, int_y, 3);
    }
}

class BottomTriangleComponent extends Component {

    private int bottomColour;

    protected void setBottomColour(int colour) {
        bottomColour = colour;
    }

    @Override
    protected Dimension calcPreferredSize() {
        return new Dimension(250, 250);
    }

    @Override
    public void paint(Graphics g) {
        g.setColor(bottomColour);
        int[] int_x = new int[] { getWidth(), getWidth(), 0 };
        int[] int_y = new int[] { 0, getHeight(), getHeight() };

        g.fillPolygon(int_x, int_y, 3);
    }
}

Answer 1

Спасибо, @Shai Almog. Теперь я переработал контейнер для использования класса Painter, и это решает проблему. Новый код ниже:

public class AndroidKeyboard {
private Form currentForm = new Form("", new BorderLayout());

public void buildPage() {
    Container background = getBackground();
    currentForm.add(BorderLayout.CENTER, background);
    Button button = new Button("Click me");
    currentForm.add(BorderLayout.SOUTH, button);
    currentForm.show();
}

int topColour = 0x4822A4;
int bottomColour = 0x20AEEA;

private Container getBackground() {
    Container cmp = new Container();
    Painter p = new Painter() {
        @Override
        public void paint(Graphics g, Rectangle rect) {
            boolean antiAliased = g.isAntiAliased();
            g.setAntiAliased(true);

            g.setColor(topColour);

            int[] int_x = new int[] { 0, currentForm.getWidth(), 0 };
            int[] int_y = new int[] { 0, 0, currentForm.getHeight() };

            g.fillPolygon(int_x, int_y, 3);

            g.setColor(bottomColour);
            int[] int_x2 = new int[] { currentForm.getWidth(), currentForm.getWidth(), 0 };
            int[] int_y2 = new int[] { 0, currentForm.getHeight(), currentForm.getHeight() };

            g.fillPolygon(int_x2, int_y2, 3);
            g.setAntiAliased(antiAliased);
        }
    };
    cmp.getAllStyles().setBgPainter(p);
    return cmp;
}

Answer 2

Вы создаете два непрозрачных контейнера, но рисуете только часть из них. Затем, когда положите их друг на друга и положитесь на тот факт, что вы потянули только часть контейнера. Это работает для некоторых форм рисования (снизу вверх), но когда вы щелкаете мышью по области, мы рисуем только изменения. В этот момент мы проверяем непрозрачность, чтобы избежать повторной рисования «всего».

В частности, эта строка является проблемой:

currentForm.getToolbar().getAllStyles().setBgTransparency(255);

Это должно быть 0, чтобы указать желаемую прозрачность. Но я бы вообще отказался от такого многоуровневого подхода, потому что он очень дорогой, если вы все равно рисуете. Можно также нарисовать все. В этом случае вам не нужен контейнер просто Painter, и вы можете применить его к фону любого произвольного компонента, используя стили: setBgPainter(Painter).

Обратите внимание, что setBgTransparency(255) будет работать правильно в этот момент и будет правильным вариантом, так как позади вас не будет дополнительных предметов.