[英]Javafx TabPane with multiple rows of tabs
I'd like to use a (JavaFX) TabPane to display the content of 20 different tabs. 我想使用(JavaFX)TabPane来显示20个不同标签的内容。 This works fine with the standard TabPane, however, when the pane hits a certain amount of tabs, a button / ComboBox can be clicked to click on one of the tabs not seen. 这对于标准的TabTane可以正常工作,但是,当窗格中有一定数量的选项卡时,可以单击按钮/ ComboBox来单击未显示的选项卡之一。
I'm designing a feature that will be used on a touchscreen, so this is not ideal. 我正在设计将在触摸屏上使用的功能,因此这不是理想的选择。 I think it'd be more intuitive to have two separate rows of tabs. 我认为拥有两排独立的标签会更直观。
How can I add two rows of tabs to a TabPane, or, what can be done to achieve a similar effect? 如何将两行选项卡添加到TabPane中,或者可以做些什么来达到类似的效果? Thanks in advanced. 提前致谢。
Here's some sample code to reproduce what I mean: 这是一些示例代码来重现我的意思:
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 链接到选项卡式视图,因为我还不能发布图像
The tab header area for TabPane
is basically a StackPane , therefore I think it is not so easy to create two rows of tabs instead of one. TabPane
的选项卡标题区域基本上是一个StackPane ,因此我认为创建两行选项卡而不是一列并不是那么容易。
My idea is to hide the original tabs of your TabPane
and put a set of ToggleButton
objects in a ToggleGroup
then bind the selection of toggles with the selection of tabs. 我的想法是隐藏TabPane
的原始选项卡,并将一组ToggleButton
对象放入ToggleGroup
然后将选项卡的选择绑定到切换选项。
This way you could add the "Tabs" into any container you want (flow, grid, etc). 这样,您可以将“制表符”添加到所需的任何容器(流,网格等)中。
Really minimal sample: 真正最少的样本:
Main.java 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 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;
}
The example is really minimal, just shows the approach, you can improve the CSS to have the control much more fancy (or if you want I can also update it if I will have time). 该示例实际上是最小的,仅显示了方法,您可以改进CSS以使控件更加精美(或者,如果我愿意的话,也可以对其进行更新)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.