当前页面: 开发资料首页 → Eclipse 专题 → Eclipse界面编写实例(2)--理解布局3
Eclipse界面编写实例(2)--理解布局3
摘要: Eclipse界面编写实例(2)--理解布局3
2.3 GridLayout
GridLayout可能是最常用的、功能最强大的标准布局类了，当然它也最复杂。GridLayout把容器里的组件摆放在一个格子里，它有许多可设置的域，并且同RowLayout类似，组件可以有相应的布局数据，称作GridData。GridLayout的强大在于它可以通过GridData来设置每一个控件。
2.3.1 GridLayout的可设置域
numColumns<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />
numColumns 域是GridLayout的最重要的域，并且通常是第一个需要设置的域。组件从左到右摆放在列里，当numColumns + 1个组件添加到容器中时，将创建一个新行。默认只有一列。以下代码创建了由GridLayout管理的含有5个具有不同宽度的按钮的Shell，随后的列表显示了当numColumns设为1,2或3时的效果。
Display display = new Display();
Shell shell = new Shell(display);
GridLayout gridLayout = new GridLayout();
gridLayout.numColumns = 3;
shell.setLayout(gridLayout);
new Button(shell, SWT.PUSH).setText("B1");
new Button(shell, SWT.PUSH).setText("Wide Button 2");
new Button(shell, SWT.PUSH).setText("Button 3");
new Button(shell, SWT.PUSH).setText("B4");
new Button(shell, SWT.PUSH).setText("Button 5");
shell.pack();
shell.open();
while (!shell.isDisposed()) {
if (!display.readAndDispatch()) display.sleep();
}
<table style="MARGIN-LEFT: 5.4pt; BORDER-COLLAPSE: collapse; mso-padding-alt: 0cm 0cm 0cm 0cm" cellSpacing=0 cellPadding=0 border=0> <tr> <td style="BORDER-RIGHT: windowtext 0.75pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: #d4d0c8; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0cm; BORDER-LEFT: #d4d0c8; WIDTH: 4cm; PADDING-TOP: 0cm; BORDER-BOTTOM: windowtext 0.75pt solid; BACKGROUND-COLOR: transparent" vAlign=top width=151>numColumns = 1
numColumns = 2
numColumns = 3
<?xml:namespace prefix = v ns = "urn:schemas-microsoft-com:vml" />
makeColumnsEqualWidth
makeColumnsEqualWidth域强制各列具有相同的宽度。默认为false。把上面的例子改为含有3个等宽的列，效果如下图所示（注意组件在列中左对齐，原因见后面介绍）：
MarginWidth, MarginHeight, HorizontalSpacing, 以及 VerticalSpacing
GridLayout边距和间距域与RowLayout的类似，不同的是左边距和右边距统一成marginWidth，上边距和下边距统一成marginHeight。同样可以分别设置horizontalSpacing和verticalSpacing（RowLayout中的间距根据它的type类型设置水平间距或者垂直间距）。
2.3.2 GridData对象的域
GridData是GridLayout对应的布局数据，可以通过setLayoutData设置组件的布局数据。例如，可以采用如下代码设置按钮的GridData：
Button button1 = new Button(shell, SWT.PUSH);
button1.setText("B1");
button1.setLayoutData(new GridData());
以上代码创建了一个含有默认值的GridData对象，其效果和没有设置布局数据是一样的。有两种方式可以创建含有指定域值的GridData对象。第一种方式就是直接设置各个域值，例如：
GridData gridData = new GridData();
gridData.horizontalAlignment = GridData.FILL;
gridData.grabExcessHorizontalSpace = true;
button1.setLayoutData(gridData);
第二种方式是通过利用便利的API来设置GridData的风格位：
button1.setLayoutData(new GridData(GridData.HORIZONTAL_ALIGN_FILL | GridData.GRAB_HORIZONTAL));
实际上，为了更方便还提供了一些风格位的组合，例如：
button1.setLayoutData(new GridData(GridData.FILL_HORIZONTAL));
注意FILL_ 风格同时设置对齐方式和占位方式。GridData的风格位只对布尔值和枚举值有效，数字域需要直接设置。
(使用Swing者注意) 最后使用GridData时需要主要的是：不要重复使用GridData 对象。每一个由GridLayout容器管理的组件必须有单独的GridData对象。如果组件的布局数据为空，则SWT会自动创建一个单独的GridData对象。
HorizontalAlignment 及 VerticalAlignment
alignment域指定组件在格子里按照水平或者垂直方式摆放。可以设置以下值：
· BEGINNING
· CENTER
· END
· FILL
默认horizontalAlignment设为BEGINNING （左对齐），verticalAlignment设为CENTER。
参考前面的五个按钮的例子，设置三列，并对Button 5设置不同的horizontalAlignment，如图：
<table style="MARGIN-LEFT: 5.4pt; BORDER-COLLAPSE: collapse; mso-padding-alt: 0cm 0cm 0cm 0cm" cellSpacing=0 cellPadding=0 border=0> <tr> <td style="BORDER-RIGHT: windowtext 0.75pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: #d4d0c8; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0cm; BORDER-LEFT: #d4d0c8; WIDTH: 216pt; PADDING-TOP: 0cm; BORDER-BOTTOM: windowtext 0.75pt solid; BACKGROUND-COLOR: transparent" vAlign=top width=288>horizontalAlignment = GridData.BEGINNING
(默认)
</td> <td style="BORDER-RIGHT: #d4d0c8; PADDING-RIGHT: 5.4pt; BORDER-TOP: #d4d0c8; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0cm; BORDER-LEFT: #d4d0c8; WIDTH: 207pt; PADDING-TOP: 0cm; BORDER-BOTTOM: windowtext 0.75pt solid; BACKGROUND-COLOR: transparent" vAlign=top width=276>horizontalAlignment = GridData.CENTER
</td> <td style="BORDER-RIGHT: #d4d0c8; PADDING-RIGHT: 5.4pt; BORDER-TOP: #d4d0c8; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0cm; BORDER-LEFT: #d4d0c8; WIDTH: 207pt; PADDING-TOP: 0cm; BORDER-BOTTOM: windowtext 0.75pt solid; BACKGROUND-COLOR: transparent" vAlign=top width=276>horizontalAlignment = GridData.END
</td> <td style="BORDER-RIGHT: #d4d0c8; PADDING-RIGHT: 5.4pt; BORDER-TOP: #d4d0c8; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0cm; BORDER-LEFT: #d4d0c8; WIDTH: 207pt; PADDING-TOP: 0cm; BORDER-BOTTOM: windowtext 0.75pt solid; BACKGROUND-COLOR: transparent" vAlign=top width=276>horizontalAlignment = GridData.FILL
</td> <td style="BORDER-RIGHT: #d4d0c8; PADDING-RIGHT: 5.4pt; BORDER-TOP: #d4d0c8; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0cm; BORDER-LEFT: #d4d0c8; WIDTH: 207pt; PADDING-TOP: 0cm; BORDER-BOTTOM: #d4d0c8; BACKGROUND-COLOR: transparent" vAlign=top width=276>HorizontalIndent
horizontalIndent域可以使组件向右移动指定的像素值。只有当horizontalAlignment设为BEGINNING时有效。不能通过风格位设置缩进，以下代码演示了把Button 5缩进4个像素：
GridData gridData = new GridData();
gridData.horizontalIndent = 4;
button5.setLayoutData(gridData);
HorizontalSpan 及 VerticalSpan
span域可以使控件跨越几个格子，常常与FILL风格一起使用。以下代码把Button 5扩展到了两个格子：
GridData gridData = new GridData();
gridData.horizontalAlignment = GridData.FILL;
gridData.horizontalSpan = 2;
button5.setLayoutData(gridData);
如果要把Button 2扩展到两个格子，可以这样写：
GridData gridData = new GridData();
gridData.horizontalAlignment = GridData.FILL;
gridData.horizontalSpan = 2;
button2.setLayoutData(gridData);
还可以把Button 3垂直扩展两个格子：
GridData gridData = new GridData();
gridData.verticalAlignment = GridData.FILL;
gridData.verticalSpan = 2;
button3.setLayoutData(gridData);
GrabExcessHorizontalSpace 及 GrabExcessVerticalSpace
grabExcessHorizontalSpace和grabExcessVerticalSpace主要用在象Text, List及Canvas这样的重量级组件上，当它们所在的容器增大时，可以使它们自动增大。例如如果设置一个Text组件可以横向扩展，那么当用户调整Shell的宽度时，Text组件会自动扩展填满新的横向空间，而同一行上的其他组件保持宽度不变。当然，当Shell变小时，设置了此属性的组件也是首先收缩的。在可以调整容器大小的环境中，很容易的就能想到设置grabExcessSpace域。作为例子，我们仍然采用前面Button 3垂直扩展两个单元格的例子，如下：
如果我们调整窗口的大小，那么只有窗口变大了：
现在设置Button 3可以横向和纵向扩展，B1和B4仅纵向填充（不扩展），重新调整之后，如图：
这一次，Button 3在两个方向上变化了，B4只在纵向上变化，其它保持不变。这是由于设置了Button 3在纵向上扩展，最后一行变高了的结果。注意B1没有变化，尽管对它设置了纵向填充，因为它所在的行没有变化。并且Button 3还设置了横向扩展和填充，它所在的列变宽了，所以它也变宽了。以下是代码：
Button button1 = new Button(shell, SWT.PUSH);
button1.setText("B1");
GridData gridData = new GridData();
gridData.verticalAlignment = GridData.FILL;
button1.setLayoutData(gridData);
new Button(shell, SWT.PUSH).setText("Wide Button 2");
Button button3 = new Button(shell, SWT.PUSH);
button3.setText("Button 3");
gridData = new GridData();
gridData.verticalAlignment = GridData.FILL;
gridData.verticalSpan = 2;
gridData.grabExcessVerticalSpace = true;
gridData.horizontalAlignment = GridData.FILL;
gridData.grabExcessHorizontalSpace = true;
button3.setLayoutData(gridData);
Button button4 = new Button(shell, SWT.PUSH);
button4.setText("B4");
gridData = new GridData();
gridData.verticalAlignment = GridData.FILL;
button4.setLayoutData(gridData);
new Button(shell, SWT.PUSH).setText("Button 5");
在典型的应用程序窗口中，通常会设置至少一个组件可以扩展。如果有多于一个的组件可以扩展，那么它们平均分配扩展的空间，如图所示：
最后需要注意的是，如果一个组件可以横向扩展，并且它的父容器变宽了，那么组件所在的整列都变宽了。同样如果组件可以纵向扩展，并且其父容器变高了，那么组件所在的整行都变高了。这样如果相应的行或列里有其它的组件设置了填充（fill）属性，那么这些组件也会被拉伸。具有左对齐、居中对齐、右对齐的组件不会被拉伸，它们仍然在所在的行或列里左对齐、居中对齐或右对齐。
WidthHint 及 HeightHint
widthHint和heightHint域指示了希望组件可以具有的宽度和高度，前提是不与GridLayout其他要求约束矛盾。参见前面五个按钮、三列的例子，假设要设置Button 5宽70像素、高40像素，代码如下：
GridData gridData = new GridData();
gridData.widthHint = 70;
gridData.heightHint = 40;
button5.setLayoutData(gridData);
Button 5自然尺寸如左图所示，右图是70像素宽、 40像素高的图示：
注意，如果Button 5的horizontalAlignment设置为FILL，那么GridLayout不能满足其宽为70像素的请求。
最后一点，在一个平台上表现好的设置，在另一个平台上可能会有差别。由于不同平台之间的字体大小和组件的自然大小不一样，因此硬编码像素值不是布局窗体的最好方法。因而，除非万不得已，尽量少用size hint。
2.3.3 一个复杂的GridLayout例子
前面列举的GridLayout例子都比较简单，只是用来说明各个域的效果如何。接下来，举一个很复杂的例子，把各个域的效果综合在一起。我们先手工画下要创建的窗体的草图，帮助我们决定需要多少列，那些组件需要扩展：
然后根据上面的草图开始编码，如下所示。注意，我们添加了一些逻辑来使例子更生动一些，比如，Browse…打开一个FileDialog对话框，用来读入一个图像文件，Canvas在渲染监听器中显示图像，Delete删除图像，Enter打印当前信息。示例代码放在单一的main方法里，目的是使我们注重于布局代码，而不是程序风格上。
import org.eclipse.swt.*;
import org.eclipse.swt.widgets.*;
import org.eclipse.swt.layout.*;
import org.eclipse.swt.events.*;
import org.eclipse.swt.graphics.*;
public class ComplexGridLayoutExample {
static Display display;
static Shell shell;
static Text dogName;
static Combo dogBreed;
static Canvas dogPhoto;
static Image dogImage;
static List categories;
static Text ownerName;
static Text ownerPhone;
public static void main(String[] args) {
display = new Display();
shell = new Shell(display);
shell.setText("Dog Show Entry");
GridLayout gridLayout = new GridLayout();
gridLayout.numColumns = 3;
shell.setLayout(gridLayout);
new Label(shell, SWT.NONE).setText("Dog's Name:");
dogName = new Text(shell, SWT.SINGLE | SWT.BORDER);
GridData gridData = new GridData(GridData.HORIZONTAL_ALIGN_FILL);
gridData.horizontalSpan = 2;
dogName.setLayoutData(gridData);
new Label(shell, SWT.NONE).setText("Breed:");
dogBreed = new Combo(shell, SWT.NONE);
dogBreed.setItems(new String [] {"Collie", "Pitbull", "Poodle", "Scottie"});
dogBreed.setLayoutData(new GridData(GridData.HORIZONTAL_ALIGN_FILL));
Label label = new Label(shell, SWT.NONE);
label.setText("Categories");
label.setLayoutData(new GridData(GridData.HORIZONTAL_ALIGN_CENTER));
new Label(shell, SWT.NONE).setText("Photo:");
dogPhoto = new Canvas(shell, SWT.BORDER);
gridData = new GridData(GridData.FILL_BOTH);
gridData.widthHint = 80;
gridData.heightHint = 80;
gridData.verticalSpan = 3;
dogPhoto.setLayoutData(gridData);
dogPhoto.addPaintListener(new PaintListener() {
public void paintControl(final PaintEvent event) {
if (dogImage != null) {
event.gc.drawImage(dogImage, 0, 0);
}
}
});
categories = new List(shell, SWT.MULTI | SWT.BORDER | SWT.V_SCROLL);
categories.setItems(new String [] {
"Best of Breed", "Prettiest Female", "Handsomest Male",
"Best Dressed", "Fluffiest Ears", "Most Colors",
"Best Performer", "Loudest Bark", "Best Behaved",
"Prettiest Eyes", "Most Hair", "Longest Tail",
"Cutest Trick"});
gridData = new GridData(GridData.HORIZONTAL_ALIGN_FILL | GridData.VERTICAL_ALIGN_FILL);
gridData.verticalSpan = 4;
int listHeight = categories.getItemHeight() * 12;
Rectangle trim = categories.computeTrim(0, 0, 0, listHeight);
gridData.heightHint = trim.height;
categories.setLayoutData(gridData);
Button browse = new Button(shell, SWT.PUSH);
browse.setText("Browse...");
gridData = new GridData(GridData.HORIZONTAL_ALIGN_FILL);
gridData.horizontalIndent = 5;
browse.setLayoutData(gridData);
browse.addSelectionListener(new SelectionAdapter() {
public void widgetSelected(SelectionEvent event) {
String fileName = new FileDialog(shell).open();
if (fileName != null) {
dogImage = new Image(display, fileName);
}
}
});
Button delete = new Button(shell, SWT.PUSH);
delete.setText("Delete");
gridData = new GridData(GridData.HORIZONTAL_ALIGN_FILL | GridData.VERTICAL_ALIGN_BEGINNING);
gridData.horizontalIndent = 5;
delete.setLayoutData(gridData);
delete.addSelectionListener(new SelectionAdapter() {
public void widgetSelected(SelectionEvent event) {
if (dogImage != null) {
dogImage.dispose();
dogImage = null;
dogPhoto.redraw();
}
}
});
Group ownerInfo = new Group(shell, SWT.NONE);
ownerInfo.setText("Owner Info");
gridLayout = new GridLayout();
gridLayout.numColumns = 2;
ownerInfo.setLayout(gridLayout);
gridData = new GridData(GridData.HORIZONTAL_ALIGN_FILL);
gridData.horizontalSpan = 2;
ownerInfo.setLayoutData(gridData);
new Label(ownerInfo, SWT.NONE).setText("Name:");
ownerName = new Text(ownerInfo, SWT.SINGLE | SWT.BORDER);
ownerName.setLayoutData(new GridData(GridData.FILL_HORIZONTAL));
new Label(ownerInfo, SWT.NONE).setText("Phone:");
ownerPhone = new Text(ownerInfo, SWT.SINGLE | SWT.BORDER);
ownerPhone.setLayoutData(new GridData(GridData.FILL_HORIZONTAL));
Button enter = new Button(shell, SWT.PUSH);
enter.setText("Enter");
gridData = new GridData(GridData.HORIZONTAL_ALIGN_END);
gridData.horizontalSpan = 3;
enter.setLayoutData(gridData);
enter.addSelectionListener(new SelectionAdapter() {
public void widgetSelected(SelectionEvent event) {
System.out.println("\nDog Name: " + dogName.getText());
System.out.println("Dog Breed: " + dogBreed.getText());
System.out.println("Owner Name: " + ownerName.getText());
System.out.println("Owner Phone: " + ownerPhone.getText());
System.out.println("Categories:");
String cats[] = categories.getSelection();
for (int i = 0; i < cats.length; i++) {
System.out.println("\t" + cats[i]);
}
}
});
shell.pack();
shell.open();
while (!shell.isDisposed()) {
if (!display.readAndDispatch()) display.sleep();
}
if (dogImage != null) {
dogImage.dispose();
}
}
}
以下显示了当Mary Smith输入Fifi后的效果：
如果窗体尺寸变大，布局重新调整为如下所示：
注意以下内容：
l 一共有3列7行；
l dogPhoto Canvas可以变宽和变高，因为它在横向和纵向都设置了填充和扩展（本例没有调整Image的大小，可以编程实现）；
l dogBreed Combo可以变宽，因为设置了它横向填充，并且和Canvas在相同的列里；
l dogName Text可以变宽，因为设置了它横向填充，并且它跨越的一列里含有Canvas；
l ccategories List可以变高，因为设置了它纵向填充，并且它跨越的行里含有Canvas；
l 因为categories List变高了，它的垂直滚动条消失了（它没有变宽）；
l ownerInfo Group变宽了，因为设置了它横向填充，且它跨越的一列里含有Canvas；
l ownerInfo Group作为Composite的子类，拥有自己的2行2列的GridLayout；
l ownerName和ownerPhone Texts变宽了，因为Group变宽了，并且在Group的GridLayout里设置了它们横向填充和扩展；
l browse和delete 按钮轻微交错，由于设置了横向填充，它们宽度保持一致；
l delete Button在它所在的行上靠上对齐；
l Categories标签在categories List上居中对齐；
l enter按钮在它跨越的三列里水平右对齐；
l dogPhoto Canvas设置了宽度和高度初始值（width and height hints），因为我们想尽可能的设置图像大小为80 x 80 像素；
l categories List设置了高度初始值，为List字体高度的12倍，因为我们想让列表初始显示12行。