【從零開始學 Java 程式設計】線上教學課程目錄，使用 Java 程式語言，開發應用程式。

GridBagLayout

GridBagLayout 網格群佈局，透過元件加入容器時使用 GridBagConstraints 設定相關參數來進行佈局。共有以下這些參數進行設定：

gridx, gridy

用來指定元件將擺放在網格中的哪一行和哪一列當中。最左上角第一格為 gridx = 0， gridy = 0。

元件Ａ
gridx = 0
gridy = 0
元件B
gridx = 3
gridy = 2
元件C
gridx = 4
gridy = 5

gridwidth, gridheight

用來指定元件顯示區域所佔的列數和行數，以網格為單位而不是像素為單位，預設值值為 1，佔用一個網格。

元件Ａ
gridx = 0
gridy = 0
gridwidth = 1
gridheight = 1
元件B
gridx = 3
gridy = 2
gridwidth = 2
gridheight = 1
元件C
gridx = 4
gridy = 4
gridwidth = 2
gridheight = 2

fill

用來指定元件填充網格的方式。

GridBagConstraints.NONE（預設值）
GridBagConstraints.HORIZONTAL （以水平填充其顯示區域）
GridBagConstraints.VERTICAL （以垂直填充其顯示區域）
GridBagConstraints.BOTH （完全填充其顯示區域）

元件Ａ
gridx = 0
gridy = 0
gridwidth = 2
gridheight = 2
fill = GridBagConstraints.NONE
元件B
gridx = 3
gridy = 2
gridwidth = 2
gridheight = 2
fill = GridBagConstraints.HORIZONTAL
元件C
gridx = 4
gridy = 4
gridwidth = 2
gridheight = 2
fill = GridBagConstraints.VERTICAL
元件D
gridx = 4
gridy = 4
gridwidth = 2
gridheight = 2
fill = GridBagConstraints.BOTH

ipadx, ipady

用來指定元件顯示區域的內部填充，即在元件最小尺寸之外需要附加的像素值，預設值為0。

拉大元件大小 ipadx、ipady 為正值，如：10

縮小元件大小 ipadx、ipady 為負值，如：-10

insets

用來指定元件的外部填充，即元件與其顯示區域邊緣之間的間距（元件上下左右間距）。

anchor

用來指定元件在顯示區域中的擺放位置。

絕對值
GridBagConstraints.NORTH
GridBagConstraints.SOUTH
GridBagConstraints.WEST
GridBagConstraints.EAST
GridBagConstraints.NORTHWEST
GridBagConstraints.NORTHEAST
GridBagConstraints.SOUTHWEST
GridBagConstraints.SOUTHEAST
GridBagConstraints.CENTER （預設）
方向相對值
GridBagConstraints.PAGE_START
GridBagConstraints.PAGE_END
GridBagConstraints.LINE_START
GridBagConstraints.LINE_END
GridBagConstraints.FIRST_LINE_START
GridBagConstraints.FIRST_LINE_END
GridBagConstraints.LAST_LINE_START
GridBagConstraints.LAST_LINE_END
基線相對值
GridBagConstraints.BASELINE
GridBagConstraints.BASELINE_LEADING
GridBagConstraints.BASELINE_TRAILING
GridBagConstraints.ABOVE_BASELINE
GridBagConstraints.ABOVE_BASELINE_LEADING
GridBagConstraints.ABOVE_BASELINE_TRAILING
GridBagConstraints.BELOW_BASELINE
GridBagConstraints.BELOW_BASELINE_LEADING
GridBagConstraints.BELOW_BASELINE_TRAILIN

weightx, weighty

用來指定在容器大小改變時，增加或減少元件中的的空間分配。weightx (行)和weighty(列)的值一般在0.0與1.0之間，預設值為0，數值越大代表組件所在的行或者列將獲得更多的空間。

預設值為0，視窗拉大、縮小都不變化元件大小

設定 weightx, weighty 將會根據比例變化大小

範例一

