スワイプルイントロ画面を構築するにはどうすればよいですか？

Question

多くのアプリでは、スクロール可能な紹介画面があります。あなたが知っているのは、現在表示されているページを示す点が下にある点です。

Codename Oneで作成する最も良い方法は何ですか？snapToGridを持つコンテナ？

Answer 1

OK - それが私の最初の試みであり、私はそれでかなり満足してそう：

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); 
} 

Answer 2

私はこのユースケースのための私の独自の実装を持っています。 2つのクラスがあります：TutoDialog、あなたの場合は "イントロ画面"ダイアログ、そしてカッコウエルはドットインジケータです。 tutoダイアログには、タイトルといくつかの画像がパラメータとしてあります。画像の数に応じてカローセルのドット数を自動的に調整します。私のユースケースでは、各画像は私のアプリのスクリーンショットであり、いくつかのアドバイスがあります。 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); 
} 
} 

それは次のようになります：