翻譯自??Titled Pane and Accordion

本章介紹如何在JavaFX應用程序中使用accordion和title窗格的組合。

標題窗格是帶標題的面板。它可以打開和關閉，它可以封裝任何Node諸如UI控件或圖像以及添加到布局容器的元素組。

標題窗格可以使用手風琴控件進行分組，這使您可以創建多個窗格并一次顯示一個窗格。圖21-1顯示了一個結合了三個標題窗格的手風琴控件。

圖21-1帶有三個標題的折疊窗格

使用JavaFX SDK API中的Accordion和TitledPane類在應用程序中實現這些控件。

?

創建標題窗格

創建TitledPane控件定義標題和一些內容。您可以通過使用類的雙參數構造函數TitledPane或應用setText和setContent方法來完成此操作。兩種方法都顯示在例21-1中。

例21-1聲明TitledPane對象

//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"));

使用任一代碼片段編譯和運行應用程序將生成如圖21-2所示的控件。

圖21-2帶按鈕的標題窗格

標題窗格的大小調整為適應其內容的首選大小。您可以添加多行文本并評估結果，如圖21-3所示。

圖21-3帶有一些文本的標題窗格

不要顯式設置標題窗格的最小高度，最大高度或首選高度，因為這可能會在打開或關閉標題窗格時導致意外行為。

例21-2中顯示的代碼片段通過將幾個控件放入GridPane布局容器中，將幾個控件添加到標題窗格中。

示例21-2帶有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);

使用此代碼片段運行和編譯應用程序時，將顯示如圖21-4所示的輸出。

圖21-4包含多個控件的標題窗格

您可以定義標題窗格的打開和關閉方式。默認情況下，所有標題窗格都是可折疊的，并且它們的移動是動畫的。如果您的應用程序禁止關閉標題窗格，請使用setCollapsible帶有false值的方法。您還可以通過應用setAnimated帶有false值的方法來禁用動畫打開。例21-3中顯示的代碼片段實現了這些任務。

例21-3調整標題窗格的樣式

TitledPane tp = new TitledPane(); //prohibit closing tp.setCollapsible(false); //prohibit animating tp.setAnimated(false);

將標題窗格添加到折疊中

在您的應用程序中，您可以使用標題窗格作為獨立元素，或者可以使用Accordion控件將它們組合在一個組中。不要明確設置手風琴的最小，最大或首選高度，因為這可能會在打開其標題窗格之一時導致意外行為。

向手風琴添加幾個標題窗格類似于向切換組添加切換按鈕：一次只能在手風琴中打開一個標題窗格。例21-4創建了三個標題窗格并將它們添加到手風琴中。

例21-4折疊和三個標題窗格

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.scene.paint.Color; 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);scene.setFill(Color.GHOSTWHITE);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();} }

在循環內創建三個標題窗格。每個標題窗格的內容都定義為一個ImageView對象。通過使用getPanes和addAll方法將標題窗格添加到手風琴中。您可以使用該add方法而不是addAll方法添加單個標題窗格。

默認情況下，應用程序啟動時會關閉所有標題窗格。例21-4中的setExpandedPane方法指定在運行樣本時將打開帶有蘋果圖片的標題窗格，如圖21-5所示。

圖21-5帶有三個標題窗格的折疊

?

處理具有標題窗格的折疊的事件

您可以使用標題窗格和折疊在應用程序中顯示不同的數據。例21-5創建了一個獨立的標題窗格，其中GridPane包含布局容器和使用折疊組合的三個標題窗格。獨立標題窗格包含電子郵件客戶端的UI元素。折疊使圖像的選擇能夠出現在Grid標題窗格的Attachment字段中。

例21-5為Accordion實現ChangeListener

import javafx.application.Application; import javafx.beans.value.ChangeListener; 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.scene.paint.Color; 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);scene.setFill(Color.GHOSTWHITE);// --- GridPane containerTitledPane 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);// --- Accordionfinal 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(new ChangeListener<TitledPane>() {public void changed(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();} }

當用戶在折疊中打開標題窗格時，expandedPaneProperty折疊會改變。將ChangeListener通知對象此更改，并且折疊中的擴展標題窗格用于構造附件的文件名。此文件名設置為相應Label對象的文本。

圖21-6顯示了應用程序啟動后的外觀。附件標簽包含“N / A”，因為沒有選擇標題窗格。

圖21-6 TitledPaneSample應用程序的初始視圖

如果展開Leaves標題窗格，Attachment標簽將包含“Leaves.jpg”，如圖21-7所示。

圖21-7帶葉子標題窗格的TitledPaneSample應用程序擴展

因為TitledPane和Accordion類都是類的擴展，所以Node可以對它們應用視覺效果或轉換。您還可以通過應用CSS樣式來更改控件的外觀。

?

相關的API文檔?

• TitledPane

• Accordion

• Label

• GridPane

• TextField

總結

以上是生活随笔為你收集整理的JavaFX UI控件教程（二十二）之Titled Pane和Accordion的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。