在JavaFX中使用布局.doc

《在JavaFX中使用布局.doc》由会员分享，可在线阅读，更多相关《在JavaFX中使用布局.doc（19页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、【精品文档】如有侵权，请联系网站删除，仅供学习与交流在JavaFX中使用布局.精品文档.在JavaFX中使用布局一、用内置布局窗格一个JavaFx应用可以通过设置每个UI元素的位置和大小来手动地布局用户界面。但是，一个更简单的做法是使用布局窗格。JavaFx SDK提供了多种布局容器类，叫做窗格，它们可简化对一些经典布局的设置和管理，例如行、列、堆叠、平铺等等。当窗口缩放时，布局窗格会自动地根据节点属性重设其包含的所有节点的位置和大小。本话题为JavaFx layout包中提供的的每个布局窗格都给出了相应的概述和简单的示例。LayoutSample.java文件包含了本话题中UI的源码。Lay

2、outSample.zip文件包含了示例应用的NetBeans工程。BorderPaneBorderPane布局窗格提供了5个放置节点的区域：top, bottom, left, right, 和 center。图 1-1展示了border pane构建的布局样式。这些区域可以是任意大小，如果应用不需要某个区域，你可以不定义它，然后窗格就不会给这个区域分配空间。图 1-1 Border Pane 示例border pane可用于这种经典的外观：top:工具栏，bottom:状态栏，left:导航栏，right:附加信息，center:工作区。默认情况下，如果窗口比所有区域所需空间还大，多余的空

3、间将被分配给中间区域。如果窗口比所需空间小，区域可能会重叠。重叠是由区域设置的顺序决定的。例如，如果区域设置的顺序是 left, bottom, right，当窗口变得更小时，bottom区域会覆盖left区域，right区域会覆盖bottom区域。如果区域设置的顺序是 left, right, bottom，当窗口变得更小时，bottom区域会覆盖left和right区域。例 1-1展示了布局示例应用中创建border pane的代码。创建每个区域用到的布局窗格的函数会在本话题的剩余部分介绍。例 1-1 创建一个 Border Pane1. BorderPane border = new B