練習透過 gridx 和 gridy 指定按鈕位置

public void addComponentsToPane(Container pane) {
        
    //宣告 GridBagLayout
    GridBagLayout gridBagLayout = new GridBagLayout();

    //設定佈局方式為 GridBagLayout
    pane.setLayout(gridBagLayout);

    //宣告網格約束變數
    GridBagConstraints c;

    //宣告按鈕變數
    JButton btn;

    //新增一個按鈕，並設定網格約束
    btn = new JButton("btn1");
    c = new GridBagConstraints();
    c.fill = GridBagConstraints.HORIZONTAL;
    c.gridx = 0;
    c.gridy = 0;
    pane.add(btn, c);

    //新增一個按鈕，並設定網格約束
    btn = new JButton("btn2");
    c = new GridBagConstraints();
    c.fill = GridBagConstraints.HORIZONTAL;
    c.gridx = 1;
    c.gridy = 1;
    pane.add(btn, c);

    //新增一個按鈕，並設定網格約束
    btn = new JButton("btn3");
    c = new GridBagConstraints();
    c.fill = GridBagConstraints.HORIZONTAL;
    c.gridx = 2;
    c.gridy = 2;
    pane.add(btn, c);
}

範例二

承上面範例，修改 gridwidth，讓 btn3 佔滿三格網格。

注意的是，除了 gridwidth=3 外，還要搭配 gridx 和 gridy 修改，否則無法佔滿三格。

btn = new JButton("btn3");
c.fill = GridBagConstraints.HORIZONTAL;
c.gridwidth = 3; //佔用三格，需要 gridx 和 gridy 搭配
c.gridx = 0;
c.gridy = 2;
pane.add(btn, c);

範例三

承上面範例，修改 ipady ，讓 btn2 長高變大顆長按鈕。(如果是調整 ipadx，則會讓按鈕長胖左右變大)。

btn = new JButton("btn2");
c = new GridBagConstraints();
c.fill = GridBagConstraints.HORIZONTAL;
c.ipady = 100; //長高變長按鈕
//c.ipadx = 100;
c.gridx = 1;
c.gridy = 1;
pane.add(btn, c);

範例四

承上面範例，修改 insets ，讓 btn3 ，與上面元件間距拉大。

btn = new JButton("btn3");
c = new GridBagConstraints();
c.fill = GridBagConstraints.HORIZONTAL;
c.gridwidth = 3;
c.insets = new Insets(100,0,0,0);//調整間距
c.gridx = 2;
c.gridy = 2;
pane.add(btn, c);

範例五

預設為GridBagConstraints.RELATIVE 情況下，元件會一個接一個使用排序下去，練習透過 REMAINDER 結束一行來佈局，新增的元件在將在下一行接續下去。

public void makeButton(Container pane, String title, GridBagLayout gridBagLayout, GridBagConstraints constraints) {
        JButton button = new JButton(title);     //創建Button對象
        gridBagLayout.setConstraints(button, constraints);
        pane.add(button);
}

