# `GroupLayout`管理器 > 原文： [http://zetcode.com/tutorials/javaswingtutorial/grouplayout/](http://zetcode.com/tutorials/javaswingtutorial/grouplayout/) `GroupLayout`管理器是內置的 Swing 管理器。 它是唯一可以創建多平臺布局的內置管理器。 所有其他管理器要么非常簡單，要么使用固定大小的間隙，不適用于不同平臺和屏幕分辨率的用戶界面。 除了`GroupLayout`之外，我們還可以使用第三方`MigLayout`在 Java 中創建多平臺布局。 [Tweet](https://twitter.com/share) ZetCode 為 Swing 布局管理過程提供了 196 頁專門的電子書： [Java Swing 布局管理教程](/ebooks/javaswinglayout/) ## `GroupLayout`說明 `GroupLayout`將組件與實際布局分開； 所有組件都可以放置在一個地方，布局可以放置在另一個地方。 `GroupLayout`管理器獨立定義每個大小的布局。 在一個維度上，我們將組件放置在水平軸的旁邊。 在另一個維度中，我們沿垂直軸放置組件。 在兩種布局中，我們都可以順序或并行排列組件。 在水平布局中，一行組件稱為順序組，而一列組件稱為并行組。 在垂直布局中，一列組件稱為順序組，一排組件稱為并行組。 ## `GroupLayout`的差距 `GroupLayout`使用組件之間或組件與邊界之間的三種類型的間隙：`RELATED`，`UNRELATED`和`INDENTED`。 `RELATED`用于相關組件，`UNRELATED`用于不相關，`INDENTED`用于組件之間的縮進。 這些差距的主要優勢在于它們與分辨率無關； 也就是說，它們在不同分辨率的屏幕上的像素大小不同。 其他內置管理器在所有分辨率上錯誤地使用了固定大小的間隙。 令人驚訝的是，只有三個預定義的間隙。 在高質量的排版系統 LaTeX 中，只有三個垂直空間可用：`\smallskip`，`\medskip`和`\bigskip`。 在設計 UI 時，少即是多，而僅僅是因為我們可以使用可能不同的間隙大小，字體大小或顏色，但這并不意味著我們應該這樣做。 ## `GroupLayout`簡單示例 使用`addComponent()`方法將組件添加到布局管理器。 參數是最小，首選和最大大小值。 我們可以傳遞一些特定的絕對值，也可以提供`GroupLayout.DEFAULT_SIZE`或`GroupLayout.PREFERRED_SIZE`。 `GroupLayout.DEFAULT_SIZE`指示應使用組件的相應大小（例如，對于最小參數，該值由`getMinimumSize()`方法確定）。 以類似的方式，通過調用組件的`getPreferredSize()`方法來確定`GroupLayout.PREFERRED_SIZE` `GroupLayoutSimpleEx.java` ```java package com.zetcode; import javax.swing.GroupLayout; import javax.swing.JFrame; import javax.swing.JLabel; import javax.swing.JTextField; import java.awt.EventQueue; import static javax.swing.GroupLayout.Alignment.LEADING; import static javax.swing.LayoutStyle.ComponentPlacement.RELATED; public class GroupLayoutSimpleEx extends JFrame { public GroupLayoutSimpleEx() { initUI(); } private void initUI() { var pane = getContentPane(); var gl = new GroupLayout(pane); pane.setLayout(gl); var lbl = new JLabel("Name:"); var field = new JTextField(15); GroupLayout.SequentialGroup sg = gl.createSequentialGroup(); sg.addComponent(lbl).addPreferredGap(RELATED).addComponent(field, GroupLayout.DEFAULT_SIZE, GroupLayout.DEFAULT_SIZE, GroupLayout.PREFERRED_SIZE); gl.setHorizontalGroup(sg); GroupLayout.ParallelGroup pg = gl.createParallelGroup( LEADING, false); pg.addComponent(lbl).addComponent(field); gl.setVerticalGroup(pg); gl.setAutoCreateContainerGaps(true); pack(); setTitle("Simple"); setLocationRelativeTo(null); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String[] args) { EventQueue.invokeLater(() -> { var ex = new GroupLayoutSimpleEx(); ex.setVisible(true); }); } } ``` 在示例中，我們有一個標簽和一個文本字段。 文本字段不可擴展。 ```java GroupLayout.SequentialGroup sg = gl.createSequentialGroup(); sg.addComponent(lbl).addPreferredGap(RELATED).addComponent(field, GroupLayout.DEFAULT_SIZE, GroupLayout.DEFAULT_SIZE, GroupLayout.PREFERRED_SIZE); ``` `addComponent()`和`addPreferredGap()`方法都返回組對象。 因此，可以創建一系列方法調用。 我們將文本字段的最大大小更改為`GroupLayout.PREFERRED_SIZE`，從而使其在水平方向上超出其首選大小不可擴展。 （首選大小和最大大小之間的差異是組件增長的趨勢。這適用于遵循這些值的管理器。）將值改回`GroupLayout.DEFAULT_SIZE`將導致文本字段在水平維度上擴展。 ```java GroupLayout.ParallelGroup pg = gl.createParallelGroup( LEADING, false); ``` 在垂直布局中，`createParallelGroup()`的第二個參數接收為`false`。 這樣我們可以防止文本字段沿垂直方向增長。 通過將`addComponent()`的`max`參數設置為`GroupLayout.PREFERRED_SIZE`（在垂直布局中調用），可以實現相同的目的。  圖：`GroupLayout`簡單示例 ## `GroupLayout`基線對齊 基線對齊是使組件沿其包含的文本的基線對齊。 以下示例使兩個組件沿其基線對齊。 `GroupLayoutBaselineEx.java` ```java package com.zetcode; import javax.swing.GroupLayout; import javax.swing.JComboBox; import javax.swing.JFrame; import javax.swing.JLabel; import java.awt.EventQueue; import static javax.swing.GroupLayout.Alignment.BASELINE; public class GroupLayoutBaselineEx extends JFrame { private JLabel display; private JComboBox box; private String[] distros; public GroupLayoutBaselineEx() { initUI(); } private void initUI() { var pane = getContentPane(); var gl = new GroupLayout(pane); pane.setLayout(gl); distros = new String[] {"Easy", "Medium", "Hard"}; box = new JComboBox<>(distros); display = new JLabel("Level:"); gl.setAutoCreateContainerGaps(true); gl.setAutoCreateGaps(true); gl.setHorizontalGroup(gl.createSequentialGroup() .addComponent(display) .addComponent(box, GroupLayout.DEFAULT_SIZE, GroupLayout.DEFAULT_SIZE, GroupLayout.PREFERRED_SIZE) ); gl.setVerticalGroup(gl.createParallelGroup(BASELINE) .addComponent(box, GroupLayout.DEFAULT_SIZE, GroupLayout.DEFAULT_SIZE, GroupLayout.PREFERRED_SIZE) .addComponent(display) ); pack(); setTitle("Baseline alignment"); setLocationRelativeTo(null); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String[] args) { EventQueue.invokeLater(() -> { var ex = new GroupLayoutBaselineEx(); ex.setVisible(true); }); } } ``` 我們有一個標簽和一個組合框。 兩個組件都包含文本。 我們將這兩個組件沿其文本的基線對齊。 ```java gl.setHorizontalGroup(gl.createSequentialGroup() .addComponent(display) .addComponent(box, GroupLayout.DEFAULT_SIZE, GroupLayout.DEFAULT_SIZE, GroupLayout.PREFERRED_SIZE) ); ``` 通過將`BASELINE`參數傳遞到`createParallelGroup()`方法可以實現基線對齊。  圖：`GroupLayout`基線對齊 ## `GroupLayout`角按鈕示例 下面的示例在窗口的右下角放置兩個按鈕。 按鈕的大小相同。 `GroupLayoutCornerButtonsEx.java` ```java package com.zetcode; import javax.swing.GroupLayout; import javax.swing.JButton; import javax.swing.JFrame; import javax.swing.SwingConstants; import java.awt.Dimension; import java.awt.EventQueue; import static javax.swing.LayoutStyle.ComponentPlacement.RELATED; public class GroupLayoutCornerButtonsEx extends JFrame { public GroupLayoutCornerButtonsEx() { initUI(); } private void initUI() { setPreferredSize(new Dimension(300, 200)); var cpane = getContentPane(); var gl = new GroupLayout(cpane); cpane.setLayout(gl); gl.setAutoCreateGaps(true); gl.setAutoCreateContainerGaps(true); var okButton = new JButton("OK"); var closeButton = new JButton("Close"); gl.setHorizontalGroup(gl.createSequentialGroup() .addPreferredGap(RELATED, GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE) .addComponent(okButton) .addComponent(closeButton) ); gl.setVerticalGroup(gl.createSequentialGroup() .addPreferredGap(RELATED, GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE) .addGroup(gl.createParallelGroup() .addComponent(okButton) .addComponent(closeButton)) ); gl.linkSize(SwingConstants.HORIZONTAL, okButton, closeButton); pack(); setTitle("Buttons"); setLocationRelativeTo(null); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String[] args) { EventQueue.invokeLater(() -> { var ex = new GroupLayoutCornerButtonsEx(); ex.setVisible(true); }); } } ``` 該示例使用`GroupLayout`管理器創建角按鈕。 ```java gl.setHorizontalGroup(gl.createSequentialGroup() .addPreferredGap(RELATED, GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE) .addComponent(okButton) .addComponent(closeButton) ); ``` 在水平布局中，我們添加了一個可拉伸的間隙和兩個單個組件。 可伸展的縫隙將兩個按鈕推向右側。 間隙是通過`addPreferredGap()`方法調用創建的。 其參數是間隙的類型，間隙的首選大小和最大大小。 最大值和首選值之間的差異是間隙拉伸的能力。 當兩個值相同時，間隙具有固定大小。 ```java gl.setVerticalGroup(gl.createSequentialGroup() .addPreferredGap(RELATED, GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE) .addGroup(gl.createParallelGroup() .addComponent(okButton) .addComponent(closeButton)) ); ``` 在垂直布局中，我們添加了一個可拉伸的間隙和兩個組件的平行組。 同樣，該間隙將按鈕組推到底部。 ```java gl.linkSize(SwingConstants.HORIZONTAL, okButton, closeButton); ``` `linkSize()`方法使兩個按鈕的大小相同。 我們只需要設置它們的寬度，因為默認情況下它們的高度已經相同。  圖：`GroupLayout`角按鈕 ## `GroupLayout` 密碼示例 在基于表單的應用中可以找到以下布局，該應用由標簽和文本字段組成。 `GroupLayoutPasswordEx.java` ```java package com.zetcode; import javax.swing.GroupLayout; import javax.swing.JFrame; import javax.swing.JLabel; import javax.swing.JTextField; import java.awt.EventQueue; import static javax.swing.GroupLayout.Alignment.BASELINE; import static javax.swing.GroupLayout.Alignment.TRAILING; public class GroupLayoutPasswordEx extends JFrame { public GroupLayoutPasswordEx() { initUI(); } private void initUI() { var pane = getContentPane(); var gl = new GroupLayout(pane); pane.setLayout(gl); var serviceLbl = new JLabel("Service:"); var userNameLbl = new JLabel("User name:"); var passwordLbl = new JLabel("Password:"); var field1 = new JTextField(10); var field2 = new JTextField(10); var field3 = new JTextField(10); gl.setAutoCreateGaps(true); gl.setAutoCreateContainerGaps(true); gl.setHorizontalGroup(gl.createSequentialGroup() .addGroup(gl.createParallelGroup(TRAILING) .addComponent(serviceLbl) .addComponent(userNameLbl) .addComponent(passwordLbl)) .addGroup(gl.createParallelGroup() .addComponent(field1) .addComponent(field2) .addComponent(field3)) ); gl.setVerticalGroup(gl.createSequentialGroup() .addGroup(gl.createParallelGroup(BASELINE) .addComponent(serviceLbl) .addComponent(field1)) .addGroup(gl.createParallelGroup(BASELINE) .addComponent(userNameLbl) .addComponent(field2)) .addGroup(gl.createParallelGroup(BASELINE) .addComponent(passwordLbl) .addComponent(field3)) ); pack(); setTitle("Password application"); setLocationRelativeTo(null); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String[] args) { EventQueue.invokeLater(() -> { var ex = new GroupLayoutPasswordEx(); ex.setVisible(true); }); } } ``` 要求是：標簽必須在水平方向上右對齊，并且必須使用相應的文本字段垂直對齊其基線。 ```java gl.setHorizontalGroup(gl.createSequentialGroup() .addGroup(gl.createParallelGroup(TRAILING) .addComponent(serviceLbl) .addComponent(userNameLbl) .addComponent(passwordLbl)) .addGroup(gl.createParallelGroup() .addComponent(field1) .addComponent(field2) .addComponent(field3)) ); ``` 在水平方向上，布局由包裝在順序組中的兩個平行組組成。 標簽和字段分別放入其平行的組中。 平行標簽組具有`GroupLayout.Alignment.TRAILING`對齊方式，這使標簽正確對齊。 ```java gl.setVerticalGroup(gl.createSequentialGroup() .addGroup(gl.createParallelGroup(BASELINE) .addComponent(serviceLbl) .addComponent(field1)) .addGroup(gl.createParallelGroup(BASELINE) .addComponent(userNameLbl) .addComponent(field2)) .addGroup(gl.createParallelGroup(BASELINE) .addComponent(passwordLbl) .addComponent(field3)) ); ``` 在垂直布局中，我們確保標簽與其文本字段對齊至基線。 為此，我們將標簽及其對應的字段分組為具有`GroupLayout.Alignment.BASELINE`對齊方式的平行組。  圖：`GroupLayout`密碼示例 在本章中，我們使用內置的`GroupLayout`管理器來創建布局。