4、orderPane();2. HBox hbox = addHBox()3. border.setTop(hbox);4. border.setLeft(addVBox();5. addStackPane(hbox); / 在top区域的HBox中添加stack pane6. border.setCenter(addGridPane();7. border.setRight(addFlowPane();注意一点，在本例中，border pane的bottom区域并没有被使用。如果你想要在bottom区域中添加什么，可以使用下面的语句并且替换其中的节点node为你选择的控件。1. border.

5、setBottom(node);HBoxHBox布局窗格可以让你很容易地将一系列节点排列到一行中。图 1-2展示了一个HBox窗格的例子.图 1-2 HBox 窗格示例Padding 属性可以设置节点到HBox边缘的距离。 Spacing 可以管理节点之间的距离。Style可用来改变背景色。例 1-2为一个工具栏创建了一个包含两个按钮的HBox窗格。例 1-2 创建一个 HBox 窗格1. public HBox addHBox() 2. HBox hbox = new HBox();3. hbox.setPadding(new Insets(15, 12, 15, 12);4. hbox.s

6、etSpacing(10);5. hbox.setStyle(-fx-background-color: #336699;);6. Button buttonCurrent = new Button(Current);7. buttonCurrent.setPrefSize(100, 20);8. Button buttonProjected = new Button(Projected);9. buttonProjected.setPrefSize(100, 20);10. hbox.getChildren().addAll(buttonCurrent, buttonProjected);1

7、1. return hbox;例 1-1中的setTop()函数将这个HBox窗格添加到border pane的top区域。其结果展示在图 1-3中。图 1-3 Border Pane 中的 HBox PaneVBoxVBox布局窗格和HBox很相似，除了这里所有节点是被排列到一个列中的。图 1-4展示了一个VBox窗格的示例。图 1-4 VBox Pane示例Padding 可用于设置节点到VBox窗格边界的距离。 Spacing可管理节点之间的距离。 Margins 可在单独的控件周围添加额外的空间。译者注：padding又称内边距、补白或留白，margin又称外边距、边界或额外空白区。它

8、们的概念来源于CSS，即层叠样式表。从一般意义上讲，margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。（参考文章）例 1-3创建了一个包含一列选项的VBox窗格。例 1-3 创建一个VBox Pane1. public VBox addVBox(); 2. VBox vbox = new VBox();3. vbox.setPadding(new Insets(10);4. vbox.setSpacing(8);5. Te

9、xt title = new Text(Data);6. title.setFont(Font.font(Arial, FontWeight.BOLD, 14);7. vbox.getChildren().add(title);8. Hyperlink options = new Hyperlink 9. new Hyperlink(Sales),10. new Hyperlink(Marketing),11. new Hyperlink(Distribution),12. new Hyperlink(Costs);13. for (int i=0; i4; i+) 14. VBox.setM

10、argin(optionsi, new Insets(0, 0, 0, 8);15. vbox.getChildren().add(optionsi);16. return vbox;例 1-1中的setLeft()函数将这个VBox窗格添加到了border pane的left区域。其结果展示在图 1-5中。图 1-5 Border Pane 中的 VBox PaneStackPaneStackPane布局窗格能将所有的节点放到一个堆栈中，其中每一个新的节点被添加到前一个节点的上方。这个布局模型能让你很容易地在一个形状或图像上面覆盖一个文本，或者用常用形状互相覆盖来创建复杂的形状。图 1-6展

11、示了一个通过在一个带有渐变色背景的矩形上堆放一个问号来创建的帮助图标。图 1-6 Stack Pane 示例Alignment 属性可以管理stack pane中子节点的对齐方式。这个属性影响所有的子节点，所以margin可以为stack中单独的子节点调整位置。例 1-4为帮助图标创建一个stack pane例 1-4 创建一个 Stack Pane1. public void addStackPane(HBox hb) 2. StackPane stack = new StackPane();3. Rectangle helpIcon = new Rectangle(30.0, 25.0);

12、4. helpIcon.setFill(new LinearGradient(0,0,0,1, true, CycleMethod.NO_CYCLE,5. new Stop6. new Stop(0,Color.web(#4977A3),7. new Stop(0.5, Color.web(#B0C6DA),8. new Stop(1,Color.web(#9CB6CF),);9. helpIcon.setStroke(Color.web(#D0E6FA);10. helpIcon.setArcHeight(3.5);11. helpIcon.setArcWidth(3.5);12. Text

13、 helpText = new Text(?);13. helpText.setFont(Font.font(Verdana, FontWeight.BOLD, 18);14. helpText.setFill(Color.WHITE);15. helpText.setStroke(Color.web(#7080A0); 16. stack.getChildren().addAll(helpIcon, helpText);17. stack.setAlignment(Pos.CENTER_RIGHT); / 子节点右对齐18. StackPane.setMargin(helpText, new

14、 Insets(0, 10, 0, 0); / 中间的 ?19. hb.getChildren().add(stack); / 添加到 例 1-2 中的HBox中20. HBox.setHgrow(stack, Priority.ALWAYS); / 将所有多余空间都交给stack例 1-4中的最后几行代码将stack pane添加到了例 1-2中创建的HBox窗格，并且总是将它放于窗格的最右边。结果展示在图 1-7中。图 1-7 HBox Pane 中的 Stack PaneGridPaneGridPane布局窗格能让你创建一个灵活的由行和列组成的网格来放置节点。节点可以被放于任何单元格内，

15、也可以根据需要横跨多个单元格。一个grid pane对于创建表单或者任何以行和列组织的布局很有用。图 1-8展示了一个包含了图标、标题、副标题、正文和图表的grid pane，gridLinesVisible属性可设置是否显示网格线，它能标识出行和列以及行列之间的间隔。这个属性对于可视化调试你的GridPane很有用。图 1-8 Grid Pane示例Gap属性可用于管理行和列之间的间隔。Padding属性可用于管理节点与网格边缘的距离。Vertical和horizontal alignment属性可用于管理单元格中单独控件的对齐方式。例 1-5创建了图 1-8中的grid pan。例 1-5

16、 创建一个 Grid Pane1. public GridPane addGridPane() 2. GridPane grid = new GridPane();3. grid.setHgap(10);4. grid.setVgap(10);5. grid.setPadding(new Insets(0, 10, 0, 10);6. / Category 位于 column 2, row 17. Text category = new Text(Sales:);8. category.setFont(Font.font(Arial, FontWeight.BOLD, 20);9. grid.

17、add(category, 1, 0); 10. / Title 位于 column 3, row 111. Text chartTitle = new Text(Current Year);12. chartTitle.setFont(Font.font(Arial, FontWeight.BOLD, 20);13. grid.add(chartTitle, 2, 0);14. / Subtitle 位于 columns 2-3, row 215. Text chartSubtitle = new Text(Goods and Services);16. grid.add(chartSubt

18、itle, 1, 1, 2, 1);17. / House icon 位于 column 1, rows 1-218. ImageView imageHouse = new ImageView(19. new Image(LayoutSample.class.getResourceAsStream(graphics/house.png);20. grid.add(imageHouse, 0, 0, 1, 2); 21. / Left label 位于 column 1 (bottom), row 322. Text goodsPercent = new Text(Goodsn80%);23.

19、GridPane.setValignment(goodsPercent, VPos.BOTTOM);24. grid.add(goodsPercent, 0, 2); 25. / Chart 位于 columns 2-3, row 326. ImageView imageChart = new ImageView(27. new Image(LayoutSample.class.getResourceAsStream(graphics/piechart.png);28. grid.add(imageChart, 1, 2, 2, 1); 29. / Right label 位于 column

20、4 (top), row 330. Text servicesPercent = new Text(Servicesn20%);31. GridPane.setValignment(servicesPercent, VPos.TOP);32. grid.add(servicesPercent, 3, 2);33. return grid;例 1-1中的setCenter()函数将这个grid pane添加到了border pane的center区域。 结果展示在图 1-9中。图 1-9 Border Pane中的Grid Pane当窗口缩放时，grid pane中的节点会根据它们的布局约束进行

21、缩放。FlowPaneFlowPane中的节点会连续地排列，并且会在窗格的边界自动换行（或列）。节点可以垂直地（按列）或水平地（按行）流动。一个垂直flow pane会在窗格的高度边界上包装节点，一个水平flow pane会在窗格的水平边界上包装节点。图 1-10展示了一个水平flow pane的例子，里面有多个带有数字的图标。作为对比，如果把它换成垂直flow pane，第一列会包含1-4号图标，第二列中则包含5-8号图标。译者注：包装（wrap），指在窗格的边界上发生自动换行（或换列）。图 1-10 水平 Flow Pane 示例Gap属性可以管理行和列之间的间隔大小。Padding属性可

22、以管理节点与窗格边界间的距离。例 1-6为一系列页面图标创建了一个水平flow pane。例 1-6 创建一个 Flow Pane1. public FlowPane addFlowPane() 2. FlowPane flow = new FlowPane();3. flow.setPadding(new Insets(5, 0, 5, 0);4. flow.setVgap(4);5. flow.setHgap(4);6. flow.setPrefWrapLength(170); / 偏好的宽度保证了只有两列7. flow.setStyle(-fx-background-color: DAE

23、6F3;);8. ImageView pages = new ImageView8;9. for (int i=0; i8; i+) 10. pagesi = new ImageView(11. new Image(LayoutSample.class.getResourceAsStream(12. graphics/chart_+(i+1)+.png);13. flow.getChildren().add(pagesi);14. return flow;例 1-1中的setRight()函数将这个水平flow pane添加到了border pane的right区域。 其结果展示在图 1-11

24、中。图 1-11 Border Pane 中的 Flow PaneTilePaneTile pane 和 flow pane 很相似。TilePane布局将所有的节点放于一个网格中，并且每个单元格（或tile）保持一致的大小。节点可以水平方式（按行）排列或以竖直方式（按列）排列。水平布局会在tile pane的宽度边界上包装节点，竖直布局会在高度边界上包装节点。使用prefColumns和prefRows属性可设定窗格的偏好大小。Gap属性可以管理行或列之间的间隔。Padding属性可以管理节点与窗格边界的距离。例 1-7创建了一个水平tile pane，形成了与图 1-10一样的布局。例 1

25、-7 创建一个Tile Pane1. TilePane tile = new TilePane();2. tile.setPadding(new Insets(5, 0, 5, 0);3. tile.setVgap(4);4. tile.setHgap(4);5. tile.setPrefColumns(2);6. tile.setStyle(-fx-background-color: DAE6F3;);7. ImageView pages = new ImageView8;8. for (int i=0; i8; i+) 9. pagesi = new ImageView(10. new I

26、mage(LayoutSample.class.getResourceAsStream(11. graphics/chart_+(i+1)+.png);12. tile.getChildren().add(pagesi);AnchorPaneAnchorPane布局窗格能让你将节点锚定到窗格的顶部、底部、左侧、右侧或者中间。当窗口缩放时，节点会保持其相对于锚点的位置。节点可被锚定到多个位置，并且同一位置可以锚定多个节点。图 1-12展示了一个anchor pane，它带有一个GridPane部分用到的grid pane和一个包含两个按钮的HBox，它们分别被锚定到了窗格的顶部和右下角。图 1-

27、12 Anchor Pane 示例例 1-8创建了一个anchor pane，其中有一个节点被锚定到了窗格顶部，另一个节点被锚定到了窗格右下角。这里用了例 1-5里面创建的grid pane作为top节点。例 1-8 创建一个 Anchor Pane1. public AnchorPane addAnchorPane(GridPane grid) 2. AnchorPane anchorpane = new AnchorPane();3. Button buttonSave = new Button(Save);4. Button buttonCancel = new Button(Cance

28、l);5. HBox hb = new HBox();6. hb.setPadding(new Insets(0, 10, 10, 10);7. hb.setSpacing(10);8. hb.getChildren().addAll(buttonSave, buttonCancel);9. anchorpane.getChildren().addAll(grid,hb); / 添加 例 1-5中的 grid pane10. AnchorPane.setBottomAnchor(hb, 8.0);11. AnchorPane.setRightAnchor(hb, 5.0);12. Anchor

29、Pane.setTopAnchor(grid, 10.0);13. return anchorpane;下面的语句将border pane的center区域替换成了这个anchor pane。1. border.setCenter(addAnchorPane(addGridPane();其结果展示在图 1-13中。图 1-13 Border Pane 中的 Anchor Pane当窗口缩放时，节点会根据它们的锚点保持各自的位置。从图 1-14中可以看出来，当窗口变小时，被锚定到窗格底部的按钮移动到了离sales信息更近的位置。图 1-14 缩放后的 Anchor Pane二、控制节点的大小和对

30、齐使用JavaFx内置布局窗格的一个主要优点是节点的大小和对齐可以交给窗格来完成。当窗格发生了缩放，节点会依据其偏好的尺寸范围进行缩放。注意，不是所有节点都可以缩放。UI控件和布局窗格可以缩放，但是形状、Text对象、Group对象是不可缩放的，它们在布局中被视为刚体。如果你想要在你的UI中做更多的尺寸控制，你可以直接设置它们的偏好尺寸范围。然后布局窗格会使用你的这些设定决定控件的尺寸。要管理控件的位置，你可以使用布局窗格的对齐属性。本话题针对节点的尺寸控制和对齐控制提供了简单示例。LayoutSizingAligning.java文件包含了本话题中使用的示例源码，LayoutSizingAl

31、igning.zip文件包含了这个示例的NetBeans工程。控制节点的大小布局通过调用prefWidth(height)andprefHeight(width)函数来获取节点的偏好尺寸。默认情况下，UI控件会基于其中的内容计算出默认的尺寸，并将它作为偏好尺寸。例如，一个Button对象计算出来的尺寸是由文本的长度、label中使用的字体，以及可能加入的图像的尺寸共同决定的。通常情况下，计算出来的尺寸应该刚好能让控件和label完全显示出来。UI控件也提供了默认的最小尺寸和最大尺寸，这是由控件的特定用途决定的。例如，一个Button对象的最大尺寸在默认情况下被设为其偏好尺寸，因为你通常不希望按

32、钮增长到任意大。但是，一个ScrollPane对象的最大尺寸是没有限制的，因为通常你需要它们增长并填补空间。你可以使用节点默认的尺寸限制，也可以自行设置这些值来达到你想要的效果。例如，图 2-1展示了一个border pane，里面有多个按钮和一个list view，它们都具有默认的大小。图 2-1 计算出来的尺寸假设你想要的外观是图 2-2那样的，其中的UI控件根据你想要的约束调整其大小。图 2-2 需要的尺寸应用程序经常需要直接为控件设置最小尺寸、偏好尺寸以及最大尺寸的约束。以下部分给出了有关覆盖计算尺寸、自定义外观的提示。把按钮设为相同尺寸你可能遇到过确定每个按钮宽高的问题，并且你可能会

33、将每个按钮的宽高设为这个按钮集合中最大的宽高。实际上更简单的做法是将这些工作交给布局窗格来完成。至于究竟用哪种窗格，这完全是由你想要实现的效果决定的。使用VBox图 2-1中的场景为右边的按钮建立了一个VBox布局窗格，并且使用了按钮的计算尺寸。这些按钮已经有了相同的高度，所以我们只需要调整一下宽度。图 2-2中的场景使用了一个VBox窗格，VBox窗格在默认情况下会让其宽度和最宽元素的偏好宽度相同，我们充分利用了这个特性。为了让所有的按钮都被缩放到VBox窗格的宽度，每个按钮的最大宽度被设为了Double.MAX_VALUE这个常量，这能让一个控件无限地增长。当然也可以不使用最大值常量，而是

34、将最大宽度设为一个特定值，比如80.0。例 2-1展示了如何用一个VBox窗格建立一列具有相同宽度的按钮。例 2-1 将一列按钮设为相同宽度1. BorderPane border = new BorderPane();2. border.setPadding(new Insets(20, 0, 20, 20);3. Button btnAdd = new Button(Add);4. Button btnDelete = new Button(Delete);5. Button btnMoveUp = new Button(Move Up);6. Button btnMoveDown = n

35、ew Button(Move Down);7. btnAdd.setMaxWidth(Double.MAX_VALUE);8. btnDelete.setMaxWidth(Double.MAX_VALUE);9. btnMoveUp.setMaxWidth(Double.MAX_VALUE);10. btnMoveDown.setMaxWidth(Double.MAX_VALUE);11. VBox vbButtons = new VBox();12. vbButtons.setSpacing(10);13. vbButtons.setPadding(new Insets(0, 20, 10,

36、 20); 14. vbButtons.getChildren().addAll(btnAdd, btnDelete, btnMoveUp, btnMoveDown);在本示例程序中，UI中的元素使用了一个border pane来布局。这一列按钮被置于border pane的right区域，从而将按钮的宽度限制在最宽按钮的偏好宽度。border pane的center区域会自动扩展来填充任何可用的空间，所以如果你将这个VBox放在center区域中，VBox窗格和其中的按钮都会自动扩展。使用TilePane图 2-1中的场景使用了一个HBox布局窗格来布局底部的按钮，并使用了按钮的计算尺寸。这

37、些按钮有不同的宽高。图 2-2中的场景使用了一个水平TilePane布局窗格，它在默认情况下会让每个小格(或cell)具有相同的尺寸，我们充分利用了这个特性。每个小格的尺寸刚好能容纳下窗格中最大节点的偏好尺寸。为了让这些按钮缩放到小格的尺寸，我们只需将它们的最大宽度和最大高度设为Double.MAX_VALUE这个常量。例 2-2展示了如何使用一个tile pane来创建一行具有相同宽高的按钮。例 2-2 将一行按钮设为相同宽高1. Button btnApply = new Button(Apply);2. Button btnContinue = new Button(Continue);

38、3. Button btnExit = new Button(Exit);4. btnExit.setStyle(-fx-font-size: 15pt;);5. btnApply.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);6. btnContinue.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);7. btnExit.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);8. TilePane tileButtons = new TilePane(Ori

39、entation.HORIZONTAL);9. tileButtons.setPadding(new Insets(20, 10, 20, 0);10. tileButtons.setHgap(10.0);11. tileButtons.setVGap(8.0);12. tileButtons.getChildren().addAll(btnApply, btnContinue, btnExit);Tile pane中的小格不会在窗口缩放时进行缩放，所以如果按钮被置于tile pane中，它们的大小将不会发生变化。注意一点，如果窗口的宽度变窄，tile pane中按钮会发生位置的变化，但不会变

40、小。将节点保持在偏好大小上当stage缩放时，stage中的布局窗格可能会将或多或少的空间分配给其中的控件。每个布局窗格有各自分配空间的规则，它会根据其中控件的最小尺寸、偏好尺寸、最大尺寸进行分配。通常情况下，最大尺寸为Double.MAX_VALUE的控件会扩展并填充空余的空间，而最大尺寸有限制的控件则不会扩展。例如，一个ListView对象的最大尺寸为无限，如果你想要限制它的高度为它的偏好尺寸，你可以将它的最大尺寸设为Control.USE_PREF_SIZE常数，就像例 2-3中展示的那样。例 2-3 将最大高度设为偏好高度1. ListView lvList = new ListVie

41、w();2. ObservableList items = FXCollections.observableArrayList (3. Hot dog, Hamburger, French fries, 4. Carrot sticks, Chicken salad);5. lvList.setItems(items);6. lvList.setMaxHeight(Control.USE_PREF_SIZE);默认情况下，按钮会增长到它的偏好大小。但是，如果没有覆盖按钮的最小宽度，它会缩小到只显示三个点(.)。为了防止一个按钮的宽度变得比偏好宽度还要小，可以将它的最小宽度设为偏好宽度，就像例

42、2-4那样。例 2-4 将最小宽度设为偏好宽度。1. Button btnMoveDown = new Button(Move Down);2. btnMoveDown.setMinWidth(Control.USE_PREF_SIZE);一个控件的偏好尺寸一开始是基于计算出来的结果的。你可以覆盖默认设置，并设置偏好尺寸为你想要的尺寸。以下语句覆盖了一个list view的偏好宽度。1. lvList.setPrefWidth(150.0);防止缩放如果你不想让一个控件的大小发生变化，可以将它的最小尺寸、最大尺寸和偏好尺寸都设为一样的大小。如果仅仅要防止宽度（或高度）改变，只需将宽度（或高度）

43、的约束尺寸设为相同值。在例 2-5中，我们创建了一个所有尺寸约束都是相同宽高的list，那么这个list的大小将不会随着窗口的缩放而缩放。我们还创建了一个所有宽度约束都设为相同值的按钮。例 2-5 设置尺寸约束来防止缩放1. ListView lvList = new ListView();2. lvList.setMinSize(150.0, Control.USE_PREF_SIZE);3. lvList.setMaxSize(150.0, Control.USE_PREF_SIZE);4. Button btnDelete = new Button(Delete);5. btnDelet

44、e.setMinWidth(80.0);6. btnDelete.setPrefWidth(80.0);7. btnDelete.setMaxWidth(80.0);对齐内容每个布局窗格都有一个默认的对齐其中节点的方式。例如，在HBox和VBox布局窗格中，节点是顶部对齐和左对齐的。在TilePane和FlowPane中，节点是居中对齐的。窗格本身一般默认是顶部对齐和左对齐的。你可以通过使用窗格的setAlignment()函数来管理节点和窗格的对齐方式。以下是javafx.geometry包中的一些enum类，其中包含了很多控制对齐的常量： HPos- 包含了确定水平对齐的值。 Pos- 包含了确定水平及竖直对齐的值。其中下划线左侧的值确定了竖直对齐方式，下划线右侧的值确定了水平对齐方式。例如，Pos.BOTTOM_LEFT将一个节点在垂直方向上置于底部，水平方向上置于最左边。 VPos- 包含了确定竖直对齐的值。图 2-3是通过例 2-6中的代码建立的， 如果不指定任何的对齐约束，布局窗格被置于左上角。图 2-3 默认的位置例 2-6 创建一个采用默认对齐方式的UI1. GridPane grid = new GridPane();2. grid.setHgap(10);3. grid.setVgap(12);4. HBox hbButtons = ne