（翻译）第二十九回 使用JavaFX2.0内置布局窗格

原文地址http://download.oracle.com/javafx/2.0/layout/builtin_layouts.htm

 

 

在JavaFX应用中，当然可以通过指定UI元素的位置和大小属性来手动布局。不过，更简单的方法是使用布局窗格。JavaFX SDK提高了多种布局容器类(称为窗格)来方便的建立和管理经典布局,如行、列、堆、拼贴等。由于窗口是可以改变大小的，所以布局窗格会根据其包含的结点自动修改位置和大小。

本文是JavaFX布局窗格的概览，并为每个窗格提供了小例子。

边框窗格BorderPane

BorderPane布局窗格提供了5块放置结点的区域：顶部、底部、座部、右部、中部。 Figure 1-1 是能用该布局窗格创建的布局类型。区域可以是任意大小的，如果不需要某一块，可以不定义。

 

Figure 1-1 Sample Border Pane

Description of "Figure 1-1 Sample Border Pane"

 

边框窗格对于经典布局很有用，像顶部的工具栏，底部的状态栏，左边的导航面板，右边的补充信息，中间的工作区。

Example 1-1 创建了一个每个区域是有色矩形的边框窗格。

 

Example 1-1 Create a Border Pane

BorderPane layout = new BorderPane();
layout.setTop(new Rectangle(200, 50, Color.DARKCYAN));
layout.setBottom(new Rectangle(200, 50, Color.DARKCYAN));
layout.setCenter(new Rectangle(100, 100, Color.MEDIUMAQUAMARINE));
layout.setLeft(new Rectangle(50, 100, Color.DARKTURQUOISE));
layout.setRight(new Rectangle(50, 100, Color.DARKTURQUOISE));

 

水平盒子HBox

HBox 布局窗格提供了一种简单的方法来把一些列结点放进单行里面。Figure 1-2 是一个HBox 窗格的例子。

Figure 1-2 Sample HBox Pane

Description of "Figure 1-2 Sample HBox Pane"

Padding属性用来设置结点和HBox的边缘间距离。 Spacing属性用来设置结点间距离。style用来改变背景色。

Example 1-2 创建了一个工具栏的HBox 窗格，里面有两个按钮。

 

Example 1-2 Create an HBox Pane

HBox hbox = new HBox();
hbox.setPadding(new Insets(15, 12, 15, 12));
hbox.setSpacing(10);
hbox.setStyle("-fx-background-color: #336699");

Button buttonCurrent = new Button("Current");
buttonCurrent.setPrefSize(100, 20);

Button buttonProjected = new Button("Projected");
buttonProjected.setPrefSize(100, 20);
hbox.getChildren().addAll(buttonCurrent, buttonProjected);

BorderPane border = new BorderPane();
border.setTop(hbox);

 

 Example 1-2 中的最后一行创建了一个边框布局，并把HBox加入到顶部区域。结果见 Figure 1-3 .

Figure 1-3 HBox Pane in a Border Pane

Description of "Figure 1-3 HBox Pane in a Border Pane"

垂直盒子VBox

VBox 布局窗格和HBox 布局很类似，区别仅仅是垂直盒子的结点是组织进一列中。Figure 1-4 是一个VBox窗格的例子。

Figure 1-4 Sample VBox Pane

Description of "Figure 1-4 Sample VBox Pane"

Padding属性用来设置结点和VBox的边缘间距离。 Spacing属性用来设置结点间距离。

Example 1-3 创建了一个选项列表VBox。

Example 1-3 Create a VBox Pane

VBox vbox = new VBox();
vbox.setPadding(new Insets(10, 10, 10, 10));
vbox.setSpacing(10);

Text title = new Text("Data");
title.setFont(Font.font("Amble CN", FontWeight.BOLD, 14));
vbox.getChildren().add(title);

Text options[] = new Text[] {
                 new Text("  Sales"),
                 new Text("  Marketing"),
                 new Text("  Distribution"),
                 new Text("  Costs")};

for (int i=0; i<4; i++) {
     vbox.getChildren().add(options[i]);
}

border.setLeft(vbox);       // Add to BorderPane from Example 1-2

 Example 1-3 中最后一行把VBox窗格加入到了边框布局中的左部。结果见 Figure 1-5 .

Figure 1-5 VBox Pane in a Border Pane

Description of "Figure 1-5 VBox Pane in a Border Pane"

堆栈窗格StackPane

