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

作者： -
【從零開始學 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 線上教室，臉書粉絲團，會不定期發佈相關資訊，不想錯過最新資訊，不要忘記來按讚，加追蹤喔！也歡迎大家將這套課程分享給更多人喔。
我們下次再見囉！！！掰掰～

留言

張貼留言

回覆意見時，麻煩輸入一下暱稱
(隨便取個名字也好~ ^_^)
好讓我方便回覆您的問題，
選擇「名稱/網址」輸入您的暱稱，
麻煩一下，謝謝大家。

這個網誌中的熱門文章

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

作者： -
圖片
【從零開始學 Java 程式設計】  線上教學課程目錄 ，使用 Java 程式語言，開發應用程式。 本課程 Java 開發環境：IntelliJ IDEA Community 2019 + Java 8 從零開始學 Java 程式設計 學習 Java 程式語言最佳指南，從完全不會到登峰造極 課程說明 想學程式語言，但完全不懂怎麼辦？不知道要從哪一個程式語言開始，KT 強力推薦就從 Java 開始吧！在 2019 年 TIOBE 最新調查，最熱門、最受歡迎程式語言 Java 仍穩穩占據榜首第一名，多年來無人可撼動當今 Java 程式語言霸主地位。這也意謂者最多工作職缺，在 104、1111 和 518 等人力銀行，查詢關鍵字「Java 軟體工程師」皆可以看到，學會 Java 不怕找不到工作，學會 Java 正式跟低薪 22Ｋ說掰掰，我是 HKT，深耕程式教育多年，網紅知名講師，我知道新手、入門學習的痛，讓 KT 親自帶你，手拉手一步一步，邁向人生新的未來，成為未來趨勢科技，最搶手的人才。學會 Java，高薪工作馬上來。 這門課程完全適合初學者，無須任何編寫過程式碼經驗，我們將從零基礎開始介紹，編寫程式語言需具備的基礎知識。完全從零開始，初學者無痛上手，將會了解如何使用 Java 程式語言，由淺入深，快速掌握開發 Java 精髓與技巧。幫助您輕鬆快速建立 Java 開發基礎，早日順利邁向成為專家級一流開發人才。 網路自學 Java 最常見的三大痛 學習資訊東拼西湊，無法有系統很完整性的學習 英文資料看得霧煞煞，一頭霧水 觀念混淆，挫折感超重 課程特色 由淺入深，無痛學習 Java 的程式開發技巧 一次掌握 Java 最常用的核心關鍵知識 繁體中文教材，系統化的課綱編排，HKT (侯光燦) 講師影片教學 課程目錄 從零開始學 Java 程式設計:  課程限時優惠連結 Go 準備開始 No. 課程名稱 影片 講義 1 安裝 Java 開發軟體 連結 連結 2 IntelliJ IDEA 開發環境介紹 連結 連結 3 第一行程式碼 Hello World 連結 連結 Basic 基礎語法 No. 課程名稱 影片 講義 1 單行、多行註解程式 連結 連結 2 變數與常數 連結 連結 3 基本與參考資料型態 連結 連結 4 字串 連結 連結 5 資料型態轉換 連結 連結 6 運算
閱讀完整內容

NS - Nintendo Switch 遊戲比價網

作者： -
圖片
NS - Nintendo Switch 遊戲比價網 http://eshoplist.gameqb.net/ https://eshop-prices.com/prices https://savecoins.app/games/on-sale http://eshop-checker.xyz/ (電腦版會當，手機版不會) yahoo 匯率換算 https://tw.money.yahoo.com/currency-converter 手機APP 推薦：遊戲箱子 Android:  https://play.google.com/store/apps/details?id=tw.com.gamebox&hl=zh_TW iOS:  https://apps.apple.com/tw/app/%E9%81%8A%E6%88%B2%E7%AE%B1%E5%AD%90/id1461999065 關鍵字： eShop NSO（Nintendo Switch Online） 最便宜遊戲、比價、Switch、game 瑪利歐賽車8 瑪利歐派對 超級瑪利歐兄弟U 動物森友會
閱讀完整內容

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

作者： -
圖片
從零開始學 Kotlin 程式設計:  線上教學課程目錄 Android Kotlin 1.3 教學 , 開發 , 範例 , 入門 , 基礎 , 新手 , 程式設計 , Android 電子書 , Kotlin 教學 , Kotlin 電子書 , Android PDF , Android ebook , 免費下載 , Free Download 講義資料將陸續更新至: kotlin 基礎語法練習環境： IntelliJ IDEA 2018.3.3 + Kotlin 1.3 Android APP 開發環境：Android Studio 3.3 + Android 9 Pie + Kotlin 1.3 從零開始學 Kotlin 程式設計 使用 Kotlin 開發 Android APP 最佳指南，從完全不會到登峰造極 課程說明 Kotlin 又被稱之為 Android 界的 Swift， Google 2017年已正式宣布 Kotlin 成為 Android 官方開發語言。Android Studio 3 官方正式直接支援 Kotlin 語法，可以使用 Kotlin 來開發 Android APP 行動應用程式。 這門課程完全適合初學者，無須任何編寫過程式碼經驗，我們將從零基礎開始介紹，編寫程式語言需具備的基礎知識。首先我們將安裝 Kotlin 開發環境，然後編寫並運行第一行 Kotlin 程式。接下來介紹 Kotlin 基礎語法、邏輯判斷條件控制並討論循環控制等Kotlin 語法基本與進階使用知識，完全從零開始，初學者無痛上手。 如果你已經是一名 Android (Java) 開發者，你可以透過這門課程來了解超棒 Kotlin 程式語言。讓你可以編寫更乾淨、更強大的應用程式。 網路自學 Kotlin 最常見的三大痛 學習資訊東拼西湊，無法有系統很完整性的學習 英文資料看得霧煞煞，一頭霧水 觀念混淆，挫折感超重 課程特色 由淺入深，無痛學習 Kotlin 的程式開發技巧 一次掌握 Kotlin 最常用的核心關鍵知識 繁體中文教材，系統化的課綱編排，HKT (侯光燦) 講師影片教學 課程目錄 Go 準備開始 No. 課程名稱 影片 講義 1 安裝 Kotlin 開發軟體 連結 連結 2 IntelliJ IDEA 開發環境介紹 連結 連結 3 第一行程式碼 Hello
閱讀完整內容