簡述java程序設計中界面設計中的三種布局方式

JPanel panel1=(JPanel)getContentPane();

panel1.setLayout(new FlowLayout());

憑著我們現在所積累的閱讀程序的功夫，應該能夠很快地知道我們通過第壹條語句創建了壹個容器JPanel類的panel1。

而接下來，我們則調用了panel1.setLayout(new FlowLayout())，在上壹章中，我們壹直沒有對它進行相應的分析。現在該是揭開它的面紗的時候了。

單詞layout的中文意思是“布局”、“布置”，setLayout就是設置布局格式。也就是說，容器panel1的方法setLayout是用來設置布局格式的。那麽，我們壹直用的是什麽模式呢？對，就是後面括號裏的FlowLayout（）。顧名思義，也就是流布局方式。這是壹種順其自然的方式：從左到右，壹個個對象地擺放，擺不下，就擺到下壹行。所以，我們就無法去控制它。

從本章開始，我們就要學習壹種控制布局的方法。在Java語言中，提供了各種布局管理器，以便大家能夠達到這壹目的。

通常我們最常使用的布局管理器是：Border Layout（邊框布局管理器），如下圖所示，邊框布局管理器將壹個屏幕分成了五個部分：東、南、西、北、中。

如果要使用這種邊框布局管理進行布局控制，我們必須先將“容器”設置為“邊框布局控制模式”，具體來說，就是當調用setLayout方法為容器設置布局控制模式時，參數設置為BorderLayout。例如：

JPanel panel1=(JPanel)getContentPane();

panel1.setLayout(new BorderLayout());

然後，我們就可以在使用容器的add方法添加部件時，附加上位置參數，使得該部件顯示在指定的位置上。位置參數分別是：

BorderLayout.NORTH 位置為北

BorderLayout.SOUTH 位置為南

BorderLayout.EAST 位置為東

BorderLayout.WEST 位置為西

BorderLayout.NORTH 位置為中心

實例說明

下面，我們就來試壹試，使用按鈕排出五個方向！請創建壹個testBorder.java，輸入以下源程序：

源程序：useTextArea.java

import java.awt.*;

import javax.swing.*;

import java.applet.Applet;

public class testBorder extends JApplet

{

public void init()

{

JPanel panel1=(JPanel)getContentPane();

panel1.setLayout(new BorderLayout());

JButton north=new JButton("North");

JButton south=new JButton("South");

JButton east=new JButton("East");

JButton west=new JButton("West");

JButton center=new JButton("Center");

panel1.add(north,BorderLayout.NORTH);

panel1.add(south,BorderLayout.SOUTH);

panel1.add(east,BorderLayout.EAST);

panel1.add(west,BorderLayout.WEST);

panel1.add(center,BorderLayout.CENTER);

}

}

然後，我們使用javac編譯這個程序，然後編輯壹個顯示這個Java Applet的HTML頁面。最後調用appletviewer來觀察這個頁面

為了試壹下，如果並沒有在每個位置都安排壹個部件，那麽會怎麽樣呢？我們修改壹下程序，將panel1.add(west,BorderLayout.WEST);這壹行註釋掉（就是在前面加上“//”號），也就是不顯示西邊的按鈕，看壹下結果如何。正如上圖（圖10-3）所示，西邊由於沒有部件，因此“中”就朝西靠，“占領”了它的位置。

而如果我們修改壹下程序，讓中間的按鈕不顯示的話，就會出現如圖10-5的樣子，中間的區域並未並占領，而是空在那裏了！這是與其它位置不同的地方，大家壹定要記住。

壹些提示：

其實這很好理解，如果中間的那壹塊的位置被其它位置上的部件占領的話，就會使得分不清“東”、“南”、“西”、“北”了。倒成了“左上角”、“左下角”、“右上角”、“右下角”了。

2 網格布局

實例說明

下面，我們來看壹個新的程序！首先創建壹個testGrid.java文件，並輸入以下源程序：

源程序：testGrid.java

import java.awt.*;

import javax.swing.*;

import java.applet.Applet;

public class testGrid extends JApplet

