Question

很多应用程序都有可转换的介绍屏幕 - 你知道 - 那些带有下方点的那些可以指示当前正在查看的页面。

在Codename One中创建一个 - 使用snapToGrid的容器的最佳方法是什么？

Answer 1

我有自己的实现这个用例。有两个类：TutoDialog，在你的情况下可以是＆＃34;介绍屏幕＆＃34;对话框和Caroussel带点指示器。 tuto对话框在参数中有标题和一些图像。它根据图像的数量自动调整caroussel的点数。对于我的用例，每个图像都是我的应用程序的屏幕截图，并提供了一些建议。 tuto对话框包含3个按钮，用于在图像之间导航（下一个/上一个/完成）。

public class Caroussel extends Container {
private final static Image CIRCLE = MainClass.getResources().getImage("circle-blue20.png");
private final static Image CIRCLE_EMPTY = MainClass.getResources().getImage("circle-empty-blue20.png");

private Label[] circles;
private int currentIndex = -1;

public Caroussel(int nbItems, boolean selectFirst) {
    if (nbItems < 2 || nbItems > 50) {
        throw new IllegalArgumentException("Can't create Caroussel component with nbItems<2 || nbItems>50 ! ");
    }
    this.circles = new Label[nbItems];
    setLayout(new BoxLayout(BoxLayout.X_AXIS));
    for (int i = 0; i < nbItems; i++) {
        circles[i] = new Label("", CIRCLE_EMPTY);
        add(circles[i]);
    }
    if (selectFirst) {
        select(0);
    }
}

public void select(int index) {
    if (index >= 0 && index <= circles.length) {
        if (currentIndex > -1) {
            circles[currentIndex].setIcon(CIRCLE_EMPTY);
        }
        circles[index].setIcon(CIRCLE);
        currentIndex = index;
        repaint();
    }
}

public void selectNext() {
    if (currentIndex <= circles.length) {
        select(currentIndex + 1);
    }
}

public void selectPrevious() {
    if (currentIndex >= 1) {
        select(currentIndex - 1);
    }
}}

和

public class TutoDialog extends Dialog {
private Caroussel caroussel = null;

public TutoDialog(String title, Image... images) {
    if (images == null) {
        return;
    }
    this.caroussel = new Caroussel(images.length, true);
    setTitle(title);
    setAutoAdjustDialogSize(true);
    getTitleComponent().setUIID("DialogTitle2");
    setBlurBackgroundRadius(8.5f);
    Tabs tabs = new Tabs();
    tabs.setSwipeActivated(false);
    tabs.setAnimateTabSelection(false);
    int px1 = DisplayUtil.getScaledPixel(800), px2 = DisplayUtil.getScaledPixel(600);
    for (Image img : images) {
        tabs.addTab("", new Label("", img.scaled(px1, px2)));
    }
    Container cButtons = new Container(new BorderLayout());
    Button bSuivant = new Button("button.suivant");
    Button bPrecedent = new Button("button.precedent");
    Button bTerminer = new Button("button.terminer");
    bPrecedent.setVisible(false);
    bTerminer.setVisible(false);
    bSuivant.addActionListener(new ActionListener<ActionEvent>() {
        public void actionPerformed(ActionEvent evt) {
            int currentInd = tabs.getSelectedIndex();
            if (currentInd == 0) {
                bPrecedent.setVisible(true);
            }
            if (currentInd + 1 <= tabs.getTabCount() - 1) {
                if (caroussel != null)
                    caroussel.selectNext();
                tabs.setSelectedIndex(currentInd + 1);
                if (currentInd + 1 == tabs.getTabCount() - 1) {
                    bTerminer.setVisible(true);
                    bSuivant.setVisible(false);
                    cButtons.revalidate();
                }
            }

        };
    });
    bPrecedent.addActionListener(new ActionListener<ActionEvent>() {
        public void actionPerformed(ActionEvent evt) {
            int currentInd = tabs.getSelectedIndex();
            tabs.setSelectedIndex(currentInd - 1);

            bSuivant.setVisible(true);
            if (caroussel != null)
                caroussel.selectPrevious();
            if (currentInd - 1 == 0) {
                bPrecedent.setVisible(false);
                cButtons.revalidate();
            }
        };
    });
    bTerminer.addActionListener(new ActionListener<ActionEvent>() {
        @Override
        public void actionPerformed(ActionEvent evt) {
            tabs.setSelectedIndex(0);
            bPrecedent.setVisible(false);
            bTerminer.setVisible(false);
            bSuivant.setVisible(true);
            if (caroussel != null)
                caroussel.select(0);
            TutoDialog.this.dispose();
        }
    });
    cButtons.add(BorderLayout.WEST, bPrecedent).add(BorderLayout.CENTER, bSuivant).add(BorderLayout.EAST, bTerminer);
    add(BoxLayout.encloseY(tabs, BoxLayout.encloseY(FlowLayout.encloseCenter(caroussel), cButtons)));
}

public static void showIfFirstTime(AbstractComponentController ctrl) {
    if (ctrl == null) {
        Log.p("Can't execute method showIfFirstTime(...) with null AbstractComponentController");
        return;
    }
    String key = getKey(ctrl);
    if (ctrl.getTutoDlg() != null && !Preferences.get(key, false)) {
        Display.getInstance().callSerially(new Runnable() {

            @Override
            public void run() {
                Preferences.set(key, true);
                ctrl.getTutoDlg().show();
            }
        });
    }

}

public static String getKey(AbstractComponentController ctrl) {
    String key = "tuto" + ctrl.getClass().getSimpleName();
    if (UserController.getCurrentUser() != null) {
        key += "-" + UserController.getCurrentUser().getId();
    }
    return key;
}

public static boolean isAlreadyShown(AbstractComponentController ctrl) {
    return Preferences.get(getKey(ctrl), false);
}
}

