绑定到内容窗格的多个FloatingActionButton实例的奇怪放置

时间:2017-01-05 10:11:08

标签: codenameone

将mor而不是一个FloatingActionButton个实例绑定到内容窗格时,我发现了一个奇怪的分组效果。

在左下角添加第一个,在右下角添加第二个,它们都分组正确。

在右下角添加第一个,在左下角添加第二个,它们按创建顺序分组。

这种行为是预期的,为什么然后或者它是一个错误?

以下是代码:

public class FormMultipleFloatingButtons extends Form {
    public FormMultipleFloatingButtons() {
        this(true);
    }

    public FormMultipleFloatingButtons(boolean aLeftBeforeRight) {
        setTitle("Button Placement");
        setScrollable(false);
        Container contentPane = getContentPane();
        contentPane.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
        contentPane.setScrollableY(true);
        Style style = contentPane.getAllStyles();
        style.setMarginUnit(Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS);
        style.setMargin(5, 5, 5, 5);
        style.setBorder(Border.createDashedBorder(1));
        TextArea textArea = new TextArea(
                "The placement of FloatingActionButtons when adding more than one of those.\n\n"
                + "Tap the right toolbar button to recreate the form with swapped creation order "
                + "of the two FloatingActionButton instances.");
        textArea.setEditable(false);
        contentPane.add(textArea);
        Runnable runnableLeft = () -> {
            FloatingActionButton floatingActionButton = FloatingActionButton.createFAB(
                    FontImage2.MATERIAL_CALL_RECEIVED);
            floatingActionButton.bindFabToContainer(contentPane, Component.LEFT, Component.BOTTOM);
        };
        Runnable runnableRight = () -> {
            FloatingActionButton floatingActionButton = FloatingActionButton.createFAB(
                    FontImage2.MATERIAL_SUBDIRECTORY_ARROW_RIGHT);
            floatingActionButton.bindFabToContainer(contentPane, Component.RIGHT, Component.BOTTOM);
        };
        if (aLeftBeforeRight) {
            runnableLeft.run();
            runnableRight.run();
        } else {
            runnableRight.run();
            runnableLeft.run();
        }
        getToolbar().addCommandToRightBar(new Command(
                "", 
                FontImage.createMaterial(FontImage.MATERIAL_SWAP_HORIZ, style)) {
            @Override
            public void actionPerformed(ActionEvent evt) {
                FormMultipleFloatingButtons formMultipleFloatingButtons = new FormMultipleFloatingButtons(!aLeftBeforeRight);
                formMultipleFloatingButtons.show();
            }
        });
    }
}

2 个答案:

答案 0 :(得分:0)

内容窗格仅支持一个FloatingActionButton。由于将fab添加到内容窗格,因此将其放置在分层窗格中,这是一个独特的位置,添加两个fab会导致冲突。

这不是我们设计的,因为FAB的用户体验非常明确,只有一个,如果需要更多功能,可以在下面添加。

如果您仍想这样做,可以在内容窗格中使用Container并绑定到该内容。

答案 1 :(得分:0)

要有一个" next"和"之前" FloatingActionButton滚动浏览我的标签,我做了以下几点:

    private FloatingActionButton fabRight = FloatingActionButton.createFAB(FontImage.MATERIAL_KEYBOARD_ARROW_RIGHT);
private FloatingActionButton fabLeft = FloatingActionButton.createFAB(FontImage.MATERIAL_KEYBOARD_ARROW_LEFT);

    tabs.addSelectionListener((i1, i2) -> {

            fabRight.setVisible(i2 != tabs.getTabCount() - 1);
            fabLeft.setVisible(i2 != 0);

    });



    fabRight.addActionListener(e -> {
        int index = tabs.getSelectedIndex() + 1;
        tabs.setSelectedIndex(index);
        fabRight.setVisible(index != tabs.getTabCount() - 1);
    });

    fabLeft.addActionListener( e -> {
        int index = tabs.getSelectedIndex() -1;
        tabs.setSelectedIndex(index);
        fabLeft.setVisible(index != 0);
    });

    Container cntRight = fabRight.bindFabToContainer(tabs,Component.RIGHT, Component.BOTTOM);
    Container cntLeft = fabLeft.bindFabToContainer(cntRight,Component.LEFT, Component.BOTTOM);

    BorderLayout bl = new BorderLayout();
    bl.setCenterBehavior(BorderLayout.CENTER_BEHAVIOR_CENTER);
    setLayout(bl);
    add(BorderLayout.CENTER, cntLeft);
    add(BorderLayout.SOUTH, cntButtons);