{

String buttonLabels[]={"No.1","No.2","No.3","No.4","No.5",

"No.6","No.7","No.8","No.9"};

public void init()

{

JPanel panel1=(JPanel)getContentPane();

panel1.setLayout(new GridLayout(3,3));

for (int x=0; xpanel1.add(new JButton(buttonLabels[x]));

}

}

然後，我們使用javac編譯這個程序，然後編輯壹個顯示這個Java Applet的HTML頁面。最後調用appletviewer來觀察這個頁面

我們主要是關心如何擺放各個部件，而不是如何構建壹個程序。所以，正如本例中的按鈕壹下，這壹章中的所有部件都是壹個樣子，沒有任何作用。這樣也使得程序盡可能地變短了，更易於大家閱讀和理解程序。

下面，我們就壹起來看壹下上面的這個程序。

1） String buttonLabels[]={"No.1","No.2","No.3","No.4","No.5",

"No.6","No.7","No.8","No.9"}

我想大家都能很輕松地讀懂這條語句，我們在此定義了壹個字符串數組buttonLabels，它有9個字符串成員，也就是我們後面定義的9個按鈕的標簽文本。

值得註意的是，大家壹定要知道，buttonLabels[1]表示哪個字符串！如果您的答案是“No.1”的話，就錯了！正確的答案是“No.2”，這是因為在數組中索引值是從0開始的，也就是說如果要使用“No.1”的話，應該使用buttonLabels[0]。這對更好地理解後面的程序十分重要，也是基本功之壹。

2） JPanel panel1=(JPanel)getContentPane();

panel1.setLayout(new GridLayout(3,3));

在這兩行程序中，我們首先定義了壹個容器部件panel1。然後調用setLayout方法設置布局管理器。這裏我們使用了壹個新的布局管理器：GridLayout，網格布局管理器。

我們註意到GridLayout的後面帶了兩個參數：3，3。這有什麽用呢？我們壹起來看壹下GridLayout方法的定義：

public GridLayout (int rows,int cols)

我們看壹下這兩個參數，首先它們都是int型—整型的。那麽它們分別起到什麽作用呢？我們還是采用顧名思義法吧！row的中文意思是行，col的中文意思是列，後面加上壹個s，是這兩個單詞的復數形式。

好，我們現在串起來想壹下，我們定義了壹個網格布局，然後定了它的行、列數！這不就畫出了這個網格了嗎？如果我們在語句是使用GridLayout(5,5)的話，就會把整個容器分成25個單元

而我們在程序中使用的是GridLayout(3,3)，所以它就將整個容器分成了

註意：

這種劃分是壹種邏輯上的，暗藏式的劃分，而不會把格子給劃出來。另外，我們這裏舉的兩個例子行、列都相等，其實完全可以不等。

3） for (int x=0; xpanel1.add(new JButton(buttonLabels[x]));

這是壹個循環結構的程序。我們先看循環語句，循環的初值是“x=0”，繼續執行循環的條件語句是“xbuttonLabels.length就是用來請得字符串數組buttonLabels的長度！也就是這個字符串數組中有多少個字符串？我們知道，我們在該數組中定義了9個。

從程序中，我們可以獲知，當x=buttonLabels.length時，循環就將結束，應為它不滿足條件x別忘了，我們使用buttonLabels[0]表示第壹個字符串，buttonLabels[1]表示第二個字符串……，那麽最後壹個字符串就應該是buttonLabels[buttonLabels.length-1]嘛。

在循環中，我們使用容器提供的add方法，將新定義的按鈕部件添加進去。

有時，我們可能想獲得象下圖所示的布局效果！讓各個部件之間存在壹些間隙。使用Java的網格布局可以實現嗎？

我很高興地回答妳：“可以！”，我們可以使用GridLayout的另壹種構造器方法（簽名不同）來實現：

public GridLayout (int rows,int cols,int hgap,int vgap)

在這個方法中，可以帶上四個整型參數，前兩個我們已經很熟悉了，行數與列數。後面則是兩個新的參數。

第壹個是hgap，其中gap的意思是間隙、空隙的意思，而h則是horizontal（水平）的第壹個字母。也就是說，我們可以通過hgap參數設置橫向的間隙。

第二個是vgap，v則是vertical（垂直）的第壹個字母。也就是說，我們可以通過vgap參數設置縱向的間隙。

自測練習

1）_________________是網格布局管理器。

a.BorderLayout b.GridLayout c.ReseauLayout

d.FlowLayout

利用以下代碼回答問題2、3、4、5：

2）這個布局中有__________行？

a.7行 b.5行 c.6行 d.8行

3）這個布局中有__________列？

a.7行 b.5行 c.6行 d.8行

4）這個布局將容器分為_________個部分？

a.48個 b.35個 c.30個 d.40個

5）第5個部件位於__________位置。

a.左上角 b.左下角 c.右上角 d.右下角 e.中間

6）根據以下界面，編寫壹個程序

圖10-12 練習題圖

____________________________________________________________________

____________________________________________________________________

____________________________________________________________________

____________________________________________________________________

____________________________________________________________________

7） 如果我們構建壹個5＊5的網格布局，但只在該容器中加入17個按鈕，將會出現什麽情況？請編寫壹個程序，來試壹試效果。

____________________________________________________________________

____________________________________________________________________

____________________________________________________________________

____________________________________________________________________

練習答案

1）b 沒什麽好解釋的，請大家記住！

2）a 第壹個參數是行數，因此是7行。

3）b 第二個參數是列數，因此為5列。

4）b 7行5列，其7*5，35個部分嘛。

5）c 第5個部件是第壹行的最後壹個，當然在右上角嘛。

6）下面是壹個實現的程序實例：

源程序：lianxi10_2.java

import java.awt.*;

import javax.swing.*;

import java.applet.Applet;

public class lianxi10_2 extends JApplet

{

String buttonLabels[]={"1","2","3","4","5","6","7",

"8","9","*","0","#"};

public void init()

{

JPanel panel1=(JPanel)getContentPane();

panel1.setLayout(new GridLayout(4,3,10,10));

for (int x=0; xpanel1.add(new JButton(buttonLabels[x]));

}

}

7）下面是壹個實現的程序實例：

源程序：lianxi10_3.java

import java.awt.*;

import javax.swing.*;

import java.applet.Applet;

public class lianxi10_3 extends JApplet

{

String buttonLabels[]={"No.1","No.2","No.3","No.4","No.5",

"No.6","No.7","No.8","No.9","No.10","No.11","No.12",

"No.13","No.14","No.15","No.16","No.17"};

public void init()

{

JPanel panel1=(JPanel)getContentPane();

panel1.setLayout(new GridLayout(5,5));

for (int x=0; xpanel1.add(new JButton(buttonLabels[x]));

}

}

這個程序使用javac編譯完後，編寫壹個包含這個類的HTML頁面，再用appletviewer來觀察發現運行結果如下圖所示：

圖10-13 練習答案圖

這個輸出是不是令妳感到十分意外，整個程序根本不按要求分成5列，所以我們從這裏得到壹個使用網格布局中要十二分註意的壹點：“請別忘了將網格填滿”。否則程序的輸出將不可預料。

壹些提示：

如果妳真的沒有那麽多東西來“占領”網格的話，我建議妳使用壹個空標簽來填補這個空白的網格，使得程序的輸出如妳所願。使用空標簽的方法很容易：

panel1.add(new Label(“”));

從這裏，我們也看出了，我們學習過的流布局管理器、邊框布局管理器，以及我們剛學習過的網格布局管理器都比較死板，不夠高級。

10.3 組合布局

傳授新知

正如我們在上壹小節結束的時候說的壹樣，各種布局管理器都有自己的缺點，沒有壹種能夠真正地完全滿足我們編寫GUI程序時的要求。

而在Java語言中，允許在容器中加入其他容器，這樣每個容器可以根據自己的需要采用不同的布局管理器，組合成為壹個我們所需要的GUI程序界面。這種方法，我們就稱之為組合布局。

註意：

與流布局、邊框布局、網格布局不同，組合布局並不是壹個新的布局管理器，它是通過結合各種布局管理器的優點，將它們組合地應用在GUI程序界面的開發中。這是壹種布局管理的方法。也可以說是壹種GUI程序界面的開發技巧。

當我們設計GUI程序界面時，最好先在紙上把它畫出來，然後“分塊解決”。也就是將能夠組合在壹起的部件找出來，將它們放在壹個容器裏，並為它們選擇合適的布局管理器。然後把這些容器擺放在壹起，就解決了。

設計時還要考慮到窗體大小發生改變的時候，引起的部件形體變化。這方面，請妳熟記幾個設計技巧：

1） 對於那些要求扁平狀的部件，我們應該將它放置在邊框布局中的南面或北面；

2） 對於那些要求細高狀的部件，我們應該將它放置在邊框布局中的東面或西面；

3） 對於那些可以隨著窗體改變大小部分，我們可以將它放置在邊框布局的中間；

4） 如果我們要求部件保持大小相同，那麽，我們就應該采用網格布局。

下面，我們就通過幾個實際的例子，來讓大家領會和掌握這種設計的思路與方法。

實例說明

我們首先創建壹個testCombination.java文件，然後輸入以下源程序：

源程序：testCombination.java

import java.awt.*;

import javax.swing.*;

import java.applet.Applet;

public class testCombination1 extends JApplet

{

public void init()

{

Frame frame1=new Frame("testCombination1");

frame1.setLayout(new BorderLayout());

TextArea text1=new TextArea();

frame1.add(text1,BorderLayout.CENTER);

JPanel panel1=(JPanel)getContentPane();

panel1.setLayout(new GridLayout(1,3,10,5));

panel1.add(new JButton("A"));

panel1.add(new JButton("B"));

panel1.add(new JButton("C"));

frame1.add(panel1,BorderLayout.SOUTH);

frame1.pack();

frame1.show();

}

}

然後，我們使用javac編譯這個程序，然後編輯壹個顯示這個Java Applet的HTML頁面。最後調用appletviewer來觀察這個頁面，如下圖所示：

圖10-14 程序testCombination.java的輸出

正如上圖所示，程序的輸出與以前不同，各個部件不是顯示在Appletviewer程序框中，而是顯示在另壹個窗口中。

這是怎麽回事呢？下面我們就壹起來看壹下這個程序！

傳授新知

在以前的程序中，我們壹直都是使用容器JPanel，面板。而我們在這個程序中引進了壹個新的容器Frame。使用了這個容器後，就會新創建壹個窗口。這也就是為什麽程序的輸出有這麽大的變化的原因。

1）Frame frame1=new Frame("testCombination");

這條語句，定義了壹個Frame容器frame1，然後使用new操作符調用構造器方法，後面帶的參數“testCombination”則是這個Frame的標題。

壹些提示：

其實大家能Frame所體現出來的效果是很熟悉的，它等價於Windows中的窗體。而Frame的標題就是窗體的標題。

2） frame1.setLayout(new BorderLayout());

與JPanel容器壹樣，我們可以調用setLayout方法來設置Frame的布局管理器。在這裏，我們將Frame容器frame1的布局管理器設置成為邊框布局管理器（也就是我們在10.1小節中學習過的布局管理器）。

3） frame1.add(text1,BorderLayout.CENTER);

緊接著，我們調用frame1的add方法，將文本區部件text1添加到frame1容器中來。註意我們設置了它的位置：BorderLayout.CENTER。

這是因為，我們希望這個文本區能夠隨著窗體的大小變化而變化。所以適合將其放在在中間位置。

4） panel1.setLayout(new GridLayout(1,3,10,5));

我們又定義了壹個JPanel容器panel1，並將其的布局管理器設置為網格布局管理器。並通過指定參數，使得整個panel1被分成1行3列，水平空隙為10的網格。

5） frame1.add(panel1,BorderLayout.SOUTH);

這是組合布局方法最重要的壹步，我們將panel1這個容器，加入到了frame1這個容器中去了。並且指定了panel1這個容器在整個frame1中所占的位置：BorderLayout.SOUTH，也就是下邊。這樣，panel1中包含的三個按鈕就會永遠（不管窗體大小如何改變）呆在文本區的下邊，而且三個按鈕的大小會根據窗體大小的改變而改變。

壹些提示：

這是因為，panel1中的按鈕是用網格布局的。

6） frame1.pack();

frame1.show();

與JPanel不壹樣，使用Frame容器，不能夠直接顯示了出來。我們必須調用Frame容器的show方法才能使得Frame顯示出來。

而在使用show方法之前，我們還需要使用pack方法將Frame中的內容做壹個整合。請記住這裏的使用方法。

4 GridBag布局

實例說明

到現在為止，我們已經學習了邊框布局、網格布局以及組合布局，現在大家試壹試編寫壹個程序，

怎麽樣，挺有難度的吧！完成這個GUI得花很多心思去設計組合，十分討厭，下面我們就使用壹個新的布局管理器GridBagLayout來解決這種難題。

首先，輸入以下源程序：

源程序：testGridBag.java

import java.awt.*;

import javax.swing.*;

import java.applet.Applet;

public class testGridBag extends JApplet

{

public void init()

{

JPanel panel1=(JPanel)getContentPane();

panel1.setLayout(new GridBagLayout());

GridBagConstraints gbdc=new GridBagConstraints();

gbdc.fill=GridBagConstraints.BOTH;

gbdc.weightx=1;

gbdc.weighty=1;

panel1.add(new JButton("No.1"),gbdc);

panel1.add(new JButton("No.2"),gbdc);

panel1.add(new JButton("No.3"),gbdc);

gbdc.gridwidth=2;

gbdc.gridx=0;

panel1.add(new JButton("No.4"),gbdc);

gbdc.gridx=2;

gbdc.gridwidth=1;

gbdc.gridheight=2;

panel1.add(new JButton("No.5"),gbdc);

gbdc.gridx=0;

gbdc.gridheight=1;

panel1.add(new JButton("No.6"),gbdc);

gbdc.gridx=1;

panel1.add(new JButton("No.7"),gbdc);

gbdc.gridx=0;

gbdc.gridwidth=2;

panel1.add(new JButton("No.8"),gbdc);

gbdc.gridx=2;

gbdc.gridwidth=1;

panel1.add(new JButton("No.9"),gbdc);

}

}

在這個程序中，我們使用了GridBagLayout輕松地完成了這個界面的設計，允分凸現出它的強大。可以這麽說，GridBagLayout是Java語言中最強大的布局管理器。

GridBagLayout，從名字上看，就知道它與GridLayout有壹定的淵源，是的，GridBagLayout的確與其十分類似，也是使用網格來進行布局管理的。但與GridLayout（網格布局）不同的是，GridBagLayout不像網格布局壹相，需要所有的部件的大小、形狀相同。而且還可以將某壹個部件放在壹個固定的位置上。

下面，我們壹起來分析壹下testGridBag.java程序。

1） panel1.setLayout(new GridBagLayout());

在調用setLayout方法時，指定為GridBagLaoyout，使panel1使用GridBag布局管理。

2） GridBagConstraints gbdc=new GridBagConstraints();

GridBagLayout布局管理器是通過壹個GridBagConstraints類來實現神奇的效果的。所以，我們要在使用時先定義壹個GridBagConstraints類的對象。在這個程序中，我們定義了壹個GridBagConstraints類的對象gbdc。

3） gbdc.fill=GridBagConstraints.BOTH;

由於網格單元可能比該單元中的部件大，如果是這樣，部件放置在單元格內會有壹些多余空間。在默認情況下，部件不會擴張，也就是不會填充這個多余空間。

GridBagConstraints提供了壹個fill屬性，我們可以通過設置它的值來起到不同的效果。

¨ GridBagConstraints.NONE：不擴張，是默認值；

¨ GridBagConstraints.HORIZONTAL：部件水平擴張，將水平方向的多余空間填滿；

¨ GridBagConstraints.VERTICAL：部件垂直擴張，將垂直方向的多余空間填滿；

¨ GridBagConstraints.BOTH：部件同時向兩個方向擴張，將單元格填滿。

4） gbdc.weightx=1;

gbdc.weighty=1;

weightx和weighty是GridBagConstraints提供的另壹對屬性。它的取值是整型數，默認值為0。用來設置行（weightx）、列（weighty）的“重量”，如果值為0的話，所有的部件都會緊收在壹起，聚集在中央，如圖10-17所示。

而如果取值為其它數字，則會根據值來分配空間。

5） panel1.add(new JButton("No.1"),gbdc);

panel1.add(new JButton("No.2"),gbdc);

panel1.add(new JButton("No.3"),gbdc);

在沒有任何約束的時候，向gbdc中添加按鈕，這時效果與采用網格布局的效果完全壹樣。壹個接著壹個地“占領”單元格。

6） gbdc.gridwidth=2;

gbdc.gridx=0;

panel1.add(new JButton("No.4"),gbdc);

由於第四個按鈕（No.4）是寬度是2，在GridBagLayout中，是由gridwidth屬性來控制添加進入的部件的寬度的。

我們通過gbdc.gridwidth=2將其設置為2，這樣，再添加進入的部件就會變成為2個單元格的寬度。

另外，我們再使用gbdc.gridx=0讓其另起壹行，從最左邊的單元格開始填充。

因此，我們發現第四個按鈕被加在了第二行，寬度為2個單元格。

7） gbdc.gridx=2;

gbdc.gridwidth=1;

gbdc.gridheight=2;

panel1.add(new JButton("No.5"),gbdc);

接下來，我們要擺放第五個按鈕，這個按鈕將從第3個單元開始填充，其寬度為壹個單元格，而高度則為兩個單元格。

因此，我們首先使用用gbdc.gridx=2，使得下壹個添加的部件（第五個按鈕）放入第3個單元格（0代表第1個單元格，因此第3個單元格應該是2）。

由於，前面我們已經將gridwidth設置為2了，因此，我們需要使用gbdc.gridwidth=1，將其值設置回1。

最後使用gdbc.gridheight=2，使得添入的部件的單元格縱向跨越兩個單元格。

8） gbdc.gridx=0;

gbdc.gridheight=1;

panel1.add(new JButton("No.6"),gbdc);

我想這壹段程序，大家應該都不會再有什麽理解上的問題了吧！主要提醒大家註意的是，我們使用gbdc.gridheight=1將單元格縱向跨度改成了默認值1。這是因為我們在前面需要時將其改成了2，所以在此需要將其改回來。

實例說明

為了更好地理解這個強大的GridBagLayout布局管理器，我們再來做壹個有趣的實驗。首先，我們創建壹個testGridBag2.java

源程序：testGridBag2.java

import java.awt.*;

import javax.swing.*;

import java.applet.Applet;

public class testGridBag2 extends JApplet

{

public void init()

{

JPanel panel1=(JPanel)getContentPane();

panel1.setLayout(new GridBagLayout());

GridBagConstraints gbdc=new GridBagConstraints();

panel1.add(new JButton("No.1"),gbdc);

panel1.add(new JButton("No.2"),gbdc);

setSize(300,200);

}

}

然後我們使用鼠標改變壹下窗口的大小，看壹下，這兩個按鈕有什麽變化？妳會驚奇地發現，窗口改變了大小，兩個按鈕的大小卻沒有變，而且壹直呆在正中央的位置。

壹些說明：

在這個程序中，我們使用了壹個以前沒有用過的語句：setsize(300.200)，它的功能是在程序中設置窗口的大小。

現在我們對這個程序做壹些修改！將添加兩個按鈕的兩條語句：

panel1.add(new JButton("No.1"),gbdc);

panel1.add(new JButton("No.2"),gbdc);

將它們擴展為：

gbdc.weightx=1;

panel1.add(new JButton("No.1"),gbdc);

gbdc.weightx=3;

panel1.add(new JButton("No.2"),gbdc);

為什麽會得到這個效果呢？我們在程序中添加按鈕的程序段前加入壹句：

gbdc.fill=GridBagConstraints.HORIZONTAL;

再重新編譯壹下程序，再看看程序的輸出有什麽變化！

在得到結果之前，自己可以想象壹下結果，然後看壹下程序的實際輸出與妳的想法是否相吻合。

我們驚奇地發現，第二個按鈕，突然變得十分寬起來（如圖10-20所示）。這是因為放置第二個按鈕的單元格的寬度是3，而第壹個按鈕的寬度是1。而且，我們又讓第二個按鈕橫向擴展，因此得到了這樣的輸出結果。

相信實驗做到這裏，不須我說，大家也會有壹些心得體會了。但是GridBagLayout遠不止這壹點，大家應該多做試驗，才能夠在真實的使用環境中有效地掌握GridBagLayout。