GUI 02：布局管理器相關知識，AWT 的 3 種布局管理器應用，以及嵌套布局的使用

一、前言

記錄時間 [2024-05-31]

前置文章
GUI 01：GUI 編程概述，AWT 相關知識，Frame 窗口，Panel 面板，及監聽事件的應用

本文講述了 GUI 編程種布局管理器的相關知識，以及 AWT 的 3 種布局管理器——流式布局、邊界布局（東西南北中）、網格布局。搭配面板使用，可以實現布局嵌套功能。

二、布局管理器

1. 相關概念

布局管理器，是 GUI 編程中的一個重要概念，它負責安排容器中組件的大小和位置。使用布局管理器可以使得 GUI 在不同的窗口大小、屏幕分辨率以及國際化的文本長度變化時，能夠自適應地調整其布局，保持界面的整潔和一致性。

Java 提供了多種內置的布局管理器來滿足不同場景的需求。下面是一些常用的布局管理器：

FlowLayout（流式布局）：組件按照添加順序從左到右排列，行滿后換行。適合簡單的菜單或按鈕排列。
BorderLayout（邊界布局）：將容器劃分為五個區域：北、南、東、西和中心。每個區域只能放置一個組件，常用于主窗口的基本布局。
GridLayout（網格布局）：將容器分割成一個矩形網格，每個網格中放置一個組件。所有網格大小相等，適用于需要均勻分布組件的場景，如棋盤界面。
GridBagLayout（網格包布局）：提供更復雜的網格布局功能，允許每個組件跨越多行或多列，以及設置組件的權重來控制空間分配。非常靈活，但配置也相對復雜。
BoxLayout（盒式布局）：是 Swing 中提供的，它可以沿容器的一個軸（水平或垂直）排列組件，類似于流式布局，但提供了更精細的對齊和填充控制。
CardLayout（卡片布局）：允許在同一個空間內堆疊多個組件（像卡片一樣），但每次只有一個組件可見。常用于實現選項卡或向導式的界面。

2. 使用步驟

使用布局管理器的一般步驟包括：

創建一個容器（如 Frame、Panel 等）；
為這個容器選擇并設置一個合適的布局管理器；
向容器中添加組件，并根據需要調整組件的約束條件（某些布局管理器需要）；
調整容器的大小或使用 pack() 方法讓容器自動調整到最適合其內容的大小。

三、流式布局

1. 相關概念

在 Java 的 AWT（Abstract Window Toolkit，抽象窗口工具包）中，流式布局（FlowLayout）是一種布局管理器，它按照組件添加到容器的順序從左到右排列組件。當一行排滿時，后續的組件會自動換行到下一行繼續排列。流式布局非常適合于創建菜單、按鈕欄等簡單界面元素的布局。

流式布局的主要特點包括：

組件順序：組件按照添加到容器的順序依次排列。
對齊方式：默認情況下，組件在每一行中居左對齊，但可以通過構造函數指定居中對齊 FlowLayout.CENTER 或居右對齊 FlowLayout.RIGHT。
水平和垂直間隙：可以設置組件之間的水平和垂直間隙，以調整布局的緊湊度或寬松度。
自動換行：一行排滿后自動換到下一行顯示，無需手動處理換行邏輯。

2. 案例分析

編寫代碼

例如，將 3 個按鈕按照流式布局添加到窗口中。

public class TestFlowLayout {public static void main(String[] args) {Frame frame = new Frame("TestFlowLayout");// 組件 - 按鈕Button button1 = new Button("button1");Button button2 = new Button("button2");Button button3 = new Button("button3");// 設置為流式布局frame.setLayout(new FlowLayout());frame.setSize(400, 400);// 把按鈕添加上去frame.add(button1);frame.add(button2);frame.add(button3);frame.setVisible(true);}
}

效果查看

三個按鈕在窗口中的位置如圖所示，流式布局默認是居中的。

在這里插入圖片描述

居左居右

流式布局默認是居中的，當然也可以實現居左居右。

// 流式布局默認居中
frame.setLayout(new FlowLayout());// 設置靠左
frame.setLayout(new FlowLayout(FlowLayout.LEFT));// 設置靠右
frame.setLayout(new FlowLayout(FlowLayout.RIGHT));

四、邊界布局

1. 相關概念

邊界布局（BorderLayout）將容器劃分為五個區域：北（North）、南（South）、東（East）、西（West）和中心（Center）。每個區域可以放置一個組件，這樣的設計非常適合創建具有標準框架結構的窗口，比如帶有菜單欄、工具欄、狀態欄和主要內容區域的窗口布局。

邊界布局的特點包括：

五個區域：每個區域都有特定的含義和默認的行為。中心區域通常占據最大的空間，而北、南、東、西區域則作為邊緣區域，通常放置輔助性的控件如按鈕、標簽等。
- North：位于容器頂部，通常用于放置標題欄、菜單欄等。
- South：位于容器底部，常用于放置狀態欄、確認/取消按鈕等。
- East：位于容器右側，適合放置側邊欄或較小的控制面板。
- West：位于容器左側，用途與東區相似，也是放置輔助控件的好位置。
- Center：占據容器剩余的所有空間，主要用于放置主要的內容或控件。
組件大小：除了中心區域會填充剩余空間外，其他區域的大小默認為所包含組件的最佳大小，但也可以通過設置組件的首選大小來影響它們的尺寸。
單一組件：邊界布局的每個區域只能放置一個組件。如果需要在同一區域內放置多個組件，應該先將這些組件放入一個容器（如Panel），再將該容器添加到相應的區域。

2. 案例分析

編寫代碼

例如，在東西南北中 5 個位置分別添加一個按鈕。

public class TestBorderLayout {public static void main(String[] args) {Frame frame = new Frame("TestBorderLayout");Button east = new Button("East");Button west = new Button("West");Button south = new Button("South");Button north = new Button("North");Button center = new Button("Center");// 添加到布局中frame.add(east, BorderLayout.EAST);frame.add(west, BorderLayout.WEST);frame.add(south, BorderLayout.SOUTH);frame.add(north, BorderLayout.NORTH);frame.add(center, BorderLayout.CENTER);frame.setSize(400, 400);frame.setVisible(true);}
}

效果查看

窗口效果如圖所示，呈現出東西南北中的架構。

在這里插入圖片描述

五、網格布局

1. 相關概念

網格布局（GridLayout）將容器劃分為一個二維的網格結構，每個網格中可以放置一個組件。組件在網格中均勻分布，每個網格的大小相同，由其中最大的組件決定。

網格布局適用于需要將界面元素組織成規則矩陣的情況，如計算器、棋盤或表格布局等。

使用網格布局的特點包括：

行列數量：在創建 GridLayout 時，可以指定行數和列數，或者只指定一個參數。
- 如 new GridLayout(3, 2) 表示 3 行 2 列；
- 而 new GridLayout(2) 表示 2 行，每行的列數由添加的組件自動決定。
組件大小：所有網格的大小一致，自動調整以適應容器的大小，且所有組件在網格中大小相等。這意味著較大的組件可能會擠壓其他組件的空間。
填充順序：組件按照添加到容器的順序填充網格，從左到右，從上到下。
空白空間：網格布局不考慮組件間的空白空間，所有組件緊密相鄰。

2. 案例分析

編寫代碼

例如，設置一個 3 行 2 列的網格，分別在每個網格中放置一個按鈕。

使用 pack() 方法讓容器自動調整到最適合其內容的大小。

public class TestGridLayout {public static void main(String[] args) {Frame frame = new Frame("TestGridLayout");Button btn1 = new Button("btn1");Button btn2 = new Button("btn2");Button btn3 = new Button("btn3");Button btn4 = new Button("btn4");Button btn5 = new Button("btn5");Button btn6 = new Button("btn6");frame.setLayout(new GridLayout(3, 2));frame.add(btn1);frame.add(btn2);frame.add(btn3);frame.add(btn4);frame.add(btn5);frame.add(btn6);// java 函數，網格自適應窗口布局frame.pack();frame.setVisible(true);}
}

效果查看

窗口效果如圖所示，六個按鈕按從左到右，從上到下的次序添加到窗口中。

在這里插入圖片描述

六、綜合案例

1. 案例要求

接下來完成嵌套布局案例，具體要求如下：

將按鈕擺放成如圖所示模樣；
設置關閉按鈕監聽事件。

在這里插入圖片描述

2. 案例分析

對上述布局進行大致劃分，首先可以上下結構——2 行 1 列的網格布局（p1 和 p3）；
p1 設置為邊界布局（東西南北中）布局，中間嵌入 p2，p2 為 2 行 1 列的網格布局；
p3 設置為邊界布局（東西南北中）布局，中間嵌入 p4，p4 為 2 行 2 列的網格布局。

在這里插入圖片描述

3. 代碼實現

設置頂層窗口

設置頂層 Frame 窗口的一系列參數：可見性、寬高、初始位置、背景顏色，以及布局。

// 總 Frame
Frame frame = new Frame("布局嵌套");
frame.setSize(400, 300);         // 設置寬高
frame.setLocation(300, 400);            // 設置初始位置
frame.setBackground(Color.blue);             // 設置背景顏色
frame.setVisible(true);                      // 設置可見
frame.setLayout(new GridLayout(2, 1));  // 設置網格布局

設置 4 個面板

設置 4 個面板 Panel，以完成布局的嵌套。

// 4 個面板
Panel p1 = new Panel(new BorderLayout());       // 邊界布局（東西南北中）布局
Panel p2 = new Panel(new GridLayout(2, 1));
Panel p3 = new Panel(new BorderLayout());
Panel p4 = new Panel(new GridLayout(2, 2));// p1 p3 添加到主窗口
frame.add(p1);
frame.add(p3);

完成上半部分

上半部分 p1 設置為邊界布局（東西南北中）布局，中間嵌入 p2，p2 為 2 行 1 列的網格布局。

把 p2 添加到 p1 中。

// 上半部分
p1.add(new Button("East-1"), BorderLayout.EAST);
p1.add(new Button("West-1"), BorderLayout.WEST);
p2.add(new Button("p2-btn-1"));
p2.add(new Button("p2-btn-2"));
p1.add(p2, BorderLayout.CENTER);    // 把 p2 添加到 p1 中

完成下半部分

下半部分 p3 設置為邊界布局（東西南北中）布局，中間嵌入 p4，p2 為 2 行 2 列的網格布局。

把 p4 添加到 p3 中。

// 下半部分
p3.add(new Button("East-2"), BorderLayout.EAST);
p3.add(new Button("West-2"), BorderLayout.WEST);
for (int i = 0; i < 4; i++) {p4.add(new Button("for" + i));
}
p3.add(p4, BorderLayout.CENTER);    // 把 p4 添加到 p3 中

設置按鈕監聽

設置關閉按鈕監聽——點擊關閉按鈕時，關閉窗口。

// 設置按鈕監聽
frame.addWindowListener(new WindowAdapter() {@Overridepublic void windowClosing(WindowEvent e) {System.exit(0);}
});

七、總結

要點整理

Frame 是頂層窗口；
Panel 無法單獨顯示，必須添加到某個容器中；
3 種布局管理器：流式布局、邊界布局（東西南北中）、網格布局；
參數：大小、定位、布局、背景顏色、可見性、監聽。

一些參考資料

狂神說 GUI 編程：https://www.bilibili.com/video/BV1DJ411B75F
IDEA 官網：https://www.jetbrains.com.cn/idea/
Java 開發手冊：https://developer.aliyun.com/ebook/394
Java 8 幫助文檔：https://docs.oracle.com/javase/8/docs/api/