本章主要介绍如何在应用中结合标题面板和可折叠面板。
一个标题面板会有一个标题。它可封装任何的Node,比如UI控件和图片,或者布局容器中的一组元素。
面板也可以是可折叠的控件,这样就允许我们创建多个面板,而我们在某个时间只看其中一个。如下图:
我们使用According和TitledPane类来实现这些控件。
创建见标题面板需要定义标题和内容,我们可以使用两个参数的构造函数,或者使用setText和setContent方法。
//using a two-parameter constructor TitledPane tp = new TitledPane("My Titled Pane", new Button("Button")); //applying methods TitledPane tp = new TitledPane(); tp.setText("My Titled Pane"); tp.setContent(new Button("Button"));
运行如下所示:
因为没有设置最小、最大值以及高度,所以当打开或者关闭面板的时候会出现一些不可预期的行为。下面的代码向面板中加入了一个GridPane。
TitledPane gridTitlePane = new TitledPane(); GridPane grid = new GridPane(); grid.setVgap(4); grid.setPadding(new Insets(5, 5, 5, 5)); grid.add(new Label("First Name: "), 0, 0); grid.add(new TextField(), 1, 0); grid.add(new Label("Last Name: "), 0, 1); grid.add(new TextField(), 1, 1); grid.add(new Label("Email: "), 0, 2); grid.add(new TextField(), 1, 2); gridTitlePane.setText("Grid"); gridTitlePane.setContent(grid);
编译运行如下图所示:
你可以定义标题面板打开或关闭的方法。默认,标题面板是可折叠的。如果你的应用禁止关闭,那么可以调用setCollapsible方法。如果想禁止打开,可以调用setAnimated方法。
TitledPane tp = new TitledPane(); //prohibit closing tp.setCollapsible(false); //prohibit animating tp.setAnimated(false);
在你的应用中,你可以单独使用标题面板,你也可以添加多个标题面板到According控件中。代码如下:
import javafx.application.Application; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.control.Accordion; import javafx.scene.control.TitledPane; import javafx.scene.image.Image; import javafx.scene.image.ImageView; import javafx.stage.Stage; public class TitledPaneSample extends Application { final String[] imageNames = new String[]{"Apples", "Flowers", "Leaves"}; final Image[] images = new Image[imageNames.length]; final ImageView[] pics = new ImageView[imageNames.length]; final TitledPane[] tps = new TitledPane[imageNames.length]; public static void main(String[] args) { launch(args); } @Override public void start(Stage stage) { stage.setTitle("TitledPane"); Scene scene = new Scene(new Group(), 80, 180); final Accordion accordion = new Accordion (); for (int i = 0; i < imageNames.length; i++) { images[i] = new Image(getClass().getResourceAsStream(imageNames[i] + ".jpg")); pics[i] = new ImageView(images[i]); tps[i] = new TitledPane(imageNames[i],pics[i]); } accordion.getPanes().addAll(tps); accordion.setExpandedPane(tps[0]); Group root = (Group)scene.getRoot(); root.getChildren().add(accordion); stage.setScene(scene); stage.show(); } }
通过一个循环创建了3个标题面板。每一个面板中包含了一个ImageView对象.这些标题面板被加入到一个According控件中.编译运行如下图:
import javafx.application.Application; import javafx.beans.value.ObservableValue; import javafx.geometry.Insets; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.control.Accordion; import javafx.scene.control.Label; import javafx.scene.control.TextField; import javafx.scene.control.TitledPane; import javafx.scene.image.Image; import javafx.scene.image.ImageView; import javafx.scene.layout.GridPane; import javafx.scene.layout.HBox; import javafx.stage.Stage; public class TitledPaneSample extends Application { final String[] imageNames = new String[]{"Apples", "Flowers", "Leaves"}; final Image[] images = new Image[imageNames.length]; final ImageView[] pics = new ImageView[imageNames.length]; final TitledPane[] tps = new TitledPane[imageNames.length]; final Label label = new Label("N/A"); public static void main(String[] args) { launch(args); } @Override public void start(Stage stage) { stage.setTitle("TitledPane"); Scene scene = new Scene(new Group(), 800, 250); // --- GridPane container TitledPane gridTitlePane = new TitledPane(); GridPane grid = new GridPane(); grid.setVgap(4); grid.setPadding(new Insets(5, 5, 5, 5)); grid.add(new Label("To: "), 0, 0); grid.add(new TextField(), 1, 0); grid.add(new Label("Cc: "), 0, 1); grid.add(new TextField(), 1, 1); grid.add(new Label("Subject: "), 0, 2); grid.add(new TextField(), 1, 2); grid.add(new Label("Attachment: "), 0, 3); grid.add(label,1, 3); gridTitlePane.setText("Grid"); gridTitlePane.setContent(grid); // --- Accordion final Accordion accordion = new Accordion (); for (int i = 0; i < imageNames.length; i++) { images[i] = new Image(getClass().getResourceAsStream(imageNames[i] + ".jpg")); pics[i] = new ImageView(images[i]); tps[i] = new TitledPane(imageNames[i],pics[i]); } accordion.getPanes().addAll(tps); accordion.expandedPaneProperty().addListener( (ObservableValue<? extends TitledPane> ov, TitledPane old_val, TitledPane new_val) -> { if (new_val != null) { label.setText(accordion.getExpandedPane().getText() + ".jpg"); } }); HBox hbox = new HBox(10); hbox.setPadding(new Insets(20, 0, 0, 20)); hbox.getChildren().setAll(gridTitlePane, accordion); Group root = (Group)scene.getRoot(); root.getChildren().add(hbox); stage.setScene(scene); stage.show(); } }
展开其中一个如下图所示: