JavaFX-タブコンテンツエリアを非表示にし、特定のタブの選択時にタブヘッダーのみを表示する方法

Question

UIに追加のボタンを追加せずにタブペインの内容を非表示/非表示にする方法を提供します。私が考えた1つの方法は、タブパインに「ダミー」タブを用意し、それを選択することでした。タブパインのすべての内容は、ヘッダーを除いて非表示になります。他のタブを選択すると、内容が再び表示されます。私はタブパインの最小/最大/プレフの幅を変更しようとしました。

Answer 1

あなたは単にTabPaneのmax heightを設定することができます。

public class Main extends Application { 

    private static final int TABPANE_HEADER_HEIGHT = 29; 

    @Override 
    public void start(Stage primaryStage) throws Exception{ 
     BorderPane root = new BorderPane(); 

     // Add simple tabs 
     TabPane tp = new TabPane(); 
     tp.getTabs().add(new Tab("Tab1", new Label(" Content of the first tab"))); 
     tp.getTabs().add(new Tab("Tab2", new Label(" Content of the second tab"))); 

     // Create the Tab which hides the content 
     Tab hideTab = new Tab("Hide", new Label(" Content of the third tab")); 
     tp.getTabs().add(hideTab); 

     hideTab.selectedProperty().addListener((obs, oldval, newval) -> 
      tp.setMaxHeight(((newval) ? TABPANE_HEADER_HEIGHT : -1))); 

     root.setTop(tp); 

     Scene scene = new Scene(root, 300, 275); 
     scene.getStylesheets().addAll(getClass().getResource("style.css").toExternalForm()); 
     primaryStage.setScene(scene); 
     primaryStage.show(); 
    } 

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

結果：

---

注

.tab-paneの新しい擬似クラスを追加することで、CSSを使用して同じことができます。 tabcontenthidden。この疑似クラスでは、TabPaneの最大高さはタブの高さです。 Javaコードで

のstyle.css

.root { TAB_HEADER_HEIGHT: 29; } 

.tab-pane:tabcontenthidden { -fx-max-height: TAB_HEADER_HEIGHT; } 

.tab-pane { 
    -fx-max-height: -1; 
    -fx-background-color: orange; 
} 

、あなたはPseudoClass

PseudoClass TABPANE_CONTENT_HIDDEN = PseudoClass.getPseudoClass("tabcontenthidden"); 

などを作成することができますし、 pseudoClassStateChanged方法で、この擬似クラスをアクティブにすることができます

tabPane.pseudoClassStateChanged(TABPANE_CONTENT_HIDDEN, true); // false to show 

---

注2

あなたは追加のTabよりも多分もっと人間工学に基づいたこのanswer（非表示と表示する一つのボタン）のようにタブ領域へButton Sを追加することができます。