複数のタブの行を含むJavafx TabPane

Question

（JavaFX）TabPaneを使用して、20種類のタブの内容を表示したいと考えています。これは、標準のTabPaneでうまくいきますが、一定の量のタブにペインが当たったときに、ボタン/ ComboBoxをクリックして、表示されていないタブの1つをクリックすることができます。

私はタッチスクリーンで使用される機能を設計しているので、これは理想的ではありません。私はタブの2つの別々の行を持つ方が直感的だと思います。

タブパインに2行のタブを追加するにはどうすればよいですか、それと同様の効果を得るには何ができますか？ありがとうございました。

ここで私が何を意味するか再現するいくつかのサンプルコードです：、TabPaneのタブヘッダ領域は基本的にStackPaneある

public class TabTest extends Application { 


public static void main(String args[]) { 
    Application.launch(args); 
} 

@Override 
public void start(Stage primaryStage) throws Exception { 
    primaryStage.setTitle("Tabs Test"); 
    Group root = new Group(); 
    Scene scene = new Scene(root, 450, 250, Color.WHITE); 

    TabPane tabPane = new TabPane(); 
    BorderPane borderPane = new BorderPane(); 

    for(int i = 0; i < 20; i++) 
    { 
     Tab tab = new Tab(); 
     tab.setText("Tab " + i); 
     HBox hbox = new HBox(); 
     hbox.getChildren().add(new Label("Tab " + i)); 
     tab.setContent(hbox); 
     tabPane.getTabs().add(tab); 
    } 

    borderPane.prefHeightProperty().bind(scene.heightProperty()); 
    borderPane.prefWidthProperty().bind(scene.widthProperty()); 

    borderPane.setCenter(tabPane); 
    root.getChildren().add(borderPane); 
    primaryStage.setScene(scene); 
    primaryStage.show(); 
} 

Link to tabbed view, since I can't post images yet

Answer 1

ので、私はの2つの行を作成することは容易ではないと思いますタブの代わりにタブを使用します。

私の考えは、TabPaneの元のタブを非表示にして、ToggleGroupにToggleButtonオブジェクトのセットを入れて、選択したタブとバインドをバインドします。

この方法で、任意のコンテナ（フロー、グリッドなど）に「タブ」を追加できます。

本当に最小限のサンプル：

Main.java

public class Main extends Application { 

    TabPane tabPane; 
    private ToggleGroup toggleGroup; 

    @Override 
    public void start(Stage primaryStage) { 

     Group root = new Group(); 
     Scene scene = new Scene(root, 700, 400, Color.WHITE); 

     primaryStage.setTitle("Tabs Test"); 

     toggleGroup = new ToggleGroup(); 
     toggleGroup.selectedToggleProperty().addListener(new ChangeListener<Toggle>() { 

      @Override 
      public void changed(ObservableValue<? extends Toggle> observable, Toggle oldValue, Toggle newValue) { 
       if (newValue == null) 
        toggleGroup.selectToggle(oldValue); 
       else 
        tabPane.getSelectionModel().select((Tab) newValue.getUserData()); 
      } 
     }); 

     tabPane = new TabPane(); 
     tabPane.getStylesheets().add(getClass().getResource("application.css").toExternalForm()); 

     VBox vboxToggleOuterContainer = new VBox(); 
     HBox hboxToggleFirstRow = new HBox(); 
     HBox hboxToggleSecondRow = new HBox(); 

     vboxToggleOuterContainer.getChildren().addAll(hboxToggleFirstRow, hboxToggleSecondRow); 

     for (int i = 0; i < 20; i++) { 
      Tab tab = new Tab(); 
      tab.setText("Tab " + i); 
      HBox hbox = new HBox(); 
      hbox.getChildren().add(new Label("Tab " + i)); 
      tab.setContent(hbox); 
      tabPane.getTabs().add(tab); 

      ToggleButton tb = new ToggleButton("Tab" + i); 
      tb.setToggleGroup(toggleGroup); 
      tb.setUserData(tab); 

      if (i < 10) 
       hboxToggleFirstRow.getChildren().add(tb); 
      else 
       hboxToggleSecondRow.getChildren().add(tb); 
     } 

     toggleGroup.selectToggle(toggleGroup.getToggles().get(0)); 

     VBox vbox = new VBox(); 
     vbox.getChildren().addAll(vboxToggleOuterContainer, tabPane); 
     vbox.fillWidthProperty().set(true); 
     root.getChildren().add(vbox); 

     primaryStage.setScene(scene); 
     primaryStage.show(); 
    } 

    public static void main(String[] args) { 
     launch(args); 
    } 
} 

application.css

.tab-pane { 
    -fx-skin: "com.sun.javafx.scene.control.skin.TabPaneSkin"; 
    -fx-tab-min-height: 0; 
    -fx-tab-max-height: 0; 
} 

.tab-pane .tab-header-area { 
    -fx-padding: 0 0 0 0; 
} 

.tab-pane .tab-header-area .headers-region .tab { 

    -fx-padding: 0 0 1 0; 
} 

の例では、ちょうどあなたが、アプローチを示し、本当に最小限であります制御を多くすることができるCSSを改善することができます私は時間があればそれを更新することもできます。