public void addComponentsToPane(Container pane) {

    //宣告 GridBagLayout
    GridBagLayout gridBagLayout = new GridBagLayout();

    //設定佈局方式為 GridBagLayout
    pane.setLayout(gridBagLayout);

    //宣告網格約束變數
    GridBagConstraints c;

    JTextField jTextField = new JTextField();
    c = new GridBagConstraints();
    c.fill = GridBagConstraints.HORIZONTAL;
    c.ipady = 10;
    c.gridwidth = GridBagConstraints.REMAINDER;//第一列，結束行
    pane.add(jTextField, c);


    c = new GridBagConstraints();
    c.fill = GridBagConstraints.HORIZONTAL;
    c.ipady = 50;
    makeButton(pane, "btn1", gridBagLayout, c);
    makeButton(pane, "btn2", gridBagLayout, c);
    c.gridwidth = GridBagConstraints.REMAINDER;//第二列，結束行
    makeButton(pane, "btn3", gridBagLayout, c);

    c = new GridBagConstraints();
    c.fill = GridBagConstraints.HORIZONTAL;
    c.ipady = 50;
    makeButton(pane, "btn4", gridBagLayout, c);
    makeButton(pane, "btn5", gridBagLayout, c);
    c.gridwidth = GridBagConstraints.REMAINDER;//第三列，結束行
    makeButton(pane, "btn6", gridBagLayout, c);

    c = new GridBagConstraints();
    c.fill = GridBagConstraints.HORIZONTAL;
    c.ipady = 50;
    makeButton(pane, "btn7", gridBagLayout, c);
    makeButton(pane, "btn8", gridBagLayout, c);
    c.gridwidth = GridBagConstraints.REMAINDER;//第四列，結束行
    makeButton(pane, "btn9", gridBagLayout, c);

    c = new GridBagConstraints();
    c.fill = GridBagConstraints.HORIZONTAL;
    c.ipady = 50;
    makeButton(pane, "btn10", gridBagLayout, c);
    c = new GridBagConstraints();
    c.fill = GridBagConstraints.HORIZONTAL;
    c.gridwidth = 2;
    c.ipady = 50;
    makeButton(pane, "btn11", gridBagLayout, c);
    c.gridwidth = GridBagConstraints.REMAINDER;//第五列，結束行

}

補充資料

12306訂票助手，即是採用 GridBagLayout 來完成如下方畫面，完整詳細程式碼，可以參考： github 源始碼

部分佈局程式碼

setExtendedState(JFrame.MAXIMIZED_BOTH);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setBounds(100, 100, 1051, 781);
m_contentPane = new JPanel();
setContentPane(m_contentPane);
GridBagLayout gbl_m_contentPane = new GridBagLayout();
gbl_m_contentPane.columnWidths = new int[] { 1024, 0 };
gbl_m_contentPane.rowHeights = new int[] { 50, 150, 126, 39, 148, 0 };
gbl_m_contentPane.columnWeights = new double[] { 1.0, Double.MIN_VALUE };
gbl_m_contentPane.rowWeights = new double[] { 0.0, 0.0, 0.0, 0.0, 1.0, Double.MIN_VALUE };
m_contentPane.setLayout(gbl_m_contentPane);

panel_4 = new JPanel();
GridBagConstraints gbc_panel_4 = new GridBagConstraints();
gbc_panel_4.fill = GridBagConstraints.BOTH;
gbc_panel_4.insets = new Insets(0, 0, 5, 0);
gbc_panel_4.gridx = 0;
gbc_panel_4.gridy = 0;
m_contentPane.add(panel_4, gbc_panel_4);
panel_4.setBorder(new TitledBorder(UIManager.getBorder("TitledBorder.border"),
    "\u7B2C\u4E00\u6B65\uFF1A\u8F93\u5165\u4E58\u8F66\u4FE1\u606F", TitledBorder.LEADING, TitledBorder.TOP,
    null, null));
GridBagLayout gbl_panel_4 = new GridBagLayout();
gbl_panel_4.columnWidths = new int[] { 68, 100, 54, 94, 0, 80, 77, 200, 0, 0 };
gbl_panel_4.rowHeights = new int[] { 37, 0 };
gbl_panel_4.columnWeights = new double[] { 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, Double.MIN_VALUE };
gbl_panel_4.rowWeights = new double[] { 0.0, Double.MIN_VALUE };
panel_4.setLayout(gbl_panel_4);

lblNewLabel_4 = new JLabel("起站");
GridBagConstraints gbc_lblNewLabel_4 = new GridBagConstraints();
gbc_lblNewLabel_4.insets = new Insets(0, 0, 0, 5);
gbc_lblNewLabel_4.anchor = GridBagConstraints.EAST;
gbc_lblNewLabel_4.gridx = 0;
gbc_lblNewLabel_4.gridy = 0;
panel_4.add(lblNewLabel_4, gbc_lblNewLabel_4);

textTrainFrom = new JTextField();
textTrainFrom.setToolTipText("必须填写精确的站点名称");
GridBagConstraints gbc_textTrainFrom = new GridBagConstraints();
gbc_textTrainFrom.insets = new Insets(0, 0, 0, 5);
gbc_textTrainFrom.fill = GridBagConstraints.HORIZONTAL;
gbc_textTrainFrom.gridx = 1;
gbc_textTrainFrom.gridy = 0;
panel_4.add(textTrainFrom, gbc_textTrainFrom);
textTrainFrom.setColumns(10);

lblNewLabel_5 = new JLabel("到站");
GridBagConstraints gbc_lblNewLabel_5 = new GridBagConstraints();
gbc_lblNewLabel_5.insets = new Insets(0, 0, 0, 5);
gbc_lblNewLabel_5.anchor = GridBagConstraints.EAST;
gbc_lblNewLabel_5.gridx = 2;
gbc_lblNewLabel_5.gridy = 0;
panel_4.add(lblNewLabel_5, gbc_lblNewLabel_5);

textTrainTo = new JTextField();
textTrainTo.setToolTipText("必须填写精确的站点名称");
GridBagConstraints gbc_textTrainTo = new GridBagConstraints();
gbc_textTrainTo.fill = GridBagConstraints.HORIZONTAL;
gbc_textTrainTo.insets = new Insets(0, 0, 0, 5);
gbc_textTrainTo.gridx = 3;
gbc_textTrainTo.gridy = 0;
panel_4.add(textTrainTo, gbc_textTrainTo);
textTrainTo.setColumns(10);

lblNewLabel_6 = new JLabel("乘车日期");
GridBagConstraints gbc_lblNewLabel_6 = new GridBagConstraints();
gbc_lblNewLabel_6.insets = new Insets(0, 0, 0, 5);
gbc_lblNewLabel_6.anchor = GridBagConstraints.EAST;
gbc_lblNewLabel_6.gridx = 4;
gbc_lblNewLabel_6.gridy = 0;
panel_4.add(lblNewLabel_6, gbc_lblNewLabel_6);

textPrimaryTrainDate = new JTextField();
textPrimaryTrainDate.setToolTipText("每次启动自动设定为当前日期20天后预售期");
GridBagConstraints gbc_textPrimaryTrainDate = new GridBagConstraints();
gbc_textPrimaryTrainDate.insets = new Insets(0, 0, 0, 5);
gbc_textPrimaryTrainDate.fill = GridBagConstraints.HORIZONTAL;
gbc_textPrimaryTrainDate.gridx = 5;
gbc_textPrimaryTrainDate.gridy = 0;
panel_4.add(textPrimaryTrainDate, gbc_textPrimaryTrainDate);
textPrimaryTrainDate.setColumns(10);

label = new JLabel("备选日期");
GridBagConstraints gbc_label = new GridBagConstraints();
gbc_label.anchor = GridBagConstraints.EAST;
gbc_label.insets = new Insets(0, 0, 0, 5);
gbc_label.gridx = 6;
gbc_label.gridy = 0;
panel_4.add(label, gbc_label);

textExtraTrainDates = new JTextField();
textExtraTrainDates.setToolTipText("主要用在指定多个日期刷“退票”");
textExtraTrainDates.setColumns(10);
GridBagConstraints gbc_textExtraTrainDates = new GridBagConstraints();
gbc_textExtraTrainDates.insets = new Insets(0, 0, 0, 5);
gbc_textExtraTrainDates.fill = GridBagConstraints.HORIZONTAL;
gbc_textExtraTrainDates.gridx = 7;
gbc_textExtraTrainDates.gridy = 0;
panel_4.add(textExtraTrainDates, gbc_textExtraTrainDates);

lblNewLabel = new JLabel("格式：按照预计乘车“日”优先级逗号分隔填写，如20,19,18,14");
GridBagConstraints gbc_lblNewLabel = new GridBagConstraints();
gbc_lblNewLabel.gridx = 8;
gbc_lblNewLabel.gridy = 0;
panel_4.add(lblNewLabel, gbc_lblNewLabel);

