正如你所看到的，最終的結果看上去和計劃的想法完全一樣。
你應該能看到在草圖里有一些線，這些線是用來把總界面分成若干行和列的，這樣你就很清楚每一個組件放置的格子位置。這就是GridBagLayout里"格"的那一部分，而圖上的數字就是格的號碼。
在某種意義上說, 我們可以把GridBagLayout想象成為早些年的HTML3和4，它們都是基于表的布局，Grid的概念就類似rowspan和colspan的意思，只不過換了個名字罷了。
隨著我們的界面和表格的設置完成，是時候該進行界面布局并開始寫代碼了。
工作過程
這一節我假定你已經了解了基本的窗口和組件創建知識。
通過這篇文章我們最終能在一個frame中布局組件，我們將在以后的文章對界面進行改進使它更適用。因此,為了了解這整個工作的過程，我們列出了所有的目標代碼。
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class GridBagWindow extends JFrame {
private JButton searchBtn;
private JComboBox modeCombo;
private JLabel tagLbl;
private JLabel tagModeLbl;
private JLabel previewLbl;
private JTable resTable;
private JTextField tagTxt;
public GridBagWindow() {
Container contentPane = getContentPane();
GridBagLayout gridbag = new GridBagLayout();
contentPane.setLayout(gridbag);
GridBagConstraints c = new GridBagConstraints();
//setting a default constraint value
c.fill =GridBagConstraints.HORIZONTAL;
tagLbl = new JLabel("Tags");
c.gridx = 0; //x grid position
c.gridy = 0; //y grid position
gridbag.setConstraints(tagLbl, c); //associate the label with a constraint object
contentPane.add(tagLbl); //add it to content pane
tagModeLbl = new JLabel("Tag Mode");
c.gridx = 0;
c.gridy = 1;
gridbag.setConstraints(tagModeLbl, c);
contentPane.add(tagModeLbl);
tagTxt = new JTextField("plinth");
c.gridx = 1;
c.gridy = 0;
c.gridwidth = 2;
gridbag.setConstraints(tagTxt, c);
contentPane.add(tagTxt);
String[] options = {"all", "any"};
modeCombo = new JComboBox(options);
c.gridx = 1;
c.gridy = 1;
c.gridwidth = 1;
gridbag.setConstraints(modeCombo, c);
contentPane.add(modeCombo);
searchBtn = new JButton("Search");
c.gridx = 1;
c.gridy = 2;
gridbag.setConstraints(searchBtn, c);
contentPane.add(searchBtn);
resTable = new JTable(5,3);
c.gridx = 0;
c.gridy = 3;
c.gridwidth = 3;
gridbag.setConstraints(resTable, c);
contentPane.add(resTable);
previewLbl = new JLabel("Preview goes here");
c.gridx = 0;
c.gridy = 4;
gridbag.setConstraints(previewLbl, c);
contentPane.add(previewLbl);
addWindowListener(new WindowAdapter() {
public void windowClosing(WindowEvent e) {
System.exit(0);
}
});
}
public static void main(String args[]) {
GridBagWindow window = new GridBagWindow();
window.setTitle("GridBagWindow");
window.pack();
window.setVisible(true);
}
}
構造方法前的代碼都不是很特殊，都是一些相當標準的import和變量定義。但是進入構造方法后，事情就變得有趣了。
Container contentPane = getContentPane();
GridBagLayout gridbag = new GridBagLayout();
contentPane.setLayout(gridbag);
我們以GridBagWindow的內容面板作為開始來創建一個GridBagLayout對象，準確地說，這個方法與過去我們所創建 GridLayout對象和BorderLayout對象的方法是一樣的。那么，現在我們就開始來設置GridBagLayout對象使它作為內容面板的 布局。
GridBagConstraints c = new GridBagConstraints();
然后我要提到這整個進程中的一個獨特的對象，那就是GridBagConstraints。這個對象在GridBagLayout中控制所 有被安置在其中組件的約束。為了把一個組件增加到你的GridBagLayout中去，你首先必須將它與一個GridBagConstraints對象建 立連接。
GridBagConstraints可以從11個方面來進行控制和操縱，也可以給你提供一些幫助。這些內容是：
- Gridx——組件的橫向坐標
- Girdy——組件的縱向坐標
- Gridwidth——組件的橫向寬度，也就是指組件占用的列數，這與HTML的colspan類似
- Gridheight——組件的縱向長度，也就是指組件占用的行數，這與HTML的rowspan類似
- Weightx——指行的權重，告訴布局管理器如何分配額外的水平空間
- Weighty——指列的權重，告訴布局管理器如何分配額外的垂直空間
- Anchor——告訴布局管理器組件在表格空間中的位置
- Fill——如果顯示區域比組件的區域大的時候，可以用來控制組件的行為。控制組件是垂直填充，還是水平填充，或者兩個方向一起填充
- Insets——指組件與表格空間四周邊緣的空白區域的大小
- Ipadx—— 組件間的橫向間距,組件的寬度就是這個組件的最小寬度加上ipadx值
- ipady—— 組件間的縱向間距,組件的高度就是這個組件的最小高度加上ipady值
可能對于一個組件的每一個實例你都需要為它建立一個單獨的GridBagConstraints；然而，這種方法我們并不推薦使用。最好的方法是，當你調用它的時候把對象設置為默認值，然后針對于每一個組件改變其相應的域。
這個方法具有通用性，因為在一些域中，比如insets、padx、pady和fill這些域，對于每一個組件來說一般都是相同的，因此這樣對一個域進行設置就會更輕松了，也能更輕松的在另外的組件中改變某些域的值。
如果在改變了某些域值之后，你想回到原始的域值的話，你應該在增加下一個組件之前進行改變。這種方法使你更容易明白你正在修改的內容，也能使你更容易明白在一連串對象中的這11個參數的作用。
也許你現在對這些內容還是一知半解，不過事實上一旦你理解了GridBagConstraints，值得安慰的是你以后做再困難的工作都會游刃有余了。
所以，如果我們已經明白了GridBagConstraints的詳細用法了，那么現在就讓我們來看看在實際應用中應該如何來實現它：
tagLbl = new JLabel("Tags");
c.gridx = 0; //x grid position
c.gridy = 0; //y grid position
gridbag.setConstraints(tagLbl, c); //設置標簽的限制
contentPane.add(tagLbl); //增加到內容面板
我們所做的是示例我們的標簽、分配給它一個格位置，將它與一個約束對象聯系起來并把它增加到我們的內容面板中。
tagModeLbl = new JLabel("Tag Mode");
c.gridx = 0;
c.gridy = 1;
gridbag.setConstraints(tagModeLbl, c);
contentPane.add(tagModeLbl);
請注意，雖然我們已經在我們的約束對象中把gridx的值設置為0，但是在這里我們仍然要對它進行重新設置——這樣做沒有其它原因，只是為了增加可讀性。
下面，我們增加一個文本域以便能存儲我們希望能搜索到的關鍵字，再增加一個組合框以便用來搜索多個關鍵字。除了我們希望的文本域有兩列之外，這個概念其他的方面都與上面所說的是相同的，所以，我們需要在增加組合框之前重新設置文本域的值。
tagTxt = new JTextField("plinth");
c.gridx = 1;
c.gridy = 0;
c.gridwidth = 2;
gridbag.setConstraints(tagTxt, c);
contentPane.add(tagTxt);
String[] options = {"all", "any"};
modeCombo = new JComboBox(options);
c.gridx = 1;
c.gridy = 1;
c.gridwidth = 1;
gridbag.setConstraints(modeCombo, c);
contentPane.add(modeCombo);
做了這些之后，我們再在內容面板中增加一些其余的簡單組件，這時候我們就能夠瀏覽它了；其余的代碼應該不會出現任何問題了。
到這個階段，我們應該已經得到了一個類似于我們先前所設計的界面了。