它看起来像这样：

Answer 2

好的 - 这是我的第一次尝试，我很满意：

private void showIntro() {
    Display display = Display.getInstance();
    int percentage = 60;
    int snapWidth = display.getDisplayWidth() * percentage / 100;
    int snapHeight = display.getDisplayHeight() * percentage / 100;
    Dialog dialog = new Dialog(new LayeredLayout()) {
        @Override
        protected Dimension calcPreferredSize() {
            return new Dimension(snapWidth, snapHeight);
        }
    };
    Tabs tabs = new Tabs();
    tabs.setTensileLength(0);
    tabs.hideTabs();
    int[] colors = {
            0xc00000,
            0x00c000,
            0x0000c0,
            0x909000,
            0x009090,
    };
    for (int colorIndex = 0; colorIndex < colors.length; colorIndex++) {
        Container containerElement = new Container() {
            @Override
            protected Dimension calcPreferredSize() {
                return new Dimension(snapWidth, snapHeight);
            }
        };
        Style style = containerElement.getAllStyles();
        style.setBgTransparency(0xff);
        style.setBgColor(colors[colorIndex]);
        tabs.addTab("tab" + tabs.getTabCount(),  containerElement);
    }
    int tabCount = tabs.getTabCount();
    Button[] buttons = new Button[tabCount];
    Style styleButton = UIManager.getInstance().getComponentStyle("Button");
    styleButton.setFgColor(0xffffff);
    Image imageDot = FontImage.createMaterial(FontImage.MATERIAL_LENS, styleButton);
    for (int tabIndex = 0; tabIndex < tabCount; tabIndex++) {
        buttons[tabIndex] = new Button(imageDot);
        buttons[tabIndex].setUIID("Container");
        final int tabIndexFinal = tabIndex;
        buttons[tabIndex].addActionListener(aActionEvent -> tabs.setSelectedIndex(tabIndexFinal, true));
    }
    Container containerButtons = FlowLayout.encloseCenter(buttons);
    dialog.add(tabs);
    Button buttonWest = new Button("Skip");
    buttonWest.setUIID("Container");
    buttonWest.getAllStyles().setFgColor(0xffffff);
    buttonWest.addActionListener(aActionEvent -> dialog.dispose());
    Button buttonEast = new Button(">");
    buttonEast.setUIID("Container");
    buttonEast.getAllStyles().setFgColor(0xffffff);
    buttonEast.addActionListener(aActionEvent -> {
        int selectedIndex = tabs.getSelectedIndex();
        if (selectedIndex < (tabs.getTabCount() - 1)) {
            tabs.setSelectedIndex(selectedIndex + 1, true);
        } else {
            dialog.dispose();
        }
    });
    Container containerSouth = BorderLayout.south(BorderLayout.centerAbsoluteEastWest(containerButtons, buttonEast, buttonWest));
    Style styleContainerSouth = containerSouth.getAllStyles();
    styleContainerSouth.setMarginUnit(
            Style.UNIT_TYPE_DIPS,
            Style.UNIT_TYPE_DIPS,
            Style.UNIT_TYPE_DIPS,
            Style.UNIT_TYPE_DIPS);
    styleContainerSouth.setMargin(2, 2, 2, 2);
    dialog.add(containerSouth);
    SelectionListener selectionListener = (aOldSelectionIndex, aNewSelectionIndex) -> {
        for (int buttonIndex = 0; buttonIndex < buttons.length; buttonIndex++) {
            if (buttonIndex == aNewSelectionIndex) {
                buttons[buttonIndex].getAllStyles().setOpacity(0xff);
            } else {
                buttons[buttonIndex].getAllStyles().setOpacity(0xc0);
            }
        }
        buttonEast.setText((aNewSelectionIndex < (tabs.getTabCount() - 1)) ? ">" : "Finish");
        buttonEast.getParent().animateLayout(400);
    };
    tabs.addSelectionListener(selectionListener);
    dialog.addShowListener(evt -> {
        buttonEast.getParent().layoutContainer();
        selectionListener.selectionChanged(-1, 0);
    });
    Command command = dialog.showPacked(BorderLayout.CENTER, true);
}

如何构建可转换的介绍屏幕？

2 个答案: