如何在CodenameOne中创建类似Facebook的通知徽章

Question

https://i.stack.imgur.com/XAUHW.png

我想为我的聊天应用实现此类通知计数器。任何人都知道如何在CodenameOne中做到这一点？

感谢。

Answer 1

见：

    Form hi = new Form("Badge");

    Button chat = new Button("");
    FontImage.setMaterialIcon(chat, FontImage.MATERIAL_CHAT, 7);
    Label badge = new Label("33");
    badge.getAllStyles().setBorder(
            RoundBorder.create().rectangle(true));
    badge.getAllStyles().setAlignment(Component.CENTER);
    int size = Display.getInstance().convertToPixels(1.5f);
    badge.getAllStyles().setFont(Font.createTrueTypeFont("native:MainLight", "native:MainLight").
            derive(size, Font.STYLE_PLAIN));
    Container cnt = LayeredLayout.encloseIn(chat, FlowLayout.encloseRight(badge));
    cnt.setLeadComponent(chat);

    hi.add(cnt);

    TextField changeBadgeValue = new TextField("33");
    changeBadgeValue.addDataChangedListener((i, ii) -> {
        badge.setText(changeBadgeValue.getText());
        cnt.revalidate();
    });
    hi.add(changeBadgeValue);

    hi.show();

请注意，RoundBorder的当前版本的最小尺寸略大。这在即将到来的更新中得到修复。