JavaFX入门（四）：JavaFX布局（一）

说道GUI编程一定要谈到布局，JavaFX内置了大量的布局控件提供给我们使用。其实，JavaFX的布局控件和界面元素控件都是继承自javafx.scene.layout.Region类。我们这里只看布局控件类。布局控件我们在界面上一般是看不到的，它一个容器用于放置其它可视的界面元素控件。（JavaFX在线API文档：JavaFX8 API Online）
JavaFX布局控件的类图如下：

下面简单说说一些常用控件类的用法。这里我们使用SceneBuilder进行界面的设计，SceneBuilder可以在Gluon下载。SceneBuilder的界面如下，我们可以简单使用拖拽的方法进行界面设计。

1. Pane

Pane是其它布局控件类的父类，我们可以将Pane看成一个绝对布局控件，当我们将某个控件放置在Pane当中的时候，我们需要指定它的位置坐标（layoutX和layoutY）。当我们将一个控件拖拽到Pane中的时候，会自动生成layoutX和layoutY坐标。如图是使用Pane为父容器设计的一个简单界面：

FXML代码如下：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>


<Pane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="350.0" prefWidth="500.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Button layoutX="318.0" layoutY="210.0" mnemonicParsing="false" text="登录" />
      <Label layoutX="136.0" layoutY="104.0" text="用户名：" />
      <Label layoutX="136.0" layoutY="162.0" text="密 码：" />
      <TextField layoutX="212.0" layoutY="100.0" />
      <PasswordField layoutX="212.0" layoutY="158.0" />
   </children>
</Pane>

2. BorderPane

BorderPane将界面分割上上下左右中5部分，我们可以将控件放置在其中。常见的一个用例场景就是，软件主界面的上面是菜单栏和工具条，左边和右边可能是文档或者内容列表或者常用的工具集合，然后中间是主要内容显示区，下面是状态栏。
在SceneBuilder中我们将一个控件拖拽到BorderPane的时候，会有上下左右中的区域显示。

我们在这5个区域放置5个标签，如下图：

FXML代码如下：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>


<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
   <top>
      <Label style="-fx-font-family: Arial; -fx-font-size: 20px;" text="上" BorderPane.alignment="CENTER" />
   </top>
   <left>
      <Label style="-fx-font-family: Arial; -fx-font-s