DOC-05-01 使用内置的布局面板

本系列教程主要介绍JavaFX SDK中布局容器相关类,我们称之为面板(Pane)。使用布局面板来简化JavaFX应用程序中的用户界面的管理。

我们可以通过为每个界面元素设置位置和大小属性来进行手动布局。然而,更简单的选择是使用布局面板。JavaFX SDK中提供了一系列的布局面板来简化设置和管理一些经典布局,比如行(Row)、列(Column)、堆栈(Stack)、磁贴(Tile)等等。当窗口被改变大小时,布局面板可以根据其包含的各个界面元素的属性来自动重设位置和大小。

本系列教程为JavaFX布局包中的每个布局面板提供了概述和简单样例。LayoutSample.java文件包含了本文中的示例代码。LayoutSample.zip包含了样例程序的Netbeans IDE工程文件。

边框面板(BorderPane)

BorderPane布局面包被划分为5个区域来放置界面元素:上、下、左、右、中。图1-1显示了BorderPane的布局示意图。每个区域的大小是没有限制的。在你使用BorderPane时,如果不需要某个区域,你只要不为该区域设置内容,该区域则不会被分配显示空间,自然也就不会显示。

图1-1 BorderPane布局示意图

5-1-1 border

BorderPane常用于定义一个非常经典的布局效果:上方是菜单栏和工具栏,下方是状态栏,左边是导航面板,右边是附加信息面板,中间是核心工作区域。

当BorderPane所在窗口的大小比各区域内容所需空间大时,多出的空间默认会设置给中间区域。当窗口大小比各区域所需空间小时,各个区域就会重叠。重叠的顺序取决于各个区域设置的顺序。例如,如果各个区域设置的顺序是左、下、右,则当窗口变小时,下方区域会覆盖左边区域,而右边区域会覆盖下方区域。如果区域设置顺序是左、右、下,当窗口变小时,下方区域则会在覆盖到左边和右边区域之上。

例1-1展示了在”Layout Sample”示例项目中创建BorderPane的代码,其中为各个区域的设置内容的方法会在本文的后续章节中进行说明。

例1-1 创建BorderPane

注意,这个示例中没有使用BorderPane的下方区域。如果你想在下方区域中添加一些内容,请使用下面的代码,并使用你选择的控件替换其node参数:

水平盒子(HBox)

HBox布局面板为将多个节点排列在一行中提供了一个简单的方法。图1-2是HBox的一个示例。

图1-2 HBox示例

5-1-2 hbox

设置内边距(Padding)属性可以用于管理节点到HBox边缘的距离。设置间距(Spacing)属性可以用于管理节点之间的距离。设置样式(Style)属性可以改变背景颜色。

例1-2创建了一个HBox来实现了一个带有两个按钮的工具栏(ToolBar)。

例1-2 创建一个HBox面板

例1-1中的setTop()方法将HBox添加到了BorderPane的上方区域中。结果如图1-3所示。

图1-3 在BorderPane中的HBox

5-1-3 hbox_in_border

垂直盒子(VBox)

VBox布局面板和HBox很类似,只是其包含的节点是排成一列。图1-4显示了一个VBox的示例。

图1-4 VBox示例

5-1-4 vbox

设置内边距(Padding)属性可以管理节点到VBox边缘的距离。设置间距(Spacing)属性可以管理节点之间的距离。设置外边距(Margin)属性可以为单个控件周围增加额外的空间。

例1-3创建了一个VBox,其中包含了一系列的选项。

例1-3 创建一个VBox

例1-1中的setLeft()方法将VBox添加到了BorderPane的左边区域中。程序运行结果如图1-5所示。

图1-5 在BorderPane中的VBox

5-1-5 vbox_in_border

堆栈面板(StackPane)

StackPane布局面板将所有的节点放在一个堆栈中进行布局管理,后添加进去的节点会显示在前一个添加进去的节点之上。这个布局为将文本(Text)覆盖到一个图形(Shape)或者图像(Image)之上,或者将普通图形相互覆盖来创建更复杂的图形,提供了一个简单的方案。图1-6显示了一个帮助按钮,它是通过在一个具有渐变背景的矩形上堆叠一个问号标志来实现的。

图1-6 简单的StackPane示例

5-1-6 stack

你可以通过设置对齐属性(Alignment)来控制子节点在StackPane中的位置。这个属性会影响所有的子节点,而设置外边距属性(Margin)可以控制在StackPane中的单个子节点位置。

例1-4中创建了用于实现帮助按钮的StackPane。

例1-4 创建一个StackPane

例1-4中的最后几行代码将创建的StackPane添加到例1-2创建的HBox中,同时设置StackPane始终居于HBox的最右边。代码运行结果如图1-7 所示。

图1-7 在HBox中的StackPane

5-1-7 hbox_stack

网格面板(GridPane)

GridPane布局面板使你可以创建灵活的基于行和列的网格来放置节点。节点可以被放置到任意一个单元格中,也可以根据需要设置一个节点跨越多个单元格(行或者列)。GridPane对于创建表单或者其他以行和列来组织的界面来说是非常有用的。图1-8显示了一个网格面板,它包含了一个图标、标题、子标题、文本和一个饼状图。在图中,属性gridLinesVisible被用来设置显示网格线,它能展示出行、列以及行列之间的间隙。这个属性在进行GridPane的可视化调试时非常有用。

图1-8 简单的GridPane示例

5-1-8 grid

设置间隙属性(Gap)用来管理行和列之间的距离。设置内边距属性(Padding)用来管理节点元素和GridPane边缘之间的距离。设置垂直(Vertical)和水平(Horizontal)对齐属性(Alignment)能够控制单元格中的各个控件的对齐方式。

例1-5创建了如图1-8中所示的GridPane。

例1-5 创建GridPane

例1-1的setCenter()方法将上面创建的GridPane添加到了BorderPane的中间区域中。代码运行结果如图1-9所示。

图1-9 在BorderPane中的GridPane

5-1-9 grid_in_border

当窗口大小变化时,网格面板中的节点将会根据其自身的布局设置自动适应大小变化。

流面板(FlowPane)

FlowPane布局面板中包含的节点会连续地平铺放置,并且会在边界处自动换行(或者列)。这些节点可以在垂直方向(按列)或水平方向(按行)上平铺。垂直的FlowPane会在高度边界处自动换列,水平的FlowPane会在宽度边界处自动换行。图1-10显示了一个使用了数字编号图标的水平FlowPane样例。相比之下如果在垂直FlowPane中,第一列会包含标号为1到4的节点,而第二列会包含编号为5到8的节点。

图1-10 水平FlowPane样例

5-1-10 flow

设置间隙属性(Gap)用于管理行和列之间的距离。设置内边距属性(Padding)用于管理节点元素和FlowPane边缘之间的距离。例1-6创建了如图1-10所示的带有一系列的页面图标的水平FlowPane。

例1-6 创建FlowPane

例1-1中的setRight()方法将FlowPane添加到了BorderPane的右边区域之中。代码运行结果如图1-11所示。

图1-11 在BorderPane中的FlowPane

5-1-11 flow_in_border

磁贴面板(TilePane)

TilePane布局面板和FlowPane很相似。TilePane将其包含的节点都放在一个网格中,其中每格或者每块磁贴的大小都是一样的。节点可以按水平方向(行)进行排列,或者以垂直方向(列)进行排列。水平排列时会在TilePane的宽度边界处对Tile进行自动换行,垂直排列时会在TilePane的高度边界处对Tile进行自动换列。使用prefColumns和prefRows属性可以设定TilePane的首选大小。

设置间隙属性(Gap)用来管理行和列之间间距。设置内边距属性(Padding)用来设管理节点元素和TilePane边缘之间的距离。

例1-7创建了一个水平排列的TilePane,它产生了如图1-10所示的布局。

例1-7 创建一个TilePane

锚面板(AnchorPane)

AnchorPane布局面板可以让你将节点锚定到面板的顶部、底部、左边、右边或者中间位置。当窗体的大小变化时,节点会保持与其锚点之间的相对位置。一个节点可以锚定到一个或者多个位置,并且多个节点可以被锚定到同一个位置。图1-12显示了一个带有GridPane的AnchorPane,这个GridPane是在前面的”网格面板(GridPane)”章节中创建的,它被锚定到了顶部,同时将一个包含两个按钮的HBox锚定到了右下方。

图1-12 AnchorPane样例

5-1-12 anchor

例1-8创建了一个AnchorPane,它带有一个被锚定到顶部的节点和一个被锚定到右下角的面板。在前面的例1-5 所创建的GridPane被用到了顶部节点中。

例1-8 创建一个AnchorPane

下面的代码语句将BorderPane的中间区域替换为上面创建的AnchorPane。

运行结果如图1-13所示。

图1-13 在BorderPane中的AnchorPane

5-1-13 anchor_in_border_big

当窗体大小变化时,其中的节点会根据其锚点来保持它们在面板中的相对位置。图1-14展示了当窗体变小时的效果,此时锚定在面板右下方的两个按钮会移到更靠近Sales信息的位置。

图1-14 改变了大小的AnchorPane

5-1-14 anchor_in_border_small

附加资源

要学习更多关于JavaFX布局面板的信息,请查看JavaFX API文档中的javafx.scene.layout包相关的信息。

应用程序文件

源代码

LayoutSample.java

NetBeans工程

LayoutSample.zip

打赏一下
支付宝
微信
除非注明,博客文章均为原创,转载请标明文章地址
本文地址: http://www.javafxchina.net/blog/2015/06/doc05_buildinlayout/
百度已收录