StackPane布局窗格把所有结点放进一个堆栈中，新结点都在前一个结点上面。该布局模式可以方便地 在形状和图片上叠加文字或将多种简单形状组合成一个复杂形状。Figure 1-6 是一个帮助图标，是将一个问号放在了具有渐变背景的矩形上面。

 

Figure 1-6 Sample Stack Pane

Description of "Figure 1-6 Sample Stack Pane"

 

Example 1-4 为帮助图标创建了堆栈窗格。

 

Example 1-4 Create a Stack Pane

StackPane stack = new StackPane();
Rectangle helpIcon = new Rectangle(35.0, 25.0);
helpIcon.setFill(new LinearGradient(0,0,0,1, true, CycleMethod.NO_CYCLE,
    new Stop[]{
    new Stop(0,Color.web("#4977A3")),
    new Stop(0.5, Color.web("#B0C6DA")),
    new Stop(1,Color.web("#9CB6CF")),}));
helpIcon.setStroke(Color.web("#D0E6FA"));
helpIcon.setArcHeight(3.5);
helpIcon.setArcWidth(3.5);

Text helpText = new Text("?   ");
helpText.setFont(Font.font("Amble Cn", FontWeight.BOLD, 18));
helpText.setFill(Color.WHITE);
helpText.setStroke(Color.web("#7080A0")); 

stack.getChildren().addAll(helpIcon, helpText);
stack.setAlignment(Pos.CENTER_RIGHT);     // Right-justify nodes in stack

HBox.setHgrow(stack, Priority.ALWAYS);    // Give stack any extra space
hbox.getChildren().add(stack);            // Add to HBox from Example 1-2

 

Example 1-4 的最后一行把堆栈窗格加入到了HBox 中，并且让它永远在最右边。结果见Figure 1-7 .

Figure 1-7 Stack Pane in an HBox Pane

Description of "Figure 1-7 Stack Pane in an HBox Pane"

网格窗格GridPane

GridPane 布局窗格可以灵活的创建放置结点的行和列的网络。结点可以放在任何网格细胞中，并且需要时还可以跨细胞。网格窗格用来创建表格或者是任何用行和列组织的布局。Figure 1-8 是一个包含一个图标、小标题、文本和饼图的网格窗格。在图中，gridLinesVisible 属性用来设置显示网格线以看出行和列。该属性对于调试GridPane 布局很有用。

 

Figure 1-8 Sample Grid Pane

Description of "Figure 1-8 Sample Grid Pane"

 

Gap属性来控制行和列直接的空间。padding属性来控制结点和网格窗格边缘的距离。

Example 1-5 creates the grid pane shown in Figure 1-8 .

Example 1-5 Create a Grid Pane

GridPane grid = new GridPane();
grid.setHgap(10);
grid.setVgap(10);
grid.setPadding(new Insets(0, 0, 0, 10));

// Category in column 2, row 1
Text category = new Text("Sales:");
category.setFont(Font.font("Tahoma", FontWeight.BOLD, 20));
grid.add(category, 1, 0); 

// Title in column 3, row 1
Text chartTitle = new Text("Current Year");
chartTitle.setFont(Font.font("Tahoma", FontWeight.BOLD, 20));
grid.add(chartTitle, 2, 0);

// Subtitle in columns 2-3, row 2
Text chartSubtitle = new Text("Goods and Services");
grid.add(chartSubtitle, 1, 1, 2, 1);

// House icon in column 1, rows 1-2
ImageView imageHouse = new ImageView(
    new Image(LayoutSample.class.getResourceAsStream("graphics/house.png")));
grid.add(imageHouse, 0, 0, 1, 2); 

// Left label in column 1 (bottom), row 3
Text goodsPercent = new Text("Goods\n80%");
GridPane.setValignment(goodsPercent, VPos.BOTTOM);
grid.add(goodsPercent, 0, 2); 

// Chart in columns 2-3, row 3
ImageView imageChart = new ImageView(
    new Image(LayoutSample.class.getResourceAsStream("graphics/piechart.png")));
grid.add(imageChart, 1, 2, 2, 1); 

// Right label in column 4 (top), row 3
Text servicesPercent = new Text("Services\n20%");
GridPane.setValignment(servicesPercent, VPos.TOP);
grid.add(servicesPercent, 3, 2);

border.setCenter(grid);       // Add to BorderPane from Example 1-2

 Example 1-5 的最后一行把网格布局放到了边框布局的中间。结果见Figure 1-9 .

Figure 1-9 Grid Pane in a Border Pane

Description of "Figure 1-9 Grid Pane in a Border Pane"

由于窗口大小的变化，网格成功的结点会根据布局限制重置大小。

流窗格FlowPane

 FlowPane布局窗格中的结点会连续放置在窗格的边界集中。结点可以垂直流向 (columns) 或水平流向(rows)。垂直流向窗格具有较高的分界线，水平流向窗格具有较宽的分界线。Figure 1-10 是一个使用了数字图标的水平窗格例子。相反，垂直流向窗格中，第一列会包含1到4，第二列包含5到8。

 

Figure 1-10 Sample Horizontal Flow Pane

Description of "Figure 1-10 Sample Horizontal Flow Pane"

 

Gap属性来控制行和列直接的空间。padding属性来控制结点和网格窗格边缘的距离。Example 1-6 创建了一些列图标的水平流窗格。

 

Example 1-6 Create a Flow Pane

FlowPane flow = new FlowPane();
flow.setPadding(new Insets(5, 0, 5, 0));
flow.setVgap(4);
flow.setHgap(4);
flow.setPrefWrapLength(170); // preferred width allows for two columns
flow.setStyle("-fx-background-color: DAE6F3");

ImageView pages[] = new ImageView[8];
for (int i=0; i<8; i++) {
     pages[i] = new ImageView(
   new Image(LayoutSample.class.getResourceAsStream("graphics/chart_"+i+".png")));
     flow.getChildren().add(pages[i]);
}

border.setRight(flow);       // Add to BorderPane from Example 1-2

 

 Example 1-6 把流窗格放到了边框窗格的右部。结果是Figure 1-11 .

Figure 1-11 Flow Pane in a Border Pane

Description of "Figure 1-11 Flow Pane in a Border Pane"

瓦片窗格TilePane

 瓦片窗格和流窗格很类似，TilePane 布局窗格中的所有结点都大小相同，放在网格中。结点可以水平放置(in rows) 或垂直放置(in columns)。水平放置的瓦片在宽度宽度方向而垂直的在高度方向。使用prefColumns和 prefRows属性来设置瓦片窗格的首选大小。

Gap属性来控制行和列直接的空间。padding属性来控制结点和网格窗格边缘的距离。

Example 1-7 创建了一个水平瓦片窗格，其效果和Figure 1-10 相同。

Example 1-7 Create a Tile Pane

TilePane tile = new TilePane();
tile.setPadding(new Insets(5, 0, 5, 0));
tile.setVgap(4);
tile.setHgap(4);
tile.setPrefColumns(2);
tile.setStyle("-fx-background-color: DAE6F3");

ImageView pages[] = new ImageView[8];
for (int i=0; i<8; i++) {
     pages[i] = new ImageView(
   new Image(LayoutSample.class.getResourceAsStream("graphics/chart_"+i+".png")));
     tile.getChildren().add(pages[i]);
}

锚窗格AnchorPane

AnchorPane 布局窗格用来在窗格的上下左右中固定结点。当窗口大小改变时，结点会维持它们原来的相对位置。一个结点可以赋予多个位置，一个位置也可以赋予多个结点。Figure 1-12 是一个锚窗格，网格窗格在顶部，有两个按钮的HBox窗格在底部偏右。

 

Figure 1-12 Sample Anchor Pane

Description of "Figure 1-12 Sample Anchor Pane"

 

Example 1-8 照上面创建了一个锚窗格。

Example 1-8 Create an Anchor Pane

AnchorPane anchorpane = new AnchorPane();
Button buttonSave = new Button("Save");
Button buttonCancel = new Button("Cancel");

HBox hbox = new HBox();
hbox.setPadding(new Insets(0, 10, 10, 10));
hbox.setSpacing(10);
hbox.getChildren().addAll(buttonSave, buttonCancel);

anchorpane.getChildren().addAll(grid,hbox);   // Add grid from Example 1-5







AnchorPane.setBottomAnchor(hbox, 8.0);
AnchorPane.setRightAnchor(hbox, 5.0);
AnchorPane.setTopAnchor(grid, 10.0);

border.setCenter(anchorpane);       // Add to BorderPane from Example 1-2

 Example 1-8 最后一行把锚窗格放在了边框窗格中间，取代了先前的结点。结果见Figure 1-13 .

Figure 1-13 Anchor Pane in a Border Pane

Description of "Figure 1-13 Anchor Pane in a Border Pane"

当窗口大小改变时，结点会维持它们原来的相对位置。 Figure 1-14 在按钮在底部，当窗口变低时，按钮也向上移动了。

Figure 1-14 Resized Anchor Pane

Description of "Figure 1-14 Resized Anchor Pane"