userPanelContainer = new JPanel();
userPanelContainer.setBorder(new TitledBorder(UIManager.getBorder("TitledBorder.border"),
    "\u7B2C\u4E8C\u6B65\uFF1A\u7528\u6237\u53CA\u8F66\u6B21\u8BBE\u7F6E", TitledBorder.LEADING,
    TitledBorder.TOP, null, null));
GridBagConstraints gbc_userPanelContainer = new GridBagConstraints();
gbc_userPanelContainer.fill = GridBagConstraints.BOTH;
gbc_userPanelContainer.insets = new Insets(0, 0, 5, 0);
gbc_userPanelContainer.gridx = 0;
gbc_userPanelContainer.gridy = 1;
m_contentPane.add(userPanelContainer, gbc_userPanelContainer);
userPanelContainer.setLayout(new GridLayout(0, 1, 0, 0));

passengerPanelContainer = new JPanel();
passengerPanelContainer.setBorder(new TitledBorder(UIManager.getBorder("TitledBorder.border"), "\u7B2C\u4E09\u6B65\uFF1A\u4E58\u8F66\u4EBA\u4FE1\u606F", TitledBorder.LEADING, TitledBorder.TOP, null, null));
GridBagConstraints gbc_passengerPanelContainer = new GridBagConstraints();
gbc_passengerPanelContainer.fill = GridBagConstraints.HORIZONTAL;
gbc_passengerPanelContainer.insets = new Insets(0, 0, 5, 0);
gbc_passengerPanelContainer.gridx = 0;
gbc_passengerPanelContainer.gridy = 2;
m_contentPane.add(passengerPanelContainer, gbc_passengerPanelContainer);

panelOperation = new JPanel();
GridBagConstraints gbc_panelOperation = new GridBagConstraints();
gbc_panelOperation.fill = GridBagConstraints.BOTH;
gbc_panelOperation.insets = new Insets(0, 0, 5, 0);
gbc_panelOperation.gridx = 0;
gbc_panelOperation.gridy = 3;
m_contentPane.add(panelOperation, gbc_panelOperation);
panelOperation.setLayout(new FlowLayout(FlowLayout.CENTER, 5, 5));

參考資料

那這次的課程就介紹到這邊囉～

順帶一提，KT 線上教室，臉書粉絲團，會不定期發佈相關資訊，不想錯過最新資訊，不要忘記來按讚，加追蹤喔！也歡迎大家將這套課程分享給更多人喔。

我們下次再見囉！！！掰掰～

搜尋此網誌

HKT 線上教室

【從零開始學 Java 程式設計】進階佈局管理器 - GridBagLayout

GridBagLayout

gridx, gridy

gridwidth, gridheight

fill

ipadx, ipady

insets

anchor

weightx, weighty

範例一

範例二

範例三

範例四

範例五

補充資料

參考資料

留言

張貼留言

這個網誌中的熱門文章

最新入門零基礎【從零開始學 Java 程式設計】線上教學課程目錄

NS - Nintendo Switch 遊戲比價網

【從零開始學 Kotlin 程式設計】Android Kotlin 線上教學課程目錄

【從零開始學 Java 程式設計】 進階佈局管理器 - GridBagLayout

GridBagLayout

gridx, gridy

gridwidth, gridheight

fill

ipadx, ipady

insets

anchor

weightx, weighty

範例一

範例二

範例三

範例四

範例五

補充資料

參考資料

留言

張貼留言

這個網誌中的熱門文章

最新入門零基礎【從零開始學 Java 程式設計】線上教學課程目錄

NS - Nintendo Switch 遊戲比價網

【從零開始學 Kotlin 程式設計】Android Kotlin 線上教學課程目錄

【從零開始學 Java 程式設計】進階佈局管理器 - GridBagLayout