組織SWT/JFace控件的利器：Layout
推薦：Java初學者專區
在可視化編程時代，大多數可視化的GUI開發工具都提供了按一定規則排列Form中的控件的功能。但是對于Java來說，支持可視化開發的工具并不多，雖然有一些這樣的工具，但它們大多是第三方的產品，穩定性方面有一些欠缺。因此，在很多時候使用Java編寫GUI程序時，就要使用布局（Layout）來控制Form上的控件的位置。
本文主要討論如何使用SWT中提供的布局來安排控件的位置，并通過實例來演示這一過程。在SWT中提供了5種布局：FillLayout, RowLayout, GridLayout, FormLayout, and StackLayout。下面我將詳細討論這5種布局的使用。
FillLayout
FillLayout是最簡單的布局。它可以將控件橫向或縱向進行排列，并且其中每個控件都有同樣的寬度或高度。使用FillLayout一般分為2步。
1. 建立一個FillLayout對象。
2. 使用setLayout方法設置Shell對象的布局。
下面代碼使用FillLayout在Shell上放了3個按鈕，代碼如下：
| package layout; import org.eclipse.swt.SWT; import org.eclipse.swt.widgets.*; import org.eclipse.swt.layout.*; public class TestFillLayout { public static void main(String[] args) { Display display = new Display(); Shell shell = new Shell(display, SWT.DIALOG_TRIM); shell.setText("FillLayout演示"); shell.setSize(400, 300); // 設置shell的布局 FillLayout layout = new FillLayout(); shell.setLayout(layout); // 向shell添加控件 Button button1 = new Button(shell, SWT.PUSH); button1.setText("按鈕1"); Button button2 = new Button(shell, SWT.PUSH); button2.setText("按鈕2"); Button button3 = new Button(shell, SWT.PUSH); button3.setText("按鈕3"); shell.open(); while (!shell.isDisposed()) { if (!display.readAndDispatch()) { display.sleep(); } } display.dispose(); } } |
界面如圖1所示。
 圖 1 使用橫向FillLayout的Shell界面 |
如果想要Shell上的控件縱向排列，可以在建立布局時將type屬性設置成SWT.VERTICAL。代碼如下：
| FillLayout layout = new FillLayout(); layout.type = SWT.VERTICAL; shell.setLayout(layout); |
圖2是控件縱向排列的效果圖
 圖 2 使用縱向FillLayout的Shell界面 |
FillLayout的構造函數重載了2次。其中一個構造函數有一個參數，這個參數就是type。因此，我們也可以通過FillLayout的構造函數對type賦值。
| shell.setLayout(new FillLayout(SWT.VERTICAL)); |
RowLayout
RowLayout的功能和FillLayout差不多。只是它和FillLayout的最大區別是每個控件并不一定是一樣大小。而且RowLayout是按行排列，這一點和FillLayout是不同的。在一行排滿后，就從下一行開始排列。和RowLayout配合使用的還有一個RowData類。這個類可以設置每一個控件的大小。下面代碼是一個使用RowLayout的小例子。
| package layout; import org.eclipse.swt.SWT; import org.eclipse.swt.widgets.*; import org.eclipse.swt.layout.*; public class TestRowLayout { public static void main(String[] args) { Display display = new Display(); Shell shell = new Shell(display, SWT.DIALOG_TRIM); shell.setText("RowLayout演示"); shell.setSize(220, 200); // 將Shell的布局設置成RowLayout RowLayout layout = new RowLayout(SWT.HORIZONTAL); layout.spacing = 30; layout.marginLeft = 30; layout.marginTop = 30; shell.setLayout(layout); RowData rowData = new RowData(); rowData.height = 50; rowData.width = 100; // 向shell添加控件 Button button1 = new Button(shell, SWT.PUSH); button1.setText("按鈕1"); button1.setLayoutData(rowData); Button button2 = new Button(shell, SWT.PUSH); button2.setText("按鈕2"); Button button3 = new Button(shell, SWT.PUSH); button3.setText("按鈕3"); shell.open(); while (!shell.isDisposed()) { if (!display.readAndDispatch()) { display.sleep(); } } display.dispose(); } } |
圖3是使用RowLayout的效果圖
 圖3 RowLayout效果圖 |
可以在兩個地方設置和RowLayout相關的數據，一個是RowData，它可以設置控件的大小。另外一個就是RowLayout本身，它可以設置控件開始排列的起點坐標（marginLeft和marginTop）、以及控件之間的間距等信息（spacing)。在RowLayout中有個很重要的屬性justify。這個屬性默認是false。當它為true時，將自動調整行或整列的控件，使其盡量占滿一行或一列。
GridLayout
GridLayout是SWT中最重要的布局。這個布局十分強大，它可以滿足大多數的需要。而且它的網絡可以通過Composite對象進行嵌套。GridLayout有兩個構造函數。一個是默認的構造函數public GridLayout()。另外一個需要兩個函數public GridLayout(int numColumns, boolean makeColumnsEqualWidth)。其中numColumns是這個網格的列數，而另外一個參數將使每一列等寬。下面的代碼是一個完整的關于GridLayout的例子。
| package layout; import org.eclipse.swt.SWT; import org.eclipse.swt.widgets.*; import org.eclipse.swt.layout.*; public class TestGridLayout { public static void main(String[] args) { Display display = new Display(); Shell shell = new Shell(display); shell.setText("GridLayout演示"); GridLayout layout = new GridLayout(); layout.numColumns = 3; layout.makeColumnsEqualWidth = true; shell.setLayout(layout); // 建立左上角的按鈕 GridData data = new GridData(GridData.FILL_BOTH); data.widthHint = 200; //按鈕的初始寬度為200 Button one = new Button(shell, SWT.PUSH); one.setText("按鈕1"); one.setLayoutData(data); // 建立一個Composite對象，并在上面放三個按鈕 Composite composite = new Composite(shell, SWT.NONE); data = new GridData(GridData.FILL_BOTH); data.horizontalSpan = 2; // Composite的占兩個Cell composite.setLayoutData(data); layout = new GridLayout(); layout.numColumns = 1; layout.marginHeight = 15; layout.marginRight = 150; composite.setLayout(layout); // 建立第二個按鈕 data = new GridData(GridData.FILL_BOTH); Button two = new Button(composite, SWT.PUSH); two.setText("按鈕2"); two.setLayoutData(data); // 建立第三個按鈕 data = new GridData(GridData.HORIZONTAL_ALIGN_END); Button three = new Button(composite, SWT.PUSH); three.setText("按鈕3"); three.setLayoutData(data); // 建立第四個按鈕 data = new GridData(GridData.HORIZONTAL_ALIGN_BEGINNING); Button four = new Button(composite, SWT.PUSH); four.setText("按鈕4"); four.setLayoutData(data); // 建立下面的一個長按鈕 data = new GridData(); data.horizontalAlignment = GridData.FILL; data.grabExcessHorizontalSpace = true; data.horizontalSpan = 3; data.verticalSpan = 2; data.heightHint = 150; Button five = new Button(shell, SWT.PUSH); five.setText("按鈕5"); five.setLayoutData(data); shell.pack(); shell.open(); while (!shell.isDisposed()) { if (!display.readAndDispatch()) { display.sleep(); } } display.dispose(); } } |
上面的例子將網格設成3列，在第一行的第一列放置了第一個按鈕。然后將一個Composite對象放到第一行第二、三列（data.horizontalSpan = 2），在這個對象上放到個按鈕。最后在下面建立了第5個按鈕。
FormLayout
FormLayout是SWT中最復雜的布局。在這一部分我將詳細討論FormLayout。這個布局雖然復雜，但它確可以對控件進行更多的控制。
FormLayout和其它的布局類似，也有一個FormData類用于設置布局信息。但我其它的布局不同的是FormLayout使用另外一個類來控制控件的大小和位置，這個類是FormAttachment。控件的上、下、左、右分別要4個FormAttachment對象來控制。通過這些FormAttachment對象可以控制當前控件如何在它的父窗口中顯示，以及和其它控件的相對位置。
在FormLayout中，描述位置的4個屬性（left、top、right、bottom）都是一個FormAttachment對象。而并不是一個簡單的值。在FormAttachment中比較常用的屬性是numerator，這個屬性描述控件的4個邊距Shell的邊緣的距離。
按百分比放置控件
可以通過FormAttachment的numerator屬性設置百分比。下面的代碼將一個按鈕在它的父窗口的寬度的40%處放置按鈕。當Shell的盡寸改變后，按鈕的位置也隨之變化，但按鈕的大小并不改變。
| Button button = new Button(shell, SWT.PUSH); button.setText("按鈕"); FormData data = new FormData(); data.left = new FormAttachment(40); button.setLayoutData(data); |
但如果同時設置data的left和right屬性又如何呢？如果是這樣的話，那么這個按鈕的尺寸就會改變。下面的例子將一個按鈕放到水平方向中心的位置。我們可以將left的比例設計為40%，而right的比例設置60%。如果這樣設置，無論窗體如何變化，這個按鈕始終在水平方向的中心。這是一個簡單的數學計算。如果一個按鈕的左邊在40%的位置，而右邊在60%的位置，也就是說，按鈕的右邊距窗體的右邊也是40%。這樣可以算出，按鈕的寬度占窗體的20%（哈哈，要想使用FormLayout，可要有一定的數學基礎啊!）。
| Button button = new Button(shell, SWT.PUSH); button.setText("按鈕"); FormData data = new FormData(); data.left = new FormAttachment(40); data.right = new FormAttachment(60); button.setLayoutData(data); |
不過在使用FormAttachment同時給left和right或top和bottom賦值時，不能將這兩個比例設成一樣的，要不就將按鈕壓扁了（按鈕看不到了，寬或高為0）。如果想要按鈕在中心位置，這兩個比例的和必須是100。而且left(top)的比例要小于right(bottom)的比例。
設置控件的偏移量
SWT之所以提供了布局，目的就是讓你盡量少使用絕對坐標來設置控件。但在有時，我們又必須使用絕對坐標。如果是這樣的話，你可以使用控件的setLocation來設置，也可以使用FormAttachment提供的偏移量去達到同樣的效果。
| FormData data = new FormData(); data.left = new FormAttachment(0, 20); data.top = new FormAttachment(0, 40); button.setLayoutData(data); |
上面的代碼相當于setLocation(20, 40)，即將按鈕設置的位置設置成(20, 40)。
根據其它控件的調整位置
一般在窗體上都有不只一個控件，這些控件之間都是有一定關系的，它們的位置也是相對的。因此，FormLayout為我們提供了根據其它控件設置當控件位置的方法。如根據另外一個控件設置當前控件左邊或右邊的位置。
下面的例子將根據一個按鈕的位置設置另外一個按鈕的位置。有兩個按鈕，第二個按鈕根據第一個按鈕的底邊設置自己的位置。
| Button button1 = new Button(shell, SWT.PUSH); button1.setText("按鈕1"); FormData data1 = new FormData(); data1.top = new FormAttachment(20); data1.left = new FormAttachment(40); data1.right = new FormAttachment(50); button1.setLayoutData(data1); // 第二個按鈕 Button button2 = new Button(shell, SWT.PUSH); button2.setText("按鈕2"); FormData data2 = new FormData(); data2.left = new FormAttachment(button1, 0, SWT.CENTER); data2.top = new FormAttachment(button1); button2.setLayoutData(data2); |
上面的"按鈕2"將根據"按鈕1"將自己水平方向的位置設置成"按鈕1"的中心位置。
StackLayout
我們在最后一部分來討論StackLayout，并不是因為StackLayout在這5種布局中最復雜，而是這個布局并不在org.eclipse.swt.layout中，而在org.eclipse.swt.custom中。從這個布局的名子可看出，它是將許多SWT控件放到一個集合中，這些控件有同樣的尺寸和位置。但只有在最上面的控件才能被顯示。
StackLayout只有一個空的構造函數，它只有一個屬性topControl，這個屬必確定了哪一個控件可以被顯示。這個屬性默認值是null，也就是說，如果不設置它，那將沒有控件被顯示在窗體上。但要注意的是，設置topControl并不會將StackLayout中控件刪除。
| package layout; import org.eclipse.swt.events.*; import org.eclipse.swt.widgets.*; import org.eclipse.swt.custom.StackLayout; import org.eclipse.swt.SWT; public class TestStackLayout { public static void main(String[] args) { Display display = new Display(); Shell shell = new Shell(display); StackLayout layout = new StackLayout(); shell.setLayout(layout); StackLayoutSelectionAdapter adapter = new StackLayoutSelectionAdapter(shell, layout); Button one = new Button(shell, SWT.PUSH); one.setText("按鈕1"); one.addSelectionListener(adapter); Button two = new Button(shell, SWT.PUSH); two.setText("按鈕2"); two.addSelectionListener(adapter); Button three = new Button(shell, SWT.PUSH); three.setText("按鈕3"); three.addSelectionListener(adapter); layout.topControl = one; shell.open(); while (!shell.isDisposed()) { if (!display.readAndDispatch()) { display.sleep(); } } display.dispose(); } } class StackLayoutSelectionAdapter extends SelectionAdapter { Shell shell; StackLayout layout; public StackLayoutSelectionAdapter(Shell shell, StackLayout layout) { this.shell = shell; this.layout = layout; } public void widgetSelected(SelectionEvent event) { Control control = layout.topControl; Control[] children = shell.getChildren(); int i = 0; for (int n = children.length; i < n; i++) { Control child = children[i]; if (child == control) { break; } } ++i; if (i >= children.length) i = 0; layout.topControl = children[i]; shell.layout(); } } |
上面這個例子在Shell上有三個按鈕，通過按最上面顯示的按鈕，這三個按鈕循環交替顯示。