使用 GridBag 定制器设计基本 Java 窗体

本教程是一个系列教程的第一部分(共两个部分),介绍了如何使用 NetBeans IDE GridBag 定制器的基本功能设计简单的 Java 窗体。
该系列教程可作为一个指南,介绍了如何设置 GUI 组件布局而无需手动编写布局代码,然后在现有窗体中进行其他更改,以实现项目所需的特定目标布局。

该系列教程中的每个文档都介绍了一组特定的功能。

目录

此页上的内容适用于 NetBeans IDE 7.1 和更高版本

要学习本教程,您需要具备下列软件和资源。

软件或资源 要求的版本
NetBeans IDE 7.1 及更高版本
Java 开发工具包 (JDK) 版本 6、7 或 8
gbcustomizer-basic-tutorial.zip 一个具有演示项目的档案文件,其中包含初始和目标教程布局。

注:

  • 您可以将用作该系列教程起点的项目作为 .zip 档案文件进行下载。
  • 本教程仅重点介绍如何设计容器的布局。在 GUI 中添加功能超出了本教程的范围。

打开示例项目

  1. 下载 gbcustomizer-basic-tutorial.zip 项目,并将其解压缩到您的计算机上的任意位置。
  2. 在 "Projects"(项目)标签中,选择 File(文件)> Open Project(打开项目),导航至在上一步中解压缩的 gbcustomizer-basic-tutorial 项目,然后单击 "Open Project"(打开项目)。项目文件夹可能包含在也称为 gbcustomizer-basic-tutorial 的文件夹中。
  3. 在 "Reference Problem"(引用问题)对话框中,单击 "Resolve"(解决)。IDE 将自动下载 JUnit 和 JUnit 4 库。按照 NetBeans IDE 安装程序中的说明安装所需的插件。安装完成后,单击 "Finish"(完成)。
  4. 展开源包 > Tutorial,然后双击 ContactsBasicInitial.java
    此时将在 GUI 构建器的 "Design"(设计)视图中打开样例窗体。

    样例窗体初始打开

GridBag 定制器概述

GridBag 布局定制器是 Java 平台提供的最灵活且最复杂的布局管理器之一。定制器将组件放在行和列网格中,使指定的组件可以占据多个行或列。所有行的高度并不一定相同。同样,所有列的宽度也并不一定相同。实际上,GridBagLayout 将组件放在网格的矩形(单元格)中,然后使用组件的首选大小确定所需的单元格大小。

要显示 GridBag 定制器,请完成以下步骤:

  1. 在 "Design"(设计)视图中,选择 "JFrame Form"(JFrame 窗体)。
  2. 右键单击该窗体,然后从上下文菜单中选择 Customize Layout(定制布局)。
    此时将打开 "Customize Layout"(定制布局)对话框,如下所示。

    GridBag 定制器

注:在本教程中,已设置了 GridBagLayout。如果使用其他窗体,请在上面的步骤 2 中右键单击该窗体,从上下文菜单中选择设置布局 > 网格包布局(这将启用定制布局菜单项)。然后完成该步骤。

网格区域

网格区域位于 "Customize Layout"(定制布局)对话框的右侧。它显示组件的网格式布局。
已添加样例窗体中的组件,但没有正确设置这些组件的布局。

工具栏

包含五个按钮的工具栏位于网格区域的上方。通过该工具栏,可方便地访问常用的命令,例如撤消、重做、启用相同间隙、隐藏空行和列以及测试布局。

工具栏

属性定制器

属性定制器位于 "Customize Layout"(定制布局)对话框的左上角。它便于您修改常用的布局约束,例如 Anchor(锚点)、Insets(插入量)等。

属性定制器

属性表单

属性表单位于属性定制器的下方。它显示选定组件的布局约束。

属性表单

设置组件布局

ContactsBasicInitial 窗体的组件在添加后设置为单行布局。在未指定布局约束时,GridBagLayout 将按这种方式设置组件布局。

移动

您可以根据需要使用简单的拖放功能移动组件。如果选定,将使用绿色突出显示组件。拖动组件时,组件的 Grid X(网格 X)和 Grid Y(网格 Y)属性将随之改变以反映新位置。根据需要,将自动创建新的列和行。

要创建下图所示的布局,请按如下方式将组件从第 2 列移到第 11 列:

  1. Surname: 标签和相邻文本字段拖至第二行的前两个单元格中。
  2. Street: 标签、相邻文本字段以及相邻 Browse 按钮拖至第三行的前三个单元格中。
  3. City: 标签、相邻文本字段以及相邻 Browse 按钮拖至第四行的前三个单元格中。
  4. State: 标签和相邻组合框拖至第五行的前两个单元格中。

    现在,组件将按目标布局进行放置。

没有额外列的布局

注:在移动组件时,将使用绿色突出显示目标单元格。

调整大小

在选定组件时,可通过拖动组件周围显示的小方形大小调整控柄来调整组件的大小。

要调整 First Name:Surname: 文本字段的大小并使其占据两个相邻的单元格,请完成以下步骤:

  1. 按住 Ctrl 键单击两个 JTextField 组件将其选中。
  2. 在选定两个 JTextField 的情况下,将光标放在单元格的右边缘上,单击并拖动,直到突出显示的橙色基准线包含右侧第 2 列中的相邻单元格。
  3. 松开光标以调整组件大小。

    此时将扩展 First Name:Surname: 文本字段以占据两个单元格(如下图所示)。同时,将突出显示占据的单元格。

已调整大小的文本字段

指定“填充”布局约束

虽然 First Name:Surname: 文本字段占据两个单元格,但它们具有首选大小并位于显示区域的中间位置。在继续操作之前,我们需要使用填充布局约束填充单元格的整个区域。

要设置足够宽的文本字段以水平填充其显示区域而不更改其高度,请在属性表单区域的填充组合框中选择水平

已调整大小的文本字段

预览

现已成功完成了 ContactsBasicInitial 窗体布局,您可以尝试使用该界面查看结果。您可以在工作过程中预览窗体,方法是单击定制器工具栏中的 "Test Layout"(测试布局)按钮 ()。此时窗体在单独的窗口中打开,以便您在构建并运行窗体之前对其进行测试。

设计预览

该预览用于测试布局的动态行为,即在调整所设计容器的大小时的布局行为。

指定“X 粗细”和“Y 粗细”约束

指定粗细将对 GridBagLayout 组件外观造成很大影响。粗细用于确定如何在列(X 粗细)和行(Y 粗细)之间分配空间;这对指定调整大小行为非常重要。
通常,粗细是将 0.0 和 1.0 作为最小和最大值指定的:根据需要,使用两者之间的数字。较大的数字表示组件的行或列具有较大的空间。

如果您尝试水平调整预览的容器大小,则可以看到布局组件保持相同的大小并位于容器的中间位置。甚至将“填充”约束设置为“水平”的 First Name:Surname: 字段也不会增大,因为“填充”约束指的是单元格内部区域,而不是单元格大小。换句话说,如果将组件的“填充”属性设置为以外的值,则表明它可以增大,但并不表明它需要增大。
“X 粗细”和“Y 粗细”布局约束决定了组件是否需要在水平和垂直方向增大。
如果一行(或列)中的两个组件具有非零 X 粗细(或 Y 粗细)约束值,则这些值决定了各个组件的增大幅度。例如,如果值为 0.6 和 0.4,则第一个组件获取 60% 可用额外空间,而第二组件获取 40% 空间。

要使设计的容器在水平方向上正确调整大小,请执行以下操作:

  1. 在 GridBag 定制器的网格区域中,选择 First Name: 标签右侧的文本字段。
  2. X 粗细布局约束值字段中键入 1.0,然后按 Enter 键。
  3. 在 GridBag 定制器的网格区域中,选择 Surname: 标签右侧的文本字段。
  4. X 粗细布局约束值字段中键入 1.0,然后按 Enter 键。
  5. 在 GridBag 定制器的网格区域中,选择 Street 标签右侧的文本字段。
  6. 填充组合框中选择水平,然后按 Enter 键。
  7. X 粗细布局约束值字段中键入 1.0,然后按 Enter 键。
  8. 在 GridBag 定制器的网格区域中,选择 City 标签右侧的文本字段。
  9. 填充组合框中选择水平,然后按 Enter 键。
  10. X 粗细布局约束值字段中键入 1.0,然后按 Enter 键。

要验证设计的容器是否在水平方向上正确调整大小,请单击定制器工具栏中的 "Test Layout"(测试布局)按钮 (),然后拖动 ContactsBasicInitial 窗体的边框。

已调整大小的 ContactsBasicInitial

锚定

如果组件大小比其显示区域小,则可以使用锚定功能确定组件的放置位置(在该区域内)。

在上一部分中水平调整 ContactsBasicInitial 窗体大小期间,您可能已注意到 State 组合框移到离 State 标签很远的位置。由于该组合框的首选大小比相应单元格小,因此,GridBagLayout 默认将该组件放在单元格的中心位置。

要更改此行为,请按如下方式指定锚点布局约束:

  1. 选择 State(状态)标签右侧的组合框,然后单击定制器属性表单Anchor(锚点)组合框右侧的箭头按钮 (箭头按钮)。
  2. 从下拉列表中选择行首

现在,在水平调整窗体大小时,State 组合框将锚定到该窗体的左侧。

锚定组合框

要将标签与左侧对齐,而不是像现在这样与中心对齐,请完成以下步骤:

  1. 选择 First name:Surname:StreetCityState 标签。

    注:可通过以下方法选择多个组件:在第一个组件上按鼠标左键,按住该组件并将其拖至最后一个组件上,就好像绘制一个包含所有标签的矩形一样。在松开鼠标后,将使用橙色边框和绿色背景突出显示所有五个组件,如下所示。

    已选定组件

  2. 将标签的锚点布局约束更改为行首
    标签将锚定到左侧。

    标签将锚定到左侧。

间距

默认情况下,每个组件都没有外部填充。Inset(插入量)约束用于指定组件的外部填充,即组件与其显示区域边缘之间的最小间隙。

在当前布局中,组件彼此放置得太近。要分隔这些组件,请执行以下操作:

  1. 按住 Ctrl 键单击以选择所有组件。
  2. 按 "Inset"(插入量)约束文本字段右侧的按钮。
  3. 在显示的对话框中,将 Top:(上:)和 Left:(左:)值更改为 5,然后单击 "OK"(确定)。

    "Insets"(插入量)对话框

    您的窗体现在应看起来像 ContactsBasicFinal.java 文件中的窗体(如果打开)。

    ContactsBasicFinal

小结

在本简短教程中,您设计了一个简单的窗体。在编辑布局时,您学会了如何使用 GridBag 定制器的基本功能。
现在,您可以转至此系列教程的第二部分(共两个部分)。在该部分中,您将修改 ContactsAdvancedInitial 窗体以熟悉 GridBag 定制器的高级功能。

转至使用 GridBag 定制器设计高级 Java 窗体

返回页首


另请参见

现在,您已完成了“使用 GridBag 定制器设计基本 Java 窗体”教程。有关向所创建的 GUI 中添加功能的信息,请参见:

返回页首

get support for the NetBeans

